jQuery UI customization

jQuery UI customization

jQuery UI Foundation: Use options

Each plug-in in the jQuery UI has a default configuration, which is typically set based on the most basic and common usage. I f you want a plug-in to be set to a non-default value, you can use Options to override its default settings. T he option is a set of properties that are passed as parameters to the jQuery UI widget. F or example, the slider widget has the international option, which allows you to specify whether the slider is horizontal or vertical. In order to set this option for the slider, you simply pass it as an argument, as follows:

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

You can pass more different options, each separated by a comma:

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

Remember that the options need to be placed { } The above example is just a simple explanation, for more information on the entire jQuery UI widget, check out the jQuery UI instance.

Visual customization: Design a jQuery UI theme

If you want to design your own theme, the jQuery UI provides a perfect application for theme customization, which is ThemeRoller. For specific customization visit jQuery UI ThemeRoller.

ThemeRoller provides a custom interface for all elements designed with the jQuery UI widget. W hen you adjust "levers" in the left column, the widgets in the right column are displayed according to your design. T hemeRoller's Galery tab provides some design themes, as does the Download Builder page. You can make adjustments based on these topics or download them directly.

Download the theme

When you click the "Download theme" button on the ThemeRoller page, you'll jump to the Download Builder page and your custom theme will be automatically selected in the main drop-down menu. Y ou can further configure the download package. Once the download is complete, you'll example.html your custom theme on the page.

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