热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jquerytools之tabs选项卡/页签

  jquery用这么久了,觉得虽然没ExtJS等框架全面,功能强大,但是也确实做到了“thewriteless,domore”,而且学起来也方便,只需要仔细研读一下它官方网站的APIReference,操作起来基本问题不是太大。虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquerytools--一种基于jquery的UI表现框架,其

 

 

jquery用这么久了,觉得虽然没ExtJS等框架全面,功能强大,但是也确实做到了“the write less,do more”,而且学起来也方便,只需要仔细研读一下它官方网站的API Reference,操作起来基本问题不是太大。

虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex。该框架提供了tabs(选项卡/页 签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播 放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减 少了js文件下载对页面加载速度的影响。虽然功能不是很全面,但是可称得上少而精--都是目前比较常用的功能,而且能很好的弥补jquery ui的一些不足,从一定程度上加强了Jquery的UI功能。其实最让我觉得欣赏的是那些类flex的风格,能在有效控制开发成本的情况下大大增强用户感 受。
今天仔细看了jquery tools 的tabs,下面结合其官方doucmentation做一下总结。
首先给出操作的目标html代码:
代码如下:
下面就2中的config对象参数实现及描述做一下说明:
代码如下:
属性名称 默认值 描述 current
'current'
为当前tab的增加的class名称 effect
default'
fade':每个tab的panel内容显示方式为从整体逐渐显示;面,并覆盖掉当前panel

'slide':点击tab的panel出现在当前tab的panel下

horizontal':当前tab的panel逐渐从右向左收缩并最终消失,点击panel的内容占据相应位置,比较适合水平导航 fadeInSpeed
200
设置panel显示的速度,设置该属性在effect置为fade时有效,默认值为200毫秒 event
'click'
指定触发tab切换的事件,默认是单击鼠标,可选择的触发事件有“mouseover”,"dbclick" history FALSE 类似javascript的history功能当用户点击浏览器的前进后后退按钮后,如果此处设置为true,那么就会回退到上次点击的tab,而不是跳转到其他页面去 initialIndex
0
设置默认显示的tab tabs
a'
设置tab对应的标签元素,默认为"a",这里也可以设为"li",该处相当于jquery的选择器 api
FALSE
设置当前tab所在容器的返回类型类型。如果为false(默认值),以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。 onBeforeClick
null
在tab被点击之前调用的函数,如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象,对于该对象的操作,参见tab相关方法;改返回函数有一个参数,为当前tab的索引 onClick
null
在tab被点击的时候调用的函数,其他用法同onBeforeClick
此外,tabs也提供了获取tabs的一系列方法,具体实现及说明如下:
代码如下:
//api.next();//跳转到下一个tab
//api.click();
//alert(api.getConf().tabs);//返回api的配置对象,这里获取配置对象的tabs属性的值
api.getCurrentPane();//获取当前的panel
api.getCurrentTab();//获取当前tab
api.getIndex();//获取当前tab的index
//alert(api.getPanes());//获取所有的panel
//alert(api.getTabs());//获取所有的tab
api.prev();//跳转到上一个tab
api.OnBeforeClick=function(){
return true;
}//同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
api.OnClick=function(){
return true;
}//同配置对象的Click,一个对象可以绑定多个Beforeclick事件

更直观的说明如下:

方法 返回值 描述
getConf()
API
返回api的配置对象
getCurrentPane()
jQuery
获取当前的panel
getCurrentTab()
jQuery
获取当前tab
getIndex()
integer
获取当前tab的index
getTabs()
jQuery
获取所有的tab
getPanes()
jQuery
获取所有的panel
next()
API
跳转到下一个tab
prev()
API
跳转到上一个tab
onBeforeClick()
API
同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
onClick()
API
//同配置对象的Click,一个对象可以绑定多个Beforeclick事件

最后,取其官方网站的几张截图作为本文的结尾。

1.普通的tabs

jquery tools之tabs 选项卡/页签

2.水平拓展的tabs

jquery tools之tabs 选项卡/页签

3. 类提示框

jquery tools之tabs 选项卡/页签

4.向导

jquery tools之tabs 选项卡/页签


推荐阅读
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 成功安装Sabayon Linux在thinkpad X60上的经验分享
    本文分享了作者在国庆期间在thinkpad X60上成功安装Sabayon Linux的经验。通过修改CHOST和执行emerge命令,作者顺利完成了安装过程。Sabayon Linux是一个基于Gentoo Linux的发行版,可以将电脑快速转变为一个功能强大的系统。除了作为一个live DVD使用外,Sabayon Linux还可以被安装在硬盘上,方便用户使用。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
  • Tkinter Frame容器grid布局并使用Scrollbar滚动原理
    本文介绍了如何使用Tkinter实现Frame容器的grid布局,并通过Scrollbar实现滚动效果。通过将Canvas作为父容器,使用滚动Canvas来滚动Frame,实现了在Frame中添加多个按钮,并通过Scrollbar进行滚动。同时,还介绍了更新Frame大小和绑定滚动按钮的方法,以及配置Scrollbar的相关参数。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 本文介绍了brain的意思、读音、翻译、用法、发音、词组、同反义词等内容,以及脑新东方在线英语词典的相关信息。还包括了brain的词汇搭配、形容词和名词的用法,以及与brain相关的短语和词组。此外,还介绍了与brain相关的医学术语和智囊团等相关内容。 ... [详细]
author-avatar
X你好先生
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有