最近项目中使用了一些插件来做页面，这里把jQuery UI的使用分享出来，希望 对新手有帮助。文章结尾附源码下载。

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文件的声明：

   

 

 

　　为了在页面上呈现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中定义一个无序列表，列表项决定了要显示的标签个数及要显示的标签名称。

Tabs1Tabs2Tabs3content of tab onecontent of tab twocontent of tab three

 

 

　　这里定义3个列表项，名称分别为Tabs1、Tabs2、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每个标签里面要显示的正文。页面部分基本完工。运行程序：

 

图 2

　　值得注意的是，进行到这一步并没有出现图0中的效果，tabs样式没有应用上。原因只可能有一个，那就是样式表。后来谷歌一下果然是没有把相应的样式表包含到页面。这在官方的Demo里也没有提及，也没给出相应的注意，我觉得这里Demo不该省略点如果重要的一句代码的，不一定每个第一次使用jQuery UI人都能快速找到问题。对于每一个新手，在进行到这一步都需要去谷歌一下为什么效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQuery UI 样式表的引用。

 

图 3

　　最后完整的代码大概是这样的。

 

Tabs1Tabs2Tabs3content of tab onecontent of tab twocontent of tab three () { ).tabs(); 42 43 })

 

 

　　由于是用的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>标签及内容删除掉，用如下的代码替换。

Section 1content of section 1Section 2content of section 2Section 3content of section 3

 

　　其中id为accordion的外围Div是容器，在脚本代码里面选中它然后对它应用accordion方法。

() { ).tabs(); ).accordion(); 8 9 })

 

 

　　之后，里面的每个<a>标签就会被解析成一个可以点击的标题，<a>标签后紧跟<div>用于放置本小块的内容。最后效果如下图。

 

图 6