- 时间：2022-12-26 12:28 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：关于jQuery UI 使用心得及技巧
1 jQuery UI
2 为我所用
2.1 Tabs
2.2 Accordion
2.2.1 使用基本的Accordion
2.2.2 实现打开多个标签
2.2.3 Accordion的嵌套
3 给插件应用主题——Theme Roller
3.1 更改配色
3.2 更改图标
4 相关连接
jQuery UI
[img]http://files.jb51.net/file_images/article/201210/2012101001451910.jpg[/img]
有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。
而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来'就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。
[b]2 为我所用[/b]
下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。其他插件的详尽使用文档及演示在这里可以学习到，只不过是英文的。
2.1Tabs
Tabs 形式的插件在网页及桌面应用程序中都使用得相当广泛，可以用作菜单，也可做为一小部分内容的选项卡
[img]http://files.jb51.net/file_images/article/201210/2012101001451911.jpg[/img]
首先在VS2010新建一个MVC项目，要使用jQuery UI,首先要把jQuery及jQuery UI 脚本文件包含在项目当中，并且相关页面要用<script>标签进行引用。当我们创建好一个MVC项目后，在Scripts文件夹里，系统已经自动把jQuery及jQuery UI 脚本文件包含在项目当中了（如图1）。
[img]http://files.jb51.net/file_images/article/201210/2012101001451912.jpg[/img]
图 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文件的声明：
[url=#tabs-1]<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
这里定义3个列表项，名称分别为Tabs1、Tabs2、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每个标签里面要显示的正文。页面部分基本完工。运行程序：
[img]http://files.jb51.net/file_images/article/201210/2012101001451913.jpg[/img]
图 2
值得注意的是，进行到这一步并没有出现图0中的效果，tabs样式没有应用上。原因只可能有一个，那就是样式表。后来谷歌一下果然是没有把相应的样式表包含到页面。这在官方的Demo里也没有提及，也没给出相应的注意，我觉得这里Demo不该省略点如果重要的一句代码的，不一定每个第一次使用jQuery UI人都能快速找到问题。对于每一个新手，在进行到这一步都需要去谷歌一下为什么效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQuery UI 样式表的引用。
[img]http://files.jb51.net/file_images/article/201210/2012101001451914.jpg[/img]
图 3
最后完整的代码大概是这样的。
<link href="http://www.1sucai.cn/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/>
<script src="http://www.1sucai.cn/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs1</a></li>
<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
})
</script>
由于是用的MVC模板生成的项目，所以在Content/themes/base文件夹里已经放入了jQuery UI的CSS样式表，如果没有，你需要单独下载然后放到项目中，并在页面正确引用。
现在再来刷新一下页面，效果就出来了。
[img]http://files.jb51.net/file_images/article/201210/2012101001451915.jpg[/img]
图 4
既然是用样式表控制的，代表着我们可以随意对它进行自定义，换颜色等，这在后面的应用样式 里介绍。
[url=#]<div>
<p>content of section 1</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
</div>
其中id为accordion的外围Div是容器，在脚本代码里面选中它然后对它应用accordion方法。
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion").accordion();
})
</script>
之后，里面的每个<a>标签就会被解析成一个可以点击的标题，<a>标签后紧跟<div>用于放置本小块的内容。最后效果如下图。
[img]http://files.jb51.net/file_images/article/201210/2012101001451917.jpg[/img]
图 6
需要注意的地方有两点。一是样式，每个jQuery UI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个<a>标签然后跟一个<div>标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在<a>跟两个<div>：
[url=#]<div>
<p>content of section 1.1</p>
</div>
<div>
<p>content of section 1.2</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
你原本以为 这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：
[img]http://files.jb51.net/file_images/article/201210/2012101001451918.jpg[/img]
图 7
是不是有点坑爹。那如果我需要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每个Div加上边框。
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<div style="border: 1px solid gray">
<p>content of section 1.1</p>
</div>
<div style="border: 1px solid gray">
<p>content of section 1.2</p>
</div>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
[img]http://files.jb51.net/file_images/article/201210/2012101001451919.jpg[/img]
图 8
[url=#]<div>content of section 1</div>
</div>
<div id="accordion2">
<h3><a href="#">Section 2</a></h3>
<div>content of section 2</div>
</div>
<div id="accordion3">
<h3><a href="#">Section 3</a></h3>
<div>content of section 3</div>
</div>
</div>
然后修改脚本代码：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
$("#accordion3").accordion();
})
</script>
运行程序，发现三个secton同时打开了，并且还不能关闭！这显然也不是我们想要的结果。原因很简单，如果上面所说的accordion这个插件有且仅有一个section是被打开的，每个accordion里我们只定义了一个section，那这个section毫无疑问应该处于被打开状态，由于只有它一个，把它关闭了之后没有其他section可以打开，所以索性我们想关它都关不掉了。
但幸运的是，我们可以通过设置accordion的collapsible为true来让这个唯一的section可以进行折叠打开操作。只需修改脚本如下：
[url=#]<div>
<div id="subaccortion">
<h3><a href="#">subaccortion</a></h3>
<div>content of subaccortion</div>
</div>
</div>
</div>
<div id="accordion2">
........
[img]http://files.jb51.net/file_images/article/201210/2012101001451922.jpg[/img]
图 11
有点不完美的地方就是Section1出现了滚动条，下面我们设置一下高度属性并且让里面那个子accortion一开始处于折叠状态。
修改脚本代码如下：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true, autoHeight: false });
$("#subaccortion").accordion({ collapsible: true, active:false });
$("#accordion2").accordion({ collapsible: true, autoHeight: false });
$("#accordion3").accordion({ collapsible: true, autoHeight: false });
})
</script>
[img]http://files.jb51.net/file_images/article/201210/2012101001451923.jpg[/img]
图 12
从这里你已经可以看到，可以设置任意一个标签一开始是处于折叠还是打开状态。当然也可以将一个accortion disable掉，那样点击标题就不会有折叠打开动作了。
[url=http://jqueryui.com/themeroller/]主题网[/url]站去下载自己需要的主题，并且还可以在线编辑出自己想要的主题。
进入theme roller后，选择自己喜欢的主题样式下载下来。
[img]http://files.jb51.net/file_images/article/201210/2012101001451924.jpg[/img]
图 13
解压后进行到css文件夹，将jquery-ui-1.8.24.custom.css文件和images文件夹复制到项目中适当位置，然后需要在页面正确地引用到，便可将样式应用上。不管你应用什么主题，主题所使用的图片名字都是一样的，只是颜色不一样而以。由于本例是用MVC模板生成的项目，所以项目中的imges文件夹中已经存在的图片和下载下来的图片可能部分重名，复制时询问是否替换，点击确实即可。
[img]http://files.jb51.net/file_images/article/201210/2012101001451925.jpg[/img]
图 14
[img]http://files.jb51.net/file_images/article/201210/2012101001451926.jpg[/img]
图 15
这时把之前写的样式表引用改成对这个customer样式表的引用
[url=http://www.1sucai.cn/Content/themes/base/jquery-ui-1.8.24.custom.css]
然后去刷新页面，效果如下图：
[img]http://files.jb51.net/file_images/article/201210/2012101001451927.jpg[/img]
图 16
需要注意的是jquery-ui-1.8.24.custom.css与images文件夹的相对位置最好不要改变，也就是把它们两个放一起，因为css文件中会调用images文件夹中的图片，如果你改变了他们的相对位置，就需要到css中把所有对图片的调用路径通通改正确后才能使主题正常工作。
[/url] 3.2更改图标
不仅仅是颜色，jQuery UI的主题里面，也为我们预设了很多图标可供选择，在网页上我们可以看到有一大堆丰富的图标。这些图标的颜色对应你所下载的主题，包含在了imges文件夹中。
[img]http://files.jb51.net/file_images/article/201210/2012101001451928.jpg[/img]
图 17
问题是在这么多图标中如何准确指定我们想要的那一个。比如现在想把Accordion标题左边的三角形图标改成线条形的尖角形状。
下面只是个人提供的一个小技巧。将鼠标指到你想要的图标身上，会出现tooltip提示文本，这个文字就对应这个图标。
[img]http://files.jb51.net/file_images/article/201210/2012101001451929.jpg[/img]
图 18
现在我们得到这个名字后，就可以到脚本代码里去进行修改了。
[url=http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar]http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar[/url]
相关连接
jQuery UI 官网
[url=http://jqueryui.com/]http://jqueryui.com/[/url]
theme roller
[url=http://jqueryui.com/themeroller/]http://jqueryui.com/themeroller/[/url]
jQuery 学习：张子秋《从零开始学习jQuery》系列：
[url=http://www.1sucai.cn/article/24908.htm]http://www.1sucai.cn/article/24908.htm[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
