关于jQueryUI使用心得和技巧.doc

1 jQuery UI 　　有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。 　　而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。 2 为我所用 　　下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。其他插件的详尽使用文档及演示在这里可以学习到，只不过是英文的。 　　2.1 Tabs 　　Tabs 形式的插件在网页及桌面应用程序中都使用得相当广泛，可以用作菜单，也可做为一小部分内容的选项卡 图0 　　首先在VS2010新建一个MVC项目，要使用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=/Scripts/jquery-ui-1.8.11.min.js type=text/javascript /script 　　为了在页面上呈现Tabs插件，我们需要定义一个Div，并且在script脚本代码里面选中它，在它身上应用tabs方法。 ? 1 2 3 4 5 6 7 8 9 10 11 12 div id=tabs ?/div ??? ?script type=text/javascript ??? ?????????$(document).ready(function () { ??? ?????????????$(#tabs).tabs(); ??? ?????????}) ??? ?/script 　　现在运行程序不会看到任何东西，因为我们还没有往主体Div中定义要显示的tab,只是定义好了一个可以放tabs的地方。现在tabs Div中定义一个无序列表，列表项决定了要显示的标签个数及要显示的标签名称。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 div id=tabs ??? ?????????ul ??? ?????????????lia href=#tabs-1Tabs1/a/li ??? ?????????????lia href=#tabs-2Tabs2/a/li ??? ?????????????lia href=#tabs-3Tabs3/a/li ??? ?????????/ul ??? ?????????div id=tabs-1 ??? ?????????????pcontent of tab one/p ??? ?????????/div ??? ?????????div id=tabs-2 ??? ?????????????pcontent of tab two/p ??? ?????????/div ??? ?????????div id=tabs-3 ??? ?????????????pcontent of tab three/p ??? ?????????/div ??? ?????/div 　　这里定义3个列表项，名称分别为Tabs1、Tabs2、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每个标签里面要显示的正文。页面部分基本完工。运行程序 图 2 　　值得注意的是，进行到