在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下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. 007grafana监控时间戳转换

    一. https://d.jyall.me/dashboard-solo/db/soloview?panelId=1&var-metrics=stats.gauges.zookeeper.mo ...

  2. lua 中 socket 通信示例

    server.lua #!/usr/bin/lua local socket = require("socket") host, port = "127.0.0.1&qu ...

  3. Mac 上卸载 Java

    如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...

  4. OpenSIPS 1.11.1安装记录

    说明:操作系统Centos 6.5  64位 安装步骤: 1.安装依赖包 : yum -y install gcc make gdb wget yum -y install flex bison nc ...

  5. Python2018-列表的相关操作

    列表中存放的数据是可以进行修改的,比如"增"."删"."改" .“查” "增"-----append, extend, ...

  6. 第一篇----mysql体系

    mysql体系: 解释: 调用: 1.connectors:连接器 (远程调用mysql,Native很常用的mysql远程连接工具.其它是可以调用mysql支持的一些语言和方法) mysql结构 2 ...

  7. JS调用摄像头并上传图片到服务器

    本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...

  8. 彻底搞懂字符集编码:ASCII,Unicode 和 UTF-8

    一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个 ...

  9. LONG数据类型转换为VARCHAR2并相互转换

    --方法1,支持表 --plsql中将long类型隐式转换为varchar2,但是sql不能CREATE OR REPLACE FUNCTION LONG_TO_CHAR( in_rowid rowi ...

  10. 【ftp】主动模式和被动模式

    来自:http://blog.csdn.net/liuhelong12/article/details/50218311 原博主不让转载全文,不过下面这部分是原博主转载别人的,所以我拿过来应该没问题吧 ...