jQuery插件学习之选项卡Tab
在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用。
来看一下效果:
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的更多相关文章
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
- jquery插件学习之元素顶部悬浮
jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- 使用自定义 jQuery 插件的一个选项卡Demo
前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...
- jQuery插件学习(一)
由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- jQuery插件学习笔记
近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...
- [置顶] JQuery插件学习教程
这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...
- jquery 插件学习
练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...
随机推荐
- 007grafana监控时间戳转换
一. https://d.jyall.me/dashboard-solo/db/soloview?panelId=1&var-metrics=stats.gauges.zookeeper.mo ...
- lua 中 socket 通信示例
server.lua #!/usr/bin/lua local socket = require("socket") host, port = "127.0.0.1&qu ...
- Mac 上卸载 Java
如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...
- OpenSIPS 1.11.1安装记录
说明:操作系统Centos 6.5 64位 安装步骤: 1.安装依赖包 : yum -y install gcc make gdb wget yum -y install flex bison nc ...
- Python2018-列表的相关操作
列表中存放的数据是可以进行修改的,比如"增"."删"."改" .“查” "增"-----append, extend, ...
- 第一篇----mysql体系
mysql体系: 解释: 调用: 1.connectors:连接器 (远程调用mysql,Native很常用的mysql远程连接工具.其它是可以调用mysql支持的一些语言和方法) mysql结构 2 ...
- JS调用摄像头并上传图片到服务器
本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...
- 彻底搞懂字符集编码:ASCII,Unicode 和 UTF-8
一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个 ...
- LONG数据类型转换为VARCHAR2并相互转换
--方法1,支持表 --plsql中将long类型隐式转换为varchar2,但是sql不能CREATE OR REPLACE FUNCTION LONG_TO_CHAR( in_rowid rowi ...
- 【ftp】主动模式和被动模式
来自:http://blog.csdn.net/liuhelong12/article/details/50218311 原博主不让转载全文,不过下面这部分是原博主转载别人的,所以我拿过来应该没问题吧 ...