jQuery UI Customization
jQuery UI offers various customization methods. You have seen how the Download Builder customizes a version containing only the options you need, and there are other customization methods available as well.
jQuery UI Basics: Using Options
Each plugin in jQuery UI has a default configuration, which is generally set based on the most basic and common use cases. If you want to set a plugin to a non-default value, you can override its default settings using "options". Options are a set of attributes passed as parameters to jQuery UI widgets. For example, the slider widget has an orientation option that allows you to specify whether the slider is horizontal or vertical. To set this option for the slider, you simply pass it as a parameter, like this:
$( "#mySliderDiv" ).slider({
orientation: "vertical"
});
You can pass more different options, separated by commas:
$( "#mySliderDiv" ).slider({
orientation: "vertical",
min: 0,
max: 150,
value: 50
});
Remember that options should be placed within curly braces { }. The above example is just a simple explanation. For detailed information on the entire set of jQuery UI widgets, please refer to jQuery UI Examples.
Visual Customization: Designing a jQuery UI Theme
If you want to design your own theme, jQuery UI provides a perfect application for theme customization called ThemeRoller. For specific customization, visit jQuery UI ThemeRoller.
ThemeRoller offers a custom interface for all elements designed with jQuery UI widgets. As you adjust the "levers" in the left column, the widgets in the right column will display according to your design. The Gallery tab of ThemeRoller provides some pre-designed themes, similar to those offered on the Download Builder page. You can adjust these themes or download them directly.
Downloading a Theme
When you click the "Download theme" button on the ThemeRoller page, it will redirect you to the Download Builder page, where your custom theme will be automatically selected in the main dropdown menu. You can further configure the download package. Once the download is complete, you will see the example.html page using your custom theme.
Tip: If you need to edit your theme, simply open the CSS file, find line 43, "To view and modify this theme, visit ...", and the URL is the link to open the theme for editing in ThemeRoller.