How to apply different Theme to jQuery UI

At the beginning, I was about to modify the CSS file myself. This proves to be a very laborious and thankless task.

On the homepage of jQuery UI? So I went to [translate (hahaha, the translation level is average, and Cinda ya does not know how much it is satisfied ).

　　

On the first TAB page, we will talk about [getting out of our own theme style ]. After opening the following items, you can define the style you need. After defining the items, click the Download button to download a set of theme styles you have defined. This is much easier than changing CSS files.

After opening the second TAB page, we found that they had prepared many topics. This is suitable for lazy people like me. There is always one style that I want.

Select your favorite style and click the Download button to go To the download page automatically. Then, you can download the desired theme style package. You can also select the desired topic in the Theme drop-down box on the download page. I chose Cupertino ].

Download the two packages (Note: The names of the packages are the same for different theme styles and do not overwrite them when saving them). After decompression, you will find that, different themes only have different contents in the CSS folder, that is, the resources of the theme package are different (the theme package resources include images and CSS files ). The others are the same, the folder names are the same, and even the names of elements in the file are the same.

In the project of the application, you only need to add the topic package and the [jquery-ui-1.8.4.custom.min.js] file to the project, you can use the variable themeJQuery UI.

All we need to do is to useJQuery UIAdd reference to CSS and JS files to the page. I usually add it to the master page.

Copy codeThe Code is 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>

To change the theme style of jQuery UI, you only need to modify the reference path of CSS. For example, the color is changed.Copy codeThe Code is 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/#isJQuery UISome examples of use, this address has been directly to the TAB control instructions for use. The page layout of instructions is as follows:

Left side: select the object you want to display;

In the middle: displays the actual effect during running. Click View Source to display the Source code;

On the right side: some examples of some extended functions of the selected object. When different functions are selected, the display area changes accordingly, and the source code area changes accordingly. For example, select Open on mouseover ], the Tab Page of the Tab control is changed from the one that needs to be clicked to the one that only needs to be moved by the mouse.

Finally, we strongly recommendJQuery UI.