Tag: jQuery-UI
jQuery-UI arrow boxes
This blog describes how to add arrows to the standard jQuery-UI error and highlight boxes. Arrows can be either from the left, right, top or bottom.
CSS, JavaScript, jQuery, jQuery-UI, UI
jQuery-UI Split Button
Here’s how to create a split button with jQuery-ui $( “#mySplitButton” ).splitButton();
jQuery-UI – Rich Autocomplete component
A problem with the out-of-box jQuery-ui autocomplete component is that: Only text is shown in the dropdown That same text populates the field upon list selection. Thankfully, this does not have to be the case. Images and other markup can easily be rendered in the suggestion list. Consequently, the text […]
Flexible Size, Flexible Color Icons for jQuery-UI
Different Icon Size, Different Icon Colors for jQuery-UI Achieving different size, different color icons in jQuery-ui and non-jQuery-ui web apps. This tutorial reveals how FontAwesome icons can be used rather than trying to resize existing jQuery-ui icons. I initially wanted jQuery-UI icons to be available in different sizes, for example: […]
CSS, JavaScript, jQuery, jQuery-UI, UI
jQuery-UI : change the color of a button using CSS classes
In many web applications it’s necessary to have more than one color button, primary and secondary for example.
|
1 2 |
<button>Click Me</button> <button class="primary">Click Me</button> |
This tutorial demonstrates how to achieve this using only CSS.
CSS, JavaScript, jQuery, jQuery-UI, UI
jQuery-UI : Specifying different Button Icon colors using only CSS classes
Doing this:
|
1 2 |
<button class="ui-icon ui-icon-key red">Click Me</button> <button class="ui-icon ui-icon-key white">Click Me</button> |
Results in This tutorial demonstrates how changing the icon color can be achieved.
CSS, JavaScript, jQuery, jQuery-UI, UI
jQuery-UI : Applying an Icon to a button using CSS classes
This tutorial simply demonstrates a generic reusable JavaScript snipped which will allow you to specify Button Icon’s using only CSS classes. I.e. no need to apply Icons using JS anymore.
|
1 |
<button class="ui-icon ui-icon-key">Click Me</button> |
CSS, JavaScript, jQuery, jQuery-UI, UI
jQuery-UI : Changing the color of an icon
This quick tutorial demonstrates how to change the color of jQuery UI icons. e.g.
|
1 2 3 |
<span class="ui-icon ui-icon-key red"></span> and <span class="ui-icon ui-icon-key blue"></span> |
will result in red and blue icons respectively