1 jQuery UI
2 为我所用
2.1 Tabs
2.2 Accordion
2.2.1 使用基本的Accordion
2.2.2 实现打开多个标签
2.2.3 Accordion的嵌套
3 给插件应用主题——Theme Roller
3.1 更改配色
3.2 更改图标
4 相关连接
jQuery UI
图 2
值得注意的是，进行到这一步并没有出现图0中的效果，tabs样式没有应用上。原因只可能有一个，那就是样式表。后来谷歌一下果然是没有把相应的样式表包含到页面。这在官方的Demo里也没有提及，也没给出相应的注意，我觉得这里Demo不该省略点如果重要的一句代码的，不一定每个第一次使用jQuery UI人都能快速找到问题。对于每一个新手，在进行到这一步都需要去谷歌一下为什么效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQuery UI 样式表的引用。
图 3
最后完整的代码大概是这样的。
现在再来刷新一下页面，效果就出来了。
图 4
既然是用样式表控制的，代表着我们可以随意对它进行自定义，换颜色等，这在后面的应用样式 里介绍。
对于Accordion控件就有一些东西需要说的了。因为对于一个东西，如果它不够灵活，不易扩展，会给使用者带来很大的不便。
图 5
先来看一下如何将Accordion插件应用起来。我们将它放到我们的Tabs1页面里。同Tabs一样，应用起来也非常的简单，只需把相应的Div定义好，之后，在脚本总要所要做的工作也就是一句代码的事。是不是体验到了jQuery UI所带来的便捷了。
将之前tabs-1 Div 中的
标签及内容删除掉，用如下的代码替换。
图 6
需要注意的地方有两点。一是样式，每个jQuery UI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个标签然后跟一个 content of section 1.1 content of section 1.2 content of section 2 content of section 3 图 7 是不是有点坑爹。那如果我需要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每个Div加上边框。 content of section 1.1 content of section 1.2 content of section 2 content of section 3 图 8 jQuery UI Accordion最大的一个硬伤也是最让人蛋疼的特性就是同时只能打开一个标签，比如Section1被点开了，其他Secton必然处于闭合状态。如果我想实现同时有几个标签处于打开状态呢，并且我不希望打开的标签因为我点击了另外的标签而关闭掉。很遗憾，这个插件并不有提供相应的Option。更牛逼的是，在官方的Demo中明确说了，如果你非要让多个标签同时处于打开状态，那你就不要用我们的Accordion好了，爱用啥用啥，反正我们就是要让它只支持一个标签被打开。 图 9 好吧，我还没强大到可以重写这个Accordion插件，于是我谷歌“expander”” multi open accordion”之类的，确实还是有很多朋友是有这样的需求的，并且也有牛人给出了一些解决方法，但都有点复杂。最后的最后，我突然顿悟，把每个section都定义成accordion不就行了嘛。一个acction同时只能打开一个secton，如果我想要每个section都可任意打开关闭而不影响别的部分，那把每个section用accordion代替就好了，并且accordion里只定义一个section。 说起来有点晕，下面修改之前的代码，定义id分别为accordion1,accordion2,accordion3三个div并放入相应内容: 图 10 还有个问题就是accordion的嵌套。一开始我在尝试去实现这个功能时也是遇到了些麻烦的。 比如现在我们要在section 1里面想再放一个accordion，给它取名为subaccordion吧，需要注意的地方就是 这个subaccordion一定要放在“content of section1”这个Div中，其他任何形式的摆放都不会出现正确的效果。如果你觉得直接在Accordion 1里面加一个标签再加一个 图 11 有点不完美的地方就是Section1出现了滚动条，下面我们设置一下高度属性并且让里面那个子accortion一开始处于折叠状态。 修改脚本代码如下： 图 12 从这里你已经可以看到，可以设置任意一个标签一开始是处于折叠还是打开状态。当然也可以将一个accortion disable掉，那样点击标题就不会有折叠打开动作了。 3 给插件应用主题——Theme Roller 3.1更改配色 现在，我们是可以方便地使用jQuery UI 做出界面了。但试想，那么多人如果都在用，会不会把整个互联网搞得千篇一律，用户一打开浏览器走到哪里看到的都是同一个东西，会不会有点摸不着北。并且我们也需要在使用这些插件的时候进行一些调整以符合我们自己网站的主题，色调等。 jQuery UI支持用户定义样式，你甚至可以更改实现代码来进行更高级的自定义，如果你有能力的话。 你可以修改相应的css文件以达到修改样式的目的，但这不如到官网的主题网站去下载自己需要的主题，并且还可以在线编辑出自己想要的主题。 进入theme roller后，选择自己喜欢的主题样式下载下来。 图 13 解压后进行到css文件夹，将jquery-ui-1.8.24.custom.css文件和images文件夹复制到项目中适当位置，然后需要在页面正确地引用到，便可将样式应用上。不管你应用什么主题，主题所使用的图片名字都是一样的，只是颜色不一样而以。由于本例是用MVC模板生成的项目，所以项目中的imges文件夹中已经存在的图片和下载下来的图片可能部分重名，复制时询问是否替换，点击确实即可。 图 14 图 15 这时把之前写的样式表引用改成对这个customer样式表的引用 然后去刷新页面，效果如下图： 图 16 需要注意的是jquery-ui-1.8.24.custom.css与images文件夹的相对位置最好不要改变，也就是把它们两个放一起，因为css文件中会调用images文件夹中的图片，如果你改变了他们的相对位置，就需要到css中把所有对图片的调用路径通通改正确后才能使主题正常工作。 不仅仅是颜色，jQuery UI的主题里面，也为我们预设了很多图标可供选择，在网页上我们可以看到有一大堆丰富的图标。这些图标的颜色对应你所下载的主题，包含在了imges文件夹中。 图 17 问题是在这么多图标中如何准确指定我们想要的那一个。比如现在想把Accordion标题左边的三角形图标改成线条形的尖角形状。 下面只是个人提供的一个小技巧。将鼠标指到你想要的图标身上，会出现tooltip提示文本，这个文字就对应这个图标。 图 18 现在我们得到这个名字后，就可以到脚本代码里去进行修改了。 图19 到这里基本介绍了jQuery UI的使用过程。当然，jQuery UI不只包含tabs和accordion 这两个插件，其他的插件及效果的使用也相差不多，详尽的使用及设置方法都可以在官方的文档及Demo中找到答案。 后记：因为jQuery已经火得一塌糊涂了,如果再结合jQuery UI，将更大程度上减轻程序员的负担。在享受这些便利的同时，我们不得不默默地内心要感谢一下那些为jQuery及UI做出奉献的同行们，同时我们也能尽我们自己的一分力量，来丰富扩展jQuery的插件及UI库。 例子源码下载：http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar 标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在跟两个：
复制代码 代码如下:
Section 1
Section 2
Section 3
你原本以为 这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：
复制代码 代码如下:
Section 1
Section 2
Section 3
复制代码 代码如下:
然后修改脚本代码：
复制代码 代码如下:
运行程序，发现三个secton同时打开了，并且还不能关闭！这显然也不是我们想要的结果。原因很简单，如果上面所说的accordion这个插件有且仅有一个section是被打开的，每个accordion里我们只定义了一个section，那这个section毫无疑问应该处于被打开状态，由于只有它一个，把它关闭了之后没有其他section可以打开，所以索性我们想关它都关不掉了。
但幸运的是，我们可以通过设置accordion的collapsible为true来让这个唯一的section可以进行折叠打开操作。只需修改脚本如下：
复制代码 代码如下:
再次运行程序，Okay，一切如我们所想的那样。
，就会正确地在Section1里面解析出一个内嵌于Accortion1的Accordion，那你就错了。最后的代码及效果如下。
复制代码 代码如下:
........
复制代码 代码如下:
复制代码 代码如下:
复制代码 代码如下:
最后来看下效果,perfect.
相关连接
jQuery UI 官网
http://jqueryui.com/
theme roller
http://jqueryui.com/themeroller/
jQuery 学习：张子秋《从零开始学习jQuery》系列：
http://www.jb51.net/article/24908.htm
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
