在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下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. centos6.8配置php-fpm(php已在apache中以模块形式运行,nginx中同时以fastcgi运行)

    location ~ \.php(.*)$ { root /mnt/www/wenyin; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; ...

  2. POJ3580 SuperMemo splay伸展树,区间操作

    题意:实现一种数据结构,支持对一个数列的 6 种操作:第 x 个数到第 y 个数之间的数每个加 D:第 x 个数到第 y 个数之间全部数翻转:第 x 个数到第 y 个数之间的数,向后循环流动 c 次, ...

  3. new-delete-malloc-free关系总结

    new-delete-malloc-free关系总结 写在前面的话 这个系列的笔记总结是根据网上的两篇基础拓展而来的 C++经典面试题(最全,面中率最高) C++面试集锦( 面试被问到的问题 ) 面试 ...

  4. <pre>标签的基本样式设置

    断行 在html中,换行符无法在一般标签内作为布局控制显示,包括xml实体 和 均表现为white-space,仅用于断字[1]. 一般情形下,可使用<br>标签断行:但需要从原始xml文 ...

  5. Android应用内嵌unity3d游戏项目

    在一个现有的Android项目中嵌入unity3d项目 1.将unity3d项目导出android工程 2.将第一步导出的Android工程中assets文件夹和libs文件夹下的所有内容复制到And ...

  6. win10:在关闭防火墙下如何屏蔽特定端口

    如果win10没有组策略,请参考:https://www.cnblogs.com/huiy/p/9291392.html 在"开始"菜单选择"运行",输入&qu ...

  7. MySQL将查询出来的一组数据拼装成一个字符串

    1 前言 由于项目中有一个需求,需要把当日当周的排行榜数据归档,以便后期查询和发放奖励.然而发现,mysql的变量只能存一个变量值,然后如果要储存一条记录,可以使用CONCAT_WS,如果要储存多条记 ...

  8. js用replaceAll全部替换的方法

    1 前言 js中字符串整体替换,只有自带的replace,并没有replaceAll,如果我们需要把字符串中的字符统一替换,可以用正则表达式,由于经常使用就在String直接加个原生方法,方便调用. ...

  9. 移动端适配——font-size计算

    function calcFontSize(){ var view_width = window.screen.width; var view_height = window.screen.heigh ...

  10. CentOS 7 部署 Spring Boot

    Spring Boot 内嵌了tomcat .我们可以将Boot打成 jar 包丢到服务器上运行才行. Spring Boot已经帮我们打理好了这一切,如果项目是继承自 spring-boot-sta ...