关于jQuery UI 使用心得及技巧

1jQueryUI有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip重新学习一遍然后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。而jQueryUI则是在jQuery基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。2为我所用下面以Tabs和Accordion插件来看看如何在项目中使用jQueryUI。其他插件的详尽使用文档及演示在这里可以学习到，只不过是英文的。2.1TabsTabs形式的插件在网页及桌面应用程序中都使用得相当广泛，可以用作菜单，也可做为一小部分内容的选项卡图0首先在VS2010新建一个MVC项目，要使用jQueryUI,首先要把jQuery及jQueryUI脚本文件包含在项目当中，并且相关页面要用script标签进行引用。当我们创建好一个MVC项目后，在Scripts文件夹里，系统已经自动把jQuery及jQueryUI脚本文件包含在项目当中了（如图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页面只需要添加对是jQueryUI文件的声明：?1scriptsrc==text/javascript/script为了在页面上呈现Tabs插件，我们需要定义一个Div，并且在script脚本代码里面选中它，在它身上应用tabs方法。?123456789101112divid=tabs/divscripttype=text/javascript$(document).ready(function(){$(#tabs).tabs();})/script现在运行程序不会看到任何东西，因为我们还没有往主体Div中定义要显示的tab,只是定义好了一个可以放tabs的地方。现在tabsDiv中定义一个无序列表，列表项决定了要显示的标签个数及要显示的标签名称。?1234567891011121314151617181920212223divid=tabsulliahref=#tabs-1Tabs1/a/liliahref=#tabs-2Tabs2/a/liliahref=#tabs-3Tabs3/a/li/uldivid=tabs-1pcontentoftabone/p/divdivid=tabs-2pcontentoftabtwo/p/div2425262728293031divid=tabs-3pcontentoftabthree/p/div/div这里定义3个列表项，名称分别为Tabs1、Tabs2、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每个标签里面要显示的正文。页面部分基本完工。运行程序图2值得注意的是，进行到这一步并没有出现图0中的效果，tabs样式没有应用上。原因只可能有一个，那就是样式表。后来谷歌一下果然是没有把相应的样式表包含到页面。这在官方的Demo里也没有提及，也没给出相应的注意，我觉得这里Demo不该省略点如果重要的一句代码的，不一定每个第一次使用jQueryUI人都能快速找到问题。对于每一个新手，在进行到这一步都需要去谷歌一下为什么效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQueryUI样式表的引用。图3最后完整的代码大概是这样的。?12345678910111213141516171819202122232425linkhref==text/cssrel=stylesheet/scriptsrc==text/javascript/scriptdivid=tabsulliahref=#tabs-1Tabs1/a/liliahref=#tabs-2Tabs2/a/liliahref=#tabs-3Tabs3/a/li/uldivid=tabs-1pcontentoftabone/p/divdivid=tabs-2pcontentoftabtwo/p/divdivid=tabs-3pcontentoftabthree/p/div2627282930313233由于是用的MVC模板生成的项目，所以在Content/themes/base文件夹里已经放入了jQueryUI的CSS样式表，如果没有，你需要单独下载然后放到项目中，并在页面正确引用。现在再来刷新一下页面，效果就出来了。图4既然是用样式表控制的，代表着我们可以随意对它进行自定义，换颜色等，这在后面的应用样式里介绍。2.2Accordion对于Accordion控件就有一些东西需要说的了。因为对于一个东西，如果它不够灵活，不易扩展，会给使用者带来很大的不便。图52.2.1使用基本的Accordion先来看一下如何将Accordion插件应用起来。我们将它放到我们的Tabs1页面里。同Tabs一样，应用起来也非常的简单，只需把相应的Div定义好，之后，在脚本总要所要做的工作也就是一句代码的事。是不是体验到了jQueryUI所带来的便捷了。将之前tabs-1Div中的P标签及内容删除掉，用如下的代码替换。?1234567891011121314divid=tabs-1divid=accordionh3ahref=#Section1/a/h3divpcontentofsection1/p1516171819202122232425262728293031323334353637/divh3ahref=#Section2/a/h3divpcontentofsection2/p/divh3ahref=#Section3/a/h3divpcontentofsection3/p/div/div/div其中id为accordion的外围Div是容器，在脚本代码里面选中它然后对它应用accordion方法。?12345678910scripttype=text/javascript$(document).ready(function(){$(#tabs).tabs();$(#accordion).accordion();})11/script之后，里面的每个a标签就会被解析成一个可以点击的标题，a标签后紧跟div用于放置本小块的内容。最后效果如下图。图6需要注意的地方有两点。一是样式，每个jQueryUI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个a标签然后跟一个div标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在a跟两个div：?123456789101112131415161718divid=accordionh3ahref=#Section1/a/h3divpcontentofsection1.1/p/divdivpcontentofsection1.2/p192021222324252627282930313233343536373839/divh3ahref=#Section2/a/h3divpcontentofsection2/p/divh3ahref=#Section3/a/h3divpcontentofsection3/p/div/div你原本以为这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：图7是不是有点坑爹。那如果我需要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每个Div加上边框。?1234567891011121314151617divid=accordionh3ahref=#Section1/a/h3divdivstyle=border:1pxsolidgraypcontentofsection1.1/p/div181920212223242526272829303132333435363738394041divstyle=border:1pxsolidgraypcontentofsection1.2/p/div/divh3ahref=#Section2/a/h3divpcontentofsection2/p/divh3ahref=#Section3/a/h3divpcontentofsection3/p/div图82.2.2实现打开多个标签jQueryUIAccordion最大的一个硬伤也是最让人蛋疼的特性就是同时只能打开一个标签，比如Section1被点开了，其他Secton必然处于闭合状态。如果我想实现同时有几个标签处于打开状态呢，并且我不希望打开的标签因为我点击了另外的标签而关闭掉。很遗憾，这个插件并不有提供相应的Option。更牛逼的是，在官方的Demo中明确说了，如果你非要让多个标签同时处于打开状态，那你就不要用我们的Accordion好了，爱用啥用啥，反正我们就是要让它只支持一个标签被打开。图9好吧，我还没强大到可以重写这个Accordion插件，于是我谷歌“expander””multiopenaccordion”之类的，确实还是有很多朋友是有这样的需求的，并且也有牛人给出了一些解决方法，但都有点复杂。最后的最后，我突然顿悟，把每个section都定义成accordion不就行了嘛。一个acction同时只能打开一个secton，如果我想要每个section都可任意打开关闭而不影响别的部分，那把每个section用accordion代替就好了，并且accordion里只定义一个section。说起来有点晕，下面修改之前的代码，定义id分别为accordion1,accordion2,accordion3三个div并放入相应内容:?123456789101112131415161718192021222324252627divid=tabs-1divid=a