1供我使用的jQuery UI 2 2.1选项卡2.2手风琴2.2.1使用基本的手风琴2.2.2实现打开多个标签2.2.3手风琴嵌套3将主题应用到插件——主题滚轮3.1更改颜色匹配3.2更改图标4相关连接jQuery UI 。

有时你必须重新学习javascrip并编写大量的代码，以达到渐进的动画效果。直到jQuery的出现，开发人员才从大量繁琐的js代码中解放出来，取而代之的是几行jQuery代码。如今，jQuery无疑已经成为最流行的JavaScript类库之一。jQuery UI是在jQuery的基础上开发的一套界面工具，几乎囊括了你能想到并在网页上使用的插件和动画特效，让一个没有艺术感却只懂码字的程序员，不费吹灰之力就能做出炫目的界面。让你随时使用界面。还有一点就是它是免费开源的，用户可以根据自己的需求进行定制甚至重新设计。帮我用一下。让我们以tab和Accordion插件为例，看看如何在项目中使用jQuery UI。其他插件的详细文档和演示可以在这里学习，但只能用英语。2.1标签标签插件广泛应用于网页和桌面应用，可作为菜单或标签用于一小部分内容。

首先，要在VS2010中创建新的MVC项目，要使用jQuery UI，首先在项目中包含jQuery和jQuery UI脚本文件，相关页面要用脚本标签引用。在我们创建了一个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就会自动调用里面的提示信息。现在需要做的是将其包含在页面中。创建项目后，系统已经将jQuery引用到站点中的页面。Mater page，这意味着默认情况下所有使用母版页的页面都引用jQuery。因此，我们只需要在索引页面上添加一条语句，说明它是jQuery UI文件：复制代码如下： script src=' http :http://www.cnblogs.com/scripts/jquery-ui-1.8.11.min.js'类型=' text/JavaScript'/为了在页面上呈现tab插件，我们需要定义一个Div，在脚本代码中选择它，并对其应用tab方法。复制代码如下： div ID=' tab '/div脚本类型=' text/JavaScript' $(文档)。ready(function(){ $(' # tab ')。制表符()；})/现在运行程序的脚本不会看到任何东西，因为我们还没有定义要在主Div中显示的选项卡，只是定义了一个可以放置选项卡的地方。现在，在选项卡Div中定义了一个无序列表，列表项决定了要显示的标签数量和要显示的标签名称。复制的代码如下： div ID=' tab ' ullia href=' # tab-1 ' tab S1/a/lilia href=' # tab-2 ' tab S2/a/lilia href=' # tab-3 ' tab 3/a/Li/Ul div ID=' tab-1 ' p tab one的内容/p/div ID=' tab-2 ' p tab two/p/div ID=' tab-3 ' p tab two/p/div/div的内容名称是Tabs1、Tabs2和Tabs3，列表底部的三个div对应于上面定义的三个标签，用于呈现要在每个标签中显示的文本。部分页面基本完成。运行程序：

图2值得注意的是，图0所示的效果在这一步没有出现，标签样式也没有应用。原因只有一个，那就是样式表。后来，谷歌没有在页面中包含相应的样式表。官方Demo中没有提到这一点，也没有给出相应的关注。我认为这里的Demo不应该省略一些重要的代码，但并不是每个第一次使用jQuery UI的人都能很快发现问题。对于每一个新手来说，到了这一步，你需要去谷歌一下，看看为什么效果没有出来。找到问题后很容易解决。向页面添加对jQuery用户界面样式表的引用。

图3最终完整的代码如下所示。复制了以下代码： link href='//www . JB 51 . net/content/themes/base/jquery . ui . all . CSS ' type=' text/CSS ' rel='样式表'/脚本src=' http://www.jb51.net/scripts/jquery-ui-1 . 8 . 11 . min . js ' type=' text/JavaScript '/脚本div id=' tab ' ul lia href=' # tab s-1 ' tabs 1/a/Li lia href=' # tab s-2 ' tabs 2ready(function(){ $(' # tab ')。制表符()；})/脚本由于项目是由MVC模板生成的，jQuery UI的CSS样式表已经放在Content/themes/base文件夹中了。如果没有，需要单独下载放到项目中，在页面上正确引用。现在再次刷新页面，效果就出来了。

由于图4是由样式表控制的，这意味着我们可以自定义它并随意更改颜色，这将在下面的应用程序样式中介绍。2.2Accordion对手风琴控制有话要说。对于一个东西来说，如果不够灵活，难以扩展，就会给用户带来很大的不便。

图52.2.1使用基本手风琴让我们首先看看如何应用手风琴插件。我们把它放在我们的表1页面上。和tab一样，应用起来非常简单，只需要定义对应的Div，然后，脚本中要做的工作就只是一段代码。体验过jQuery UI带来的便利吗？删除之前tab-1 Div中的p标签和内容，用下面的代码替换。复制的代码如下： div id=' tab-1 ' Div id=' accordion ' h3a href=' # ' section 1/a/h3div第1节的内容/p/Div h3a href=' # ' section 2/a/H3 Div第2节的内容/p/Div H3 a href=' # ' section 3/a/H3 Div第3节的内容/p/div/div其中id为accordion的外围设备Div是一个容器，在脚本代码中选择它并应用复制代码如下：脚本类型=' text/JavaScript' $(文档)。ready(function(){ $(' # tab ')。制表符()；$(' #手风琴')。手风琴()；}) /script，里面的每个A标签都会被解析成一个可点击的标题，A标签后面会跟着div来放置这一小块的内容。最终效果如下所示。

图6中有两点需要注意。第一，风格。每个jQuery UI实际上都使用上面提到的样式表。如果之前没有引用到页面中，这里的手风琴效果就不会出来。其次，这里的格式应该是严格的a标记后跟div标记的形式。如果这个交叉形态被打乱，结果将是你不想拉的东西。例如，您遵循A中的两个div:复制代码如下： div ID=' accordion ' H3 A href=' # ' section 1/A/1.1节的H3 div内容/p/div第1.2节的内容/p/H3 A href=' # ' section 2/A/2节的H3 div内容/p/div H3 A href=' # ' section 3/A/3/p/div/div的H3 div内容您最初认为这两个div

图7有点欺骗性。如果我需要分段布局，我必须放两个或更多的草皮。有必要把这些内容放在div中，然后放在section1中，这样就不会出错。为了显示两个div是真的放的，在每个Div周围放一个边框。复制的代码如下： div id=' accordion ' H3 a href=' # ' Section 1/a/H3 div样式=' border : 1px纯灰色' p Section 1.1/p/div样式的内容=' border 3360 1px纯灰色' p Section 1.2/p/div/H3 a href=' # ' Section 2/a/H3 div p Section 2/p/p/div H3 a href=' # ' Section 3/a/a

图82 . 2 . 2 jQuery UI Accordion最大的缺陷和最痛苦的特点就是一次只能打开一个选项卡。例如，单击第1部分，其他部分必须关闭。如果我想同时打开几个选项卡，但又不想因为单击另一个选项卡而关闭打开的选项卡，该怎么办？不幸的是，这个插件没有提供相应的选项。更有甚者，官方Demo中明确表示，如果你要同时打开多个标签，那就不要用我们的Accordion，随便用。无论如何，我们只是希望它只支持一个标签被打开。

图9嗯，我没有强大到可以重写这个accordo插件，所以我谷歌了“扩展器”“多开手风琴”等等，还有很多朋友有这样的需求，也有人给出了一些解决方案，但是都有点复杂。终于，我恍然大悟，每一段都应该定义为手风琴。同时，一次事故只能打开一个部门。如果我希望每个部分都可以随意打开和关闭，而不影响其他部分，那么用手风琴代替每个部分就好了，手风琴中只定义了一个部分。说起来有点晕，但是前面的代码在下面做了修改，将id分别定义为accordion1、accordion2。根据3，将三个div放入相应的内容中。复制代码如下： div id=' tab-1 ' div id=' accord 3 ' h3a href=' # ' Section 1/a/h3div内容Section 1/div/div id=' accord 2 ' h3a href=' # ' Section 2/a/H3 div内容Section 2/div/div id=' accord 3 ' h3a href=' # ' Section 3/a/H3 div内容section3/div/div然后修改脚本代码：ready(function(){ $(' # tab ')。制表符()；$(' # accord 1 ')。手风琴()；$(' # accord 2 ')。手风琴()；$(' # accord 3 ')。手风琴()；}) /script，发现三个secton同时打开，还不能关闭！这显然不是我们想要的结果。原因很简单。如果上面提到的手风琴插件只有一个打开的部分，我们在每个手风琴中只定义了一个部分，那么这个部分无疑应该是打开的。因为只有一个版块，关闭之后就没有其他版块可以打开了，所以想关闭的话我们根本就关闭不了。幸运的是，我们可以将手风琴的可折叠设置为真，这样这个独特的部分就可以折叠和打开。只需修改脚本如下：复制代码如下： script type=' text/JavaScript ' $(文档)。ready(function(){ $(' # tab ')。制表符()；$(' # accord 1 ')。手风琴({ collapsable : true })；$(' # accord 2 ')。手风琴({ collapsable : true })；$(' # accord 3 ')。手风琴({ collapsable : true })；})/脚本再次运行程序，好的，一切如我们所想。

图102.2.3手风琴的嵌套另一个问题是手风琴的嵌套。一开始，我在尝试实现这个功能的时候也遇到了一些麻烦。现在，例如，我们想在第一部分放另一个手风琴。让我们把它命名为亚cordion。我们要注意的是，这个子录制必须放在“第1节内容”的Div中，其他任何放置都不会有正确的效果。如果你认为直接给accordo 1添加一个A标签和一个div就能正确解析第1节中嵌入accordo 1的accordo，那你就错了。最终代码和效果如下。复制的代码如下： div id=' tab-1 ' div id=' accord 1 ' h3a href=' # ' section 1/a/H3 div id=' subordination ' h3a href=' # ' subordination/a/H3 div content of subcortion/div/div/div id=' accord 2 '.

图11有点不完美，滚动条出现在第1部分。我们先设置高度属性，让里面的子比例先折叠。修改脚本代码如下：复制代码如下：脚本类型=' text/JavaScript' $(文档)。ready(function(){ $(' # tab ')。制表符()；$(' # accord 1 ')。手风琴({ collapsible: true，autoheight : false })；$(' # subcortion ')。手风琴({ collapsible: true，active : false })；$(' # accord 2 ')。手风琴({ collapsible: true，autoheight : false })；$(' # accord 3 ')。手风琴({ collapsible: true，autoheight : false })；})/脚本

图12从这里可以看到，您可以设置任何标签在开始时是折叠还是打开。当然，你也可以禁用accord on，这样当你点击标题时就不会有折叠和打开的动作了。3将主题——主题滚轮3.1应用于插件以更改颜色匹配。现在，我们可以轻松地使用jQuery UI来制作一个界面。但试想一下，如果这么多人都在用，会不会让整个互联网统一起来？当用户打开他们的浏览器时，他们会到处看到同样的东西，他们会有点困惑。而且我们在使用这些插件的时候也需要做一些调整，以符合我们自己网站的主题和颜色。JQuery UI支持用户定义的样式，如果有能力，甚至可以更改实现代码进行更高级的定制。可以通过修改对应的css文件来达到修改风格的目的，但最好是从官网的主题网站下载自己需要的主题，在线编辑自己想要的主题。进入主题滚轮后，选择自己喜欢的主题风格并下载。

图13:解压缩后，转到css文件夹，将jquery-ui-1.8.24.custom.css文件和images文件夹复制到项目中的适当位置，然后在页面上正确引用后应用样式。无论你应用什么主题，主题中使用的图片名称都是相同的，但是颜色不同。由于此示例是由MVC模板生成的项目，因此项目中imges文件夹中的现有图片和下载的图片可能有一些重名。复制时，询问是否替换它们，然后单击确定。

图14

在图15中，此时将之前编写的样式表引用改为对此客户样式表的引用，复制代码如下： link href='//www . JB 51 . net/content/themes/base/jquery-ui-1 . 8 . 24 . custom . CSS ' type=' text/CSS ' rel='样式表'/然后刷新页面。

图16需要注意的是，jquery-ui-1.8.24.custom.css和images文件夹的相对位置不应该改变，也就是放在一起，因为css文件会调用images文件夹中的图像。如果你改变它们的相对位置，你需要纠正css中图像的所有调用路径，主题才能正常工作。3.2改变图标不仅仅是颜色，jQuery UI的主题中也预设了很多图标供我们选择。我们可以在网页上看到很多丰富的图标。这些图标的颜色对应于您下载的主题，并包含在imges文件夹中。

图17问题是如何在这么多图标中准确地指定我们想要哪一个。现在，例如，我想将手风琴标题左侧的三角形图标更改为带有线条形状的尖角形状。以下只是个人提示。当您将鼠标指向所需的图标时，会出现与图标相对应的工具提示文本。

图18现在我们有了这个名字，我们可以在脚本代码中修改它。复制代码如下：脚本类型=' text/JavaScript' $(文档)。ready(function(){ $(' # tab ')。制表符()；$(' # accord 1 ')。手风琴({ collapsible: true，autoHeight: false，icon : { ' header ' : ' ui-icon-克拉-1-n '，' header selected ' : ' ui-icon-克拉-1-s ' } })；$(' # subcortion ')。手风琴({ collapsible: true，active:false，icon : { ' header ' : ' ui-icon-克拉-1-n '，' header selected ' : ' ui-icon-克拉-1-s ' })；$(' # accord 2 ')。手风琴({ collapsible: true，autoHeight: false，icon : { ' header ' : ' ui-icon-克拉-1-n '，' header selected ' : ' ui-icon-克拉-1-s ' } })；$(' # accord 3 ')。手风琴({ collapsible: true，autoHeight: false，icon : { ' header ' : ' ui-icon-克拉-1-n '，' header selected ' : ' ui-icon-克拉-1-s ' } })；})/剧本最后看效果，完美。。

图19在这里基本介绍了jQuery UI的使用过程。当然，jQuery UI不仅包含选项卡和手风琴插件，其他插件及其效果的使用也是类似的。详细的用法和设置方法可以在官方文档和演示中找到。后记：因为jQuery已经变成了一场彻头彻尾的灾难，如果结合jQuery UI，程序员的负担会更大程度的减轻。在享受这些便利的同时，我们不得不默默真诚地感谢那些为jQuery和UI做出贡献的同事们。同时，我们可以尽自己的一份力量来丰富和扩展jQuery的插件和UI库。示例下载：相关连接jQuery UI官网ThemeRoller jQuery学习：张《从零开始学习jQuery》系列：//www . jb51 . net/article/24908 . htm