在jQuery用户界面中应用不同主题的方法

一开始，我打算自己修改CSS文件。这被证明是一件非常吃力不讨好的事情。有一次，当我在jQuery UI的首页【http://jqueryui.com/home】停下来的时候，一个词很快吸引了我的注意力：【主题】。这不就是“多变主题”的意思吗？所以我去了[http://jqueryui.com/themeroller/]，在下图中找到了这个地方。他们的人在官网上把主题变化称为“主题轮”(哈哈哈，翻译水平一般，还有字母，字母，字母，字母，字母，字母，字母，字母，字母，字母，字母，字母，字母，字母，字母，字母

第一个TAB页写着“走出我们自己的主题风格”。打开以下子项目后，您可以定义自己的样式。定义好之后，点击下载按钮下载一组你定义的主题样式。这比自己修改CSS文件方便多了。当第二个TAB页打开时，原来他们已经准备了很多主题。这适合我这样的懒人。我想要的款式总有一种。

选择你喜欢的风格，点击下载按钮，你会自动转到下载页面，然后就可以下载你想要的主题风格包了。您也可以从下载页面[主题]区域的下拉框中选择您需要的主题。我选择了[库比蒂诺]。

下载完两个压缩包后(注意：不同主题样式的压缩包名称相同，保存时不要覆盖)，发现不同主题只有CSS文件夹中的内容不同，即主题包的资源不同(主题包资源包括图片和CSS文件)。其他的都是一样的，文件夹的文件名也是一样的，甚至文件中元素的名字也是一样的。

在应用的项目中，只需要将主题包和[jQuery-UI-1 . 8 . 4 . custom . min . js]文件添加到项目中，就可以使用主题可变的jQuery UI。图片：

我们所要做的就是在需要使用jQuery UI的页面中添加对CSS文件和JS文件的引用。我一般都是加在母版页上。复制了以下代码：linkrel='样式表' type=' text/CSS ' href='//www . JB 51 . net/content/smooth/jquery-UI-1 . 8 . 4 . custom . CSS '/script type=' text/JavaScript ' src=' http :http://www . cn blogs.com/scripts/jQuery-UI-1 . 8 . 4 . custom . min . js '/script当我们想要更改jQuery的主题样式时如下图，颜色部分是修改的地方。复制的代码如下： linkrel='样式表' type=' text/CSS ' href='//www . JB 51 . net/content/cupertino/jQuery-UI-1 . 8 . 4 . custom . CSS '/[http://jqueryui.com/demos/tab/]这里介绍了jqueryui的一些用法示例，这个地址已经直接输入了。说明书的页面布局如下：。

左：选择要显示的对象；中间：是显示运行时实际效果的地方。点击【查看源代码】显示源代码；右图：这是所选对象的一些扩展功能的示例。如果选择了不同的功能，显示区域会相应改变，源代码区域也会相应改变。比如上图选择【鼠标悬停打开】时，tab控件的Tab页可以从点击切换到只移动鼠标。最后，再次强烈推荐jQuery UI。