在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用。

来看一下效果:

tabs-1-panel
tabs-2-panel
tabs-3-panel
tabs-1-panel
tabs-2-panel
tabs-3-panel

MyUI-tabs

创建选项卡组件

使用方法: 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-Tab

jQuery插件学习之选项卡Tab的更多相关文章

  1. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  2. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  3. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. 使用自定义 jQuery 插件的一个选项卡Demo

    前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...

  5. jQuery插件学习(一)

    由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...

  6. jquery插件 - 学习笔记 (插件参数及函数的调用)

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  7. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  8. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  9. jquery 插件学习

    练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...

随机推荐

  1. vscode 的使用笔记

    1.使用vscode 的终端命令 ctrl + ~  打开 vs 的终端 这是使用windows 自带的shell终端, 使用git.bash的shell  在设置里面,找到 terminal.int ...

  2. mongodb导入导出数据

    导出 mongoexport -d DB_NAME -c COLLECT_NAME -o FILE_NAME 例:mongoexport -d db_test -c data_result -o da ...

  3. 欲善其工必先利其器-----ThinkPad E430加装SSD固态硬盘和内存

    大概13年5月左右入手的小黑ThinkPad E430 当时辞职换工作换城市所以预算有限,4k左右大洋买下了这款笔记本电脑.3年左右的时间,一直使用单位电脑,偶尔使用小黑真心崩溃.你会发现你会有放弃使 ...

  4. yum报错:Error: Multilib version problems found. This often means that the root

    使用yum安装一些依赖库报错: yum -y install gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel 错误信 ...

  5. android高级页面效果集锦

    程序员界有个神奇的网站,那就是github,这个网站集合了一大批优秀的开源框架,极大地节省了开发者开发的时间,在这里我进行了一下整理,这样可以使我们在使用到时快速的查找到,希望对大家有所帮助! 一个强 ...

  6. java基础题刷题中的知识点复习

    将变量转换为字符串方法:(String)待转对象..toString().String.valueOf(待转对象) 对字符串进行操作的方法,使用StringBuffer和StringBuilder定义 ...

  7. Confluence 6 虚拟文件和文件夹

    在取消点赞事件中,你可能会遇到 WebDAV  客户端的问题或者不稳定的情况,你可以启用访问自动创建(虚拟)文件和文件夹. 备注: 在默认情况下,这个选项隐藏在 'WebDAV Configurati ...

  8. hishlib 算法加密

    通过hashlib MD5得到一个32的加密密码 import hashlib def getMD5(): md5 = hashlib.md5()  #调用MD5加密方法 with open(path ...

  9. 初始Ajax

    一.Ajax准备知识:json 说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下 1.json(Javascript  Obie ...

  10. 1005:Number Sequence(hdu,数学规律题)

    Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...