关于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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
Vue实现页面添加水印功能
Nov 09 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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python绘制多个子图的实例
2019/07/07 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
行政工作个人的自我评价
2014/02/13 职场文书
一句话工作感言
2014/03/01 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
初中美术教学反思
2016/02/17 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js