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 相关文章推荐
js中判断文本框是否为空的两种方法
Jul 31 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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 header 跳转
2013/06/17 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python文件去除注释的方法
2015/05/25 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
社区七一党员活动方案
2014/01/25 职场文书
销售类求职信
2014/06/13 职场文书
迎新生晚会主持词
2015/06/30 职场文书
获奖感言怎么写
2015/07/31 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers