最近项目中使用了一些插件来作页面，这里把jQuery UI的使用分享出来，但愿 对新手有帮助。文章结尾附源码下载。javascript
1 jQuery UIcss
2 为我所用html
2.1 Tabsjava
2.2 Accordionjquery
3.1 更改配色学习
1 jQuery UI
有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 从新学习一遍而后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。
而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就能够作出使人炫目的界面。让你在作界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据须要自定义甚至从新设计。
2 为我所用
下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。其余插件的详尽使用文档及演示在这里能够学习到，只不过是英文的。
2.1Tabs
Tabs 形式的插件在网页及桌面应用程序中都使用得至关普遍，能够用做菜单，也可作为一小部份内容的选项卡
图0
首先，要使用jQuery UI,首先要把jQuery及jQuery UI 脚本文件包含在项目当中，而且相关页面要用<script>标签进行引用。当咱们建立好一个MVC项目后，在Scripts文件夹里，系统已经自动把jQuery及jQuery UI 脚本文件包含在项目当中了（如图1）。
图 1
图中jquery-1.5.1-vsdoc.js为包含完整提示注释的版本，在VS里编写代码时会有智能地显示提示信息及注释；jquery-1.5.1.js为标准版本；带min的为压缩精简后的版本，为的是在客户端减小下载时间。通常页面中咱们会使用精简的版本，只要项目文件夹包含jquery-1.5.1-vsdoc.js，VS会自动调用里面的提示信息。
如今须要作的就是在页面将它包含进来。因为建立好项目后，系统在Site.Mater页面中已经将jQuery引用到页面，这意味着全部使用了母版页的页面都默认引用了jQuery,因此咱们在index页面只须要添加对是jQuery UI文件的声明：
1 <script src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript" ></script>
为了在页面上呈现Tabs插件，咱们须要定义一个Div，而且在<script>脚本代码里面选中它，在它身上应用tabs方法。
1 <div id="tabs"> 2 </div> 3 4 <script type="text/javascript"> 5 6 $(document).ready(function () { 7 8 $("#tabs").tabs(); 9 10 }) 11 12 </script>
如今运行程序不会看到任何东西，由于咱们尚未往主体Div中定义要显示的tab,只是定义好了一个能够放tabs的地方。如今tabs Div中定义一个无序列表，列表项决定了要显示的标签个数及要显示的标签名称。
1 <div id="tabs"> 2 3 <ul> 4 5 <li><a href="#tabs-1">Tabs1</a></li> 6 7 <li><a href="#tabs-2">Tabs2</a></li> 8 9 <li><a href="#tabs-3">Tabs3</a></li> 10 11 </ul> 12 13 <div id="tabs-1"> 14 15 <p>content of tab one</p> 16 17 </div> 18 19 <div id="tabs-2"> 20 21 <p>content of tab two</p> 22 23 </div> 24 25 <div id="tabs-3"> 26 27 <p>content of tab three</p> 28 29 </div> 30 31 </div>
这里定义3个列表项，名称分别为Tabs一、Tabs二、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每一个标签里面要显示的正文。页面部分基本完工。运行程序：
图 2
值得注意的是，进行到这一步并无出现图0中的效果，tabs样式没有应用上。缘由只可能有一个，那就是样式表。后来谷歌一下果真是没有把相应的样式表包含到页面。这在官方的Demo里也没有说起，也没给出相应的注意，我以为这里Demo不应省略点若是重要的一句代码的，不必定每一个第一次使用jQuery UI人都能快速找到问题。对于每个新手，在进行到这一步都须要去谷歌一下为何效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQuery UI 样式表的引用。
图 3
最后完整的代码大概是这样的。
1 <link href="http://www.cnblogs.com/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/> 2 3 <script src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script> 4 5 <div id="tabs"> 6 7 <ul> 8 9 <li><a href="#tabs-1">Tabs1</a></li> 10 11 <li><a href="#tabs-2">Tabs2</a></li> 12 13 <li><a href="#tabs-3">Tabs3</a></li> 14 15 </ul> 16 17 <div id="tabs-1"> 18 19 <p>content of tab one</p> 20 21 </div> 22 23 <div id="tabs-2"> 24 25 <p>content of tab two</p> 26 27 </div> 28 29 <div id="tabs-3"> 30 31 <p>content of tab three</p> 32 33 </div> 34 35 </div> 36 37 <script type="text/javascript"> 38 39 $(document).ready(function () { 40 41 $("#tabs").tabs(); 42 43 }) 44 45 </script>
因为是用的MVC模板生成的项目，因此在Content/themes/base文件夹里已经放入了jQuery UI的CSS样式表，若是没有，你须要单独下载而后放到项目中，并在页面正确引用。
如今再来刷新一下页面，效果就出来了。
图 4
既然是用样式表控制的，表明着咱们能够随意对它进行自定义，换颜色等，这在后面的应用样式 里介绍。
2.2Accordion
对于Accordion控件就有一些东西须要说的了。由于对于一个东西，若是它不够灵活，不易扩展，会给使用者带来很大的不便。
图 5
2.2.1使用基本的Accordion
先来看一下如何将Accordion插件应用起来。咱们将它放到咱们的Tabs1页面里。同Tabs同样，应用起来也很是的简单，只需把相应的Div定义好，以后，在脚本总要所要作的工做也就是一句代码的事。是否是体验到了jQuery UI所带来的便捷了。
将以前tabs-1 Div 中的<P>标签及内容删除掉，用以下的代码替换。
1 <div id="tabs-1"> 2 3 <div id="accordion"> 4 5 <h3> 6 7 <a href="#">Section 1</a></h3> 8 9 <div> 10 11 <p>content of section 1</p> 12 13 </div> 14 15 <h3> 16 17 <a href="#">Section 2</a></h3> 18 19 <div> 20 21 <p>content of section 2</p> 22 23 </div> 24 25 <h3> 26 27 <a href="#">Section 3</a></h3> 28 29 <div> 30 31 <p>content of section 3</p> 32 33 </div> 34 35 </div> 36 37 </div>
其中id为accordion的外围Div是容器，在脚本代码里面选中它而后对它应用accordion方法。
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion").accordion(); 8 9 }) 10 11 </script>
以后，里面的每一个<a>标签就会被解析成一个能够点击的标题，<a>标签后紧跟<div>用于放置本小块的内容。最后效果以下图。
图 6
须要注意的地方有两点。一是样式，每一个jQuery UI其实都用了在上面说的那个样式表，若是先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式须要严格按照一个<a>标签而后跟一个<div>标签的形式，这样的交叉形式若是被打乱，呈现出来的结果将是你所不肯意扯的。好比你在<a>跟两个<div>：
1 <div id="accordion"> 2 3 <h3> 4 5 <a href="#">Section 1</a></h3> 6 7 <div> 8 9 <p>content of section 1.1</p> 10 11 </div> 12 13 <div> 14 15 <p>content of section 1.2</p> 16 17 </div> 18 19 <h3> 20 21 <a href="#">Section 2</a></h3> 22 23 <div> 24 25 <p>content of section 2</p> 26 27 </div> 28 29 <h3> 30 31 <a href="#">Section 3</a></h3> 32 33 <div> 34 35 <p>content of section 3</p> 36 37 </div> 38 39 </div>
你本来觉得 这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：
图 7
是否是有点坑爹。那若是我须要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每一个Div加上边框。
1 <div id="accordion"> 2 3 <h3> 4 5 <a href="#">Section 1</a></h3> 6 7 <div> 8 9 <div style="border: 1px solid gray"> 10 11 <p>content of section 1.1</p> 12 13 </div> 14 15 <div style="border: 1px solid gray"> 16 17 <p>content of section 1.2</p> 18 19 </div> 20 21 </div> 22 23 <h3> 24 25 <a href="#">Section 2</a></h3> 26 27 <div> 28 29 <p>content of section 2</p> 30 31 </div> 32 33 <h3> 34 35 <a href="#">Section 3</a></h3> 36 37 <div> 38 39 <p>content of section 3</p> 40 41 </div>
图 8
2.2.2实现打开多个标签
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并放入相应内容:
1 <div id="tabs-1"> 2 3 <div id="accordion1"> 4 5 <h3><a href="#">Section 1</a></h3> 6 7 <div>content of section 1</div> 8 9 </div> 10 11 <div id="accordion2"> 12 13 <h3><a href="#">Section 2</a></h3> 14 15 <div>content of section 2</div> 16 17 </div> 18 19 <div id="accordion3"> 20 21 <h3><a href="#">Section 3</a></h3> 22 23 <div>content of section 3</div> 24 25 </div> 26 27 </div>
而后修改脚本代码：
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion(); 8 9 $("#accordion2").accordion(); 10 11 $("#accordion3").accordion(); 12 13 }) 14 15 </script>
运行程序，发现三个secton同时打开了，而且还不能关闭！这显然也不是咱们想要的结果。缘由很简单，若是上面所说的accordion这个插件有且仅有一个section是被打开的，每一个accordion里咱们只定义了一个section，那这个section毫无疑问应该处于被打开状态，因为只有它一个，把它关闭了以后没有其余section能够打开，因此索性咱们想关它都关不掉了。
但幸运的是，咱们能够经过设置accordion的collapsible为true来让这个惟一的section能够进行折叠打开操做。只需修改脚本以下：
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion({ collapsible: true }); 8 9 $("#accordion2").accordion({ collapsible: true }); 10 11 $("#accordion3").accordion({ collapsible: true }); 12 13 }) 14 15 </script>
再次运行程序，Okay，一切如咱们所想的那样。
图 10
2.2.3Accordion的嵌套
还有个问题就是accordion的嵌套。一开始我在尝试去实现这个功能时也是遇到了些麻烦的。
好比如今咱们要在section 1里面想再放一个accordion，给它取名为subaccordion吧，须要注意的地方就是 这个subaccordion必定要放在“content of section1”这个Div中，其余任何形式的摆放都不会出现正确的效果。若是你以为直接在Accordion 1里面加一个<a>标签再加一个<div>，就会正确地在Section1里面解析出一个内嵌于Accortion1的Accordion，那你就错了。最后的代码及效果以下。
1 <div id="tabs-1"> 2 3 <div id="accordion1"> 4 5 <h3><a href="#">Section 1</a></h3> 6 7 <div> 8 9 <div id="subaccortion"> 10 11 <h3><a href="#">subaccortion</a></h3> 12 13 <div>content of subaccortion</div> 14 15 </div> 16 17 </div> 18 19 </div> 20 21 <div id="accordion2"> 22 ........
图 11
有点不完美的地方就是Section1出现了滚动条，下面咱们设置一下高度属性而且让里面那个子accortion一开始处于折叠状态。
修改脚本代码以下：
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion({ collapsible: true, autoHeight: false }); 8 9 $("#subaccortion").accordion({ collapsible: true, active:false }); 10 11 $("#accordion2").accordion({ collapsible: true, autoHeight: false }); 12 13 $("#accordion3").accordion({ collapsible: true, autoHeight: false }); 14 15 }) 16 17 </script>
图 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样式表的引用
1 <link href="http://www.cnblogs.com/Content/themes/base/jquery-ui-1.8.24.custom.css" type="text/css" rel="stylesheet" />
而后去刷新页面，效果以下图：
图 16
须要注意的是jquery-ui-1.8.24.custom.css与images文件夹的相对位置最好不要改变，也就是把它们两个放一块儿，由于css文件中会调用images文件夹中的图片，若是你改变了他们的相对位置，就须要到css中把全部对图片的调用路径统统改正确后才能使主题正常工做。
3.2更改图标
不只仅是颜色，jQuery UI的主题里面，也为咱们预设了不少图标可供选择，在网页上咱们能够看到有一大堆丰富的图标。这些图标的颜色对应你所下载的主题，包含在了imges文件夹中。
图 17
问题是在这么多图标中如何准确指定咱们想要的那一个。好比如今想把Accordion标题左边的三角形图标改为线条形的尖角形状。
下面只是我的提供的一个小技巧。将鼠标指到你想要的图标身上，会出现tooltip提示文本，这个文字就对应这个图标。
图 18
如今咱们获得这个名字后，就能够到脚本代码里去进行修改了。
1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 5 $("#tabs").tabs(); 6 7 $("#accordion1").accordion({ collapsible: true, autoHeight: false, 8 9 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 10 11 }); 12 13 $("#subaccortion").accordion({ collapsible: true, active:false , 14 15 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 16 17 }); 18 19 $("#accordion2").accordion({ collapsible: true, autoHeight: false , 20 21 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 22 23 }); 24 25 $("#accordion3").accordion({ collapsible: true, autoHeight: false, 26 27 icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 28 29 }); 30 31 }) 32 33 </script>
最后来看下效果,perfect.
图19
到这里基本介绍了jQuery UI的使用过程。固然，jQuery UI不仅包含tabs和accordion 这两个插件，其余的插件及效果的使用也相差很少，详尽的使用及设置方法均可以在官方的文档及Demo中找到答案。
转载自这里