How to apply different Theme in jQueryUI _ jquery

JQueryUI is a set of very useful jQueryTools libraries. The latest version is 1.8.4. In my own use process, there is always a bit uncomfortable. Because the default theme style in the downloaded package is like this, it is difficult to use it with a specific webpage style.

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

One time when the jQuery UI homepage [http://jqueryui.com/home‑stopped, a single word quickly attracted me :【Themeable]. Doesn't that mean "variable theme? 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.

The Code is as follows: