The JQuery UI applies different theme methods _jquery

At first, I was going to do it myself and modify the CSS file. This proved to be a very thankless thing.

Once on the jquery UI homepage, "Http://jqueryui.com/home", a word quickly attracted my attention: "themeable," which means "variable theme"? So I entered the "http://jqueryui.com/themeroller/" here, found that the next map of this place, their official website of the theme of the replacement is called "Theme Roller" (ha ha, translation level is general, the letter Tatsu ya also do not know how much to meet).

The first tab page says "Roll out our own theme style." After opening the following sub-items, you can define the style you want, and after you define it, click the download button to download your own set of theme styles. It's much more convenient than doing it yourself to change the CSS file.

When the Second tab page opens, it turns out that they are ready for a lot of topics. This is suitable for the lazy person like me, so many styles always have one is I want.

Select the style you like, click on the Download button, will automatically go to the download page, and then you want to download the theme style package. You can also download the page in the "Theme" area of the dropdown box to choose their own theme, I chose the "Cupertino".

Two compression packs are downloaded (note: Different theme styles, compressed package name is the same, save when not covered, after decompression, found that different themes in fact, only the content of the CSS folder is different, that is, the theme package resources are different (subject package resources including pictures and CSS files). The rest are the same, folder file names are the same, and even the names of the elements in the file are the same.

In the Application project project, you can use the mutable theme of the jquery UI by simply adding the subject pack and the "jquery-ui-1.8.4.custom.min.js" file to the project. As shown in figure:

All we have to do is add references to CSS files and JS files in pages that need to use the jQuery UI . I usually add it to the master page.

Copy Code code as follows:

<link rel= "stylesheet" type= text/css "href=" http://www.jb51.net/Content/smoothness/jquery-ui-1.8.4.custom.css "/>
<script type= "Text/javascript" src= "Http://www.cnblogs.com/Scripts/jquery-ui-1.8.4.custom.min.js" ></ Script>

When we replace the theme style for the jquery UI, we just need to modify the reference path to the CSS. As shown below, the part of this color is the place to modify.

Copy Code code as follows:

<link rel= "stylesheet" type= "Text/css" href= "Http://www.jb51.net/Content/cupertino/jquery-ui-1.8.4.custom.css" />

Here "http://jqueryui.com/demos/tabs/" is jQuery UISome examples of the use of this address, which has been directly entered into the tab control's instructions for use. Use the description of the page layout as shown below:

Left: Select the object you want to display;

Middle: is the actual effect of the runtime display place, click "View source" can display the source code;

Right: is a selection of some of the extended features of the example, select a different function, the display area will be changed, the source code area will also follow the changes; For example: the figure above selects "Open on MouseOver", Tab Control tab Page from the original need to click to switch into a mouse only need to move up to switch.

Finally, the jQuery UIis strongly recommended again.