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 单例/单体模式(Singleton)
Apr 07 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
JavaScript的继承实现小结
May 07 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
react基本安装与测试示例
Apr 27 Javascript
vue操作dom元素的3种方法示例
Sep 20 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 GUID生成函数和类
2014/03/10 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
Js sort排序使用方法
2011/10/17 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
纯JS代码实现气泡效果
2016/05/04 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
webpack之devtool详解
2018/02/10 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python如何调用外部系统命令
2019/08/07 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python进行特征提取的示例代码
2020/10/15 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
资源工程专业毕业生求职信
2014/02/27 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
办公室岗位职责
2015/02/04 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书