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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 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 5.3.0 安装分析心得
2009/08/07 PHP
php合并js请求的例子
2013/11/01 PHP
php格式化金额函数分享
2015/02/02 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
python实现图像全景拼接
2020/03/27 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
房地产营销活动策划方案
2014/09/15 职场文书
会计试用期自我评价
2014/09/19 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
教师反邪教心得体会
2016/01/15 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技