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 相关文章推荐
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
vue实现todolist单页面应用
2017/04/11 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
浅谈python import引入不同路径下的模块
2017/07/11 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
Python运行DLL文件的方法
2020/01/17 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
eBay加拿大站:eBay.ca
2019/06/20 全球购物
安全标准化实施方案
2014/02/20 职场文书
《小池塘》教学反思
2014/02/28 职场文书
小班开学寄语
2014/04/04 职场文书
委托书的写法
2014/08/30 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
招商银行收入证明
2015/06/17 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL