jQuery Tools——不可错过的jQuery UI库(二)2
来源:百度文库 编辑:神马文学网 时间:2024/04/29 11:25:08
jQuery Tools——不可错过的jQuery UI库(二)
在上篇对jQuery Tools做了总体的介绍,从本篇起开始介绍jQuery Tools的各个工具组件。
在进入正题前,还是想啰嗦一些东西,也许对jQuery Tools的理解会有所帮助。
- jQueryTools的功能侧重于信息展示和视觉效果,从网页常用的功能点上改善用户体验和可阅读性。这一点与其它一些JavascriptUI库不同,它们可能会侧重于一些桌面应用程序效果,诸如拖拽、滑动、排序等,这在富应用程序(RIA)中的应用可能会更多些。而jQueryTools可用于广泛的网站设计中;
- jQueryTools并不是一个框架性的东西,不具有什么学习难度,在掌握一些使用规则后,在页面中引用了它的脚本文件就可以立即使用了。虽然它是基于jQuery的,但是并不意味着你需要掌握jQuery才能使用它。当然如果你能了解jQuery的诸如选择器的简单使用,更有助于掌握jQuery Tools;
- jQuery Tools的使用严格遵循了javascript代码不与css定义混合的原则。它在使用时仅仅是通过预定义的class来控制html,CSS样式定义完全由你来控制。
- 类似于google提供了jquery的CDN服务,jQuery Tools也提供了它的CDN免费服务至2010年底,你可以使用以下方式引用它:
不再啰嗦,言归正传看使用:
示例一:选项卡效果在Web开发时经常会用到,下面先来看最简单的实现
上面是最终要实现的效果。看一下代码:
HTML:
Javascript:
$(function() {// 将ul.tabs区域设定为选项卡,用来控制div.panes区域中最近一层的各div区域// 注意tabs和panes与html中class的对应关系$("ul.tabs").tabs("div.panes > div",{history: true});});
说明:
- CSS代码,也就是整个样式完全是由你来控制的。这里是上面选项卡用到的css,供你参考。使用css控制样式时,需注意的一点是当前选项卡的class为“current”。
- 可设定选项卡锚点,通过链接在选项卡中切换
- tabs中的参数{history: true},使得选项卡与浏览器历史的前进后退关联在一起。不用的话可以不要这个参数。
示例二:通过鼠标滑过事件切换选项卡,看效果先:
.. 产品介绍一 ..
.. 产品介绍三 ..
HTML:
.. 产品介绍一 .... 产品介绍二 .... 产品介绍三 ..
Javascript:
$("#products").tabs("div.description", {event:'mouseover'});
说明:
- CSS代码,也就是整个样式完全是由你来控制的。这里是上面选项卡用到的css,供你参考。
- tabs中的参数{event:’mouseover’},更改默认的点击事件为鼠标划过事件,这里你可以改为自定义事件。
示例三:创建折叠效果(手风琴效果),看效果先:
HTML
First pane
... pane content1 ...Second pane
... pane content2 ...Third pane
... pane content3 ...
Javascript
//上面第一个效果的$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', //确定哪些区域为选项卡effect: 'slide' //展开效果,slide为纵向滑动}); //上面第二个效果的$("#accordion").tabs("#accordion div", {tabs: 'img', //确定哪些区域为选项卡effect: 'horizontal' //展开效果,horizontal为横向滑动});
说明:
- 这里是上面第一个效果用到的css,这里是第二个的,供你参考。
- 与前两个示例的声明方式不同,上面两个效果在tabs方法的第二个参数的tabs属性中确定哪些区域为选项卡。
Tabs选项卡总结:
- 从上面几个示例的用法可以看到,调用Tabs效果的关键在于HTML的预定义。我们应当为选项卡区域设定一个id或者为每一个选项卡设定相同class,然后为每一个pane区域设定class。在调用tabs方法的时候,关键在于传入上面定义的这两个对象集合。了解到这一点,其余都就可以自由发挥了。
- Tabs工具本身不具备任何CSS,CSS需要完全由你来控制,希望不会因为这种自由而难住你。
- 在官方示例中还有不少是上面没有提到的,例如tabs中通过ajax填充pane、通过选项卡制作导航器等,这里去查看更多
通过Tabs的学习,想必大家对jquery tools有了进一步的了解。有什么要说的么,可以再下面留言讨论。
在后面的文章中会继续探讨其它工具的使用示例,欲知后事如何,请坐好沙发,搬好小马扎,且听下回分解。
jQuery Tools——不可错过的jQuery UI库(二)2
jquery
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类...
jQuery选择器的基本常识
jQuery Essentials - Round 2
jquery radio value 。 jquery中选择radio的值
Jquery的跨域调用
jquery+json 实例 (当jquery遇上了json )222
jquery+json 实例 (当jquery遇上了json )fff
jQuery选择器
Jquery实例
Jquery基础
春风得意的 jQuery - 基于 COMSHARP CMS
Jquery写的双色表格示例
Jquery写的双色表格示例
web开发一定要用到的jQuery插件
Jquery 的post和get请求
Jquery的get方式实现AJAX
学习jQuery的一篇很好的文章:jQuery对象与dom对象 - 笔记 - 张庆 - C...
使用jQuery简化Ajax开发——Ajax开发入门[1]
使用jQuery简化Ajax开发——Ajax开发入门[1]
jQuery技巧总结
10 jQuery Essentials
jQuery Page Peel Plugin