jQuery UI customization

jQuery UI provides a variety of customized ways. You've seen download Builder (Download Builder) how to customize a value that contains a custom version of your desired options, there is also provided other customized way.

jQuery UI Basics: Options

jQuery UI Each widget has a default configuration, the default configuration values ​​are generally based on the most basic and common usage settings. If you want to make a plug-in is set to non-default values, you can use the "options" override its default settings. Options is a set of attributes passed as a parameter to the jQuery UI widgets. For example, a slider (slider) widget has orientation option, which allows you to specify the slider is horizontal or vertical. To set this option slider, you only need to pass it as a parameter, as follows:

$( "#mySliderDiv" ).slider({
    orientation: "vertical"
});

You can pass more different options, each option separated by commas:

$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

Please remember options need braces { } inside. The example above is a simple explanation. For more information package jQuery UI widgets, see the jQuery UI instance .

Visual Customization: Design a jQuery UI theme

If you want to design your own theme, jQuery UI provides a perfect theme for custom applications, this is ThemeRoller. Specific customization please visit the jQuery the ThemeRoller the UI .

ThemeRoller all elements using jQuery UI widget designed to provide a custom interface. When you adjust the left column of the "levers", in the right column of the widget will be displayed according to your design. ThemeRoller the Gallery tab provides some design themes, and download Builder (Download Builder) provides the same page. You can make adjustments based on these themes, or download it directly.

Download theme

When you click ThemeRoller page "Download theme" button to jump to the download Builder (Download Builder) page, your custom theme will automatically be selected in the main drop-down menu. You can further configure the download package. Once the download is complete, you will see example.html page using your custom theme.

Tip: If you need to edit your theme, simply open the CSS file, locate the line 43, "To view and modify this theme , visit ...", the url is open topic link editing in ThemeRoller in.