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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 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
SSI指令
2006/11/25 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
vue 组件基础知识总结
2021/01/26 Vue.js
Python中函数的用法实例教程
2014/09/08 Python
Python使用turtule画五角星的方法
2015/07/09 Python
python和shell获取文本内容的方法
2018/06/05 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年暑期见闻
2015/07/14 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL