jQuery UI
jQuery UI provides a variety of customization methods. You've seen how the Download Builder can be customized with a custom version containing the options you want, but there are other ways to customize it.
jQuery UI Basics: Usage Options
Each plug-in in jQuery UI has a default configuration, and the default configuration values are generally set based on the most basic and common usage situations. If you want a plugin to be set to something other than the default, you can override its default settings using "options". Options are a set of properties passed as arguments 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. In order to set this option for the slider, you just pass it as a parameter like this:
$( "#mySliderDiv" ).slider({
orientation: "vertical"
});You can pass more different options, separated by commas between each option:
$( "#mySliderDiv" ).slider({
orientation: "vertical",
min: 0,
max: 150,
value: 50
});Please remember that options must be placed within curly brackets { }. The above example is just a simple explanation. For details on the entire set of jQuery UI widgets, check out 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, this is ThemeRoller. For specific customization, please visit jQuery UI ThemeRoller.
ThemeRoller provides a custom interface for all elements designed using jQuery UI widgets. As you adjust the "levers" in the left column, the widgets in the right column will appear according to your design. The ThemeRoller's Gallery tab provides some of the same design themes as those provided by the Download Builder page. You can make adjustments based on these themes, or download them directly.
Download theme
When you click the "Download theme" button on the ThemeRoller page, you will jump to the Download Builder page, your custom theme will be automatically selected in the body drop-down menu. You can further configure the download package. Once the download is complete, you will see the example.html page using your customized theme.
Tip: If you need to edit your theme, just open the CSS file and find line 43, "To view and modify this theme, visit ...", This url is the link to open the theme in ThemeRoller for editing.
