关于jQuery UI 使用心得及技巧


Posted in Javascript onOctober 10, 2012

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

关于jQuery UI 使用心得及技巧

有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代码。现今,jQuery无疑已成为最为流行没有之一的JavaScript类库。

而jQuery UI 则是在jQuery 基础上开发的一套界面工具,几乎包括了网页上你所能想到和用到的插件以及动画特效,让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来'就用,还有一点就是,它是免费开源的,用户可根据需要自定义甚至重新设计。

2 为我所用

下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。其他插件的详尽使用文档及演示在这里可以学习到,只不过是英文的。

2.1Tabs

Tabs 形式的插件在网页及桌面应用程序中都使用得相当广泛,可以用作菜单,也可做为一小部分内容的选项卡

关于jQuery UI 使用心得及技巧

首先在VS2010新建一个MVC项目,要使用jQuery UI,首先要把jQuery及jQuery UI 脚本文件包含在项目当中,并且相关页面要用<script>标签进行引用。当我们创建好一个MVC项目后,在Scripts文件夹里,系统已经自动把jQuery及jQuery UI 脚本文件包含在项目当中了(如图1)。

关于jQuery UI 使用心得及技巧

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

<script src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript" ></script>

为了在页面上呈现Tabs插件,我们需要定义一个Div,并且在<script>脚本代码里面选中它,在它身上应用tabs方法。

<div id="tabs"> 
</div> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#tabs").tabs(); 
}) 
</script>

现在运行程序不会看到任何东西,因为我们还没有往主体Div中定义要显示的tab,只是定义好了一个可以放tabs的地方。现在tabs Div中定义一个无序列表,列表项决定了要显示的标签个数及要显示的标签名称。
<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>

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

关于jQuery UI 使用心得及技巧

图 2

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

 

关于jQuery UI 使用心得及技巧

图 3

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

<link href="https://3water.com/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/> 
<script src="https://3water.com/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样式表,如果没有,你需要单独下载然后放到项目中,并在页面正确引用。

现在再来刷新一下页面,效果就出来了。

 

关于jQuery UI 使用心得及技巧

图 4

既然是用样式表控制的,代表着我们可以随意对它进行自定义,换颜色等,这在后面的应用样式 里介绍。

3.2更改图标

不仅仅是颜色,jQuery UI的主题里面,也为我们预设了很多图标可供选择,在网页上我们可以看到有一大堆丰富的图标。这些图标的颜色对应你所下载的主题,包含在了imges文件夹中。

 

关于jQuery UI 使用心得及技巧

图 17

 

问题是在这么多图标中如何准确指定我们想要的那一个。比如现在想把Accordion标题左边的三角形图标改成线条形的尖角形状。

下面只是个人提供的一个小技巧。将鼠标指到你想要的图标身上,会出现tooltip提示文本,这个文字就对应这个图标。

 

关于jQuery UI 使用心得及技巧

图 18

现在我们得到这个名字后,就可以到脚本代码里去进行修改了。

<script type="text/javascript"> 
$(document).ready(function () { 
$("#tabs").tabs(); 
$("#accordion1").accordion({ collapsible: true, autoHeight: false, 
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 
}); 
$("#subaccortion").accordion({ collapsible: true, active:false , 
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 
}); 
$("#accordion2").accordion({ collapsible: true, autoHeight: false , 
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 
}); 
$("#accordion3").accordion({ collapsible: true, autoHeight: false, 
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" } 
}); 
}) 
</script>

最后来看下效果,perfect.

关于jQuery UI 使用心得及技巧

图19

到这里基本介绍了jQuery UI的使用过程。当然,jQuery UI不只包含tabs和accordion 这两个插件,其他的插件及效果的使用也相差不多,详尽的使用及设置方法都可以在官方的文档及Demo中找到答案。

后记:因为jQuery已经火得一塌糊涂了,如果再结合jQuery UI,将更大程度上减轻程序员的负担。在享受这些便利的同时,我们不得不默默地内心要感谢一下那些为jQuery及UI做出奉献的同行们,同时我们也能尽我们自己的一分力量,来丰富扩展jQuery的插件及UI库。

例子源码下载:http://xiazai.3water.com/201210/yuanma/jQueryUIExample_3water.rar

相关连接
jQuery UI 官网
http://jqueryui.com/
theme roller
http://jqueryui.com/themeroller/
jQuery 学习:张子秋《从零开始学习jQuery》系列:
https://3water.com/article/24908.htm

Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 #Javascript
jQuery提交表单ajax查询实例代码
Oct 07 #Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 #Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 #Javascript
Javascript操作cookie的函数代码
Oct 03 #Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 #Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 #Javascript
You might like
短波问题解答
2021/02/28 无线电
火车头采集器3.0采集图文教程
2007/03/17 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
Stop SQL Server
2007/06/21 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Apache如何部署django项目
2017/05/21 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python基础之文件读取的讲解
2019/02/16 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
清明节网上祭英烈活动总结
2014/04/30 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
思想作风建设心得体会
2014/10/22 职场文书
师德师风培训感言
2015/08/03 职场文书
会议主持词通用版
2019/04/02 职场文书