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实现面向对象类的功能书写技巧
Mar 07 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
让焦点自动跳转
2006/07/01 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
Django 内置权限扩展案例详解
2019/03/04 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
党校自我鉴定范文
2013/10/02 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年导购员工作总结
2015/04/25 职场文书
上课迟到检讨书
2015/05/06 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
python如何正确使用yield
2021/05/21 Python
带你学习MySQL执行计划
2021/05/31 MySQL
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers