jQuery封装的tab选项卡插件分享


Posted in Javascript onJune 16, 2015

在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用。

创建选项卡组件

使用方法: html结构

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="#tabs-2">tab-2</a></li>
        <li><a href="#tabs-3">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
      <div id="tabs-2">tabs-2-panel</div>
      <div id="tabs-3">tabs-3-panel</div>
 </div>

js调用

$('#tab').tabs();

相关参数说明:

初始化参数

参数 默认值 参数说明
active null 设置被选中的选项卡的索引,默认值为null,例如设置选中第一个选项卡则设置为0
event click 选项卡的切换事件,默认为点击事件,可以设置mouseover

添加选项卡参数

参数 默认值 参数说明
title 空 选项卡显示的文本,默认为空
href 空 选项卡链接,如果为静态数据则填入对应的字符串(#str),远程数据则为对应的url
content 空 选项卡为静态数据时的内容,动态数据则无需填写
iconCls true 选项卡关闭按钮,默认为显示true,不显示则为false

Demo:

例子1: 静态数据:

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="#tabs-2">tab-2</a></li>
        <li><a href="#tabs-3">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
      <div id="tabs-2">tabs-2-panel</div>
      <div id="tabs-3">tabs-3-panel</div>
 </div>

js调用:

$('#tabs').tabs();

例子2: 通过远程数据加载页面,则动态创建panel,

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="index.jsp">tab-2</a></li>
        <li><a href="index.html">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
 </div>

js调用:

$('#tabs').tabs();

例子3: 传入参数,设置选项卡切换事件为mouseover

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="index.jsp">tab-2</a></li>
        <li><a href="index.html">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
 </div>

js调用:

$('#tabs').tabs({event:'mouseover'});

例子4: 添加选项卡:

<input type="button" value="添加选项卡" onclick="addTab()">

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab-1</a></li>
        <li><a href="index.jsp">tab-2</a></li>
        <li><a href="index.html">tab-3</a></li>
      </ul>
      <div id="tabs-1">tabs-1-panel</div>
 </div>

js调用:

$('#tabs').tabs();
 var tabCount =4;
 function addTab(){
   tab.tabs('add',{
     title:'tab-'+tabCount+'',
     href:'#tab-'+tabCount+'',
     content:'Tab----'+tabCount+'',
     iconCls:true
   });
   tabCount++;
 }

总结:

通过不同的Id调用,就可以创建不同的tab结构,样式则通过id来自定义不同的样式即可。

小弟不才.欢迎各位大神指教....

Demo下载地址: MyUI-tabs

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
js 操作符实例代码
Oct 24 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
分类解析jQuery选择器
Nov 23 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 #Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 #Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 #Javascript
Bootstrap基础学习
Jun 16 #Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 #Javascript
常用DOM整理
Jun 16 #Javascript
AngularJS学习笔记之ng-options指令
Jun 16 #Javascript
You might like
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python操作 hbase 数据的方法
2016/12/18 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python做接口测试的必要性
2019/11/20 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
Python的两道面试题
2013/06/29 面试题
自主招生自荐信
2013/12/08 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
乳制品整治工作方案
2014/05/29 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
暑期辅导班宣传单
2015/07/14 职场文书