jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能


Posted in Javascript onApril 08, 2013

在Web中用到多选项卡功能的网站有很多,比如163和126邮箱,用过的人知道。本人在那么多的类似插件中,目前碰到这个比较好,花了点时间调试出来了,请看效果图:

jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能

这款插件叫jqueryMagicTabs,上图实现了基本功能,如添加选项卡,选择指定的选项卡。当添加的选项卡超过一定长度时会出现左右滑动的按钮,同时支持鼠标滑动选项卡。

这段代码如下所示:

<%@ page language="java"contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> 
<title>MagicTabs的基础用法</title> 
<link href="./css/default.css"type="text/css" rel="stylesheet"> 
<link href="./css/tabs.css"type="text/css" rel="stylesheet"> 
<script type="text/javascript"src="./js/jquery.js"></script> 
<script type="text/javascript"src="./js/cn.js"></script> 
<script type="text/javascript"src="./js/core.js"></script> 
<script type="text/javascript"src="./js/ui.js"></script> 
<script type="text/javascript"src="./js/global.js"></script> 
<script type="text/javascript"src="./js/mousewheel.js"></script> 
<script type="text/javascript"src="./js/tab/tabs.js"></script> 
<script type="text/javascript"src="./js/ga.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var dd = [], i=0; 
for(i=0; i<10; i++){ 
var a = { 
code: 'tab' + i, 
title: '选项卡 ' + i, 
closeable: i>0, 
el: '选项卡 ' + i // You can put anything here 
}; 
dd.push(a); 
} 
var tabs = $('.tabs'); 
tabs.mac('tabs', { 
tabWidth: 80, //Use fix width 
items: dd, 
onCloseTab: function(me, c, a){ 
tnCbx.find('[value=' + c + ']').remove(); 
return true; 
} 
}).selectFirst(); 
var thd = tabs.children('.head'), thm = thd.children('.main'); 
thd.mousewheel(function(e, delta, deltaX, deltaY){ 
thm.scrollLeft(thm.scrollLeft() - deltaY * 40); 
return false; 
}); 
//切换选择的选项卡 
var tnCbx = $('#tabNoCbx').change(function(){ 
tabs.select($(this).val()); 
}); 
App.options(tnCbx, { 
data: dd, 
keyField: 'code', 
render: function(r){ 
return r.title; 
} 
}); 
//添加选项卡 
var atBtn = $('#addTabBtn').click(function(){ 
var a = tabs.addTab({ 
code: 'tab' + i, 
title: '选项卡 ' + i, 
closeable: i>0, 
el: '选项卡 ' + i // You can put anything here 
}); 
tabs.select('tab' + i); 
tnCbx.append('<optionvalue="tab' 
+ i + '">选项卡 ' + i + '</option>'); 
i++; 
}); 
}); 
</script> 
<style type="text/css"> 
#demo{ 
position:absolute; 
width: 600px; 
height: 400px; 
top: 50px; 
left: 200px; 
} 
</style> 
</head> 
<body> 
<div id="demo"> 
<div class="toolbar"> 
<div class="item "id="txt">请选择:</div> 
<div class="item"><select id="tabNoCbx" style="margin: 2px;"></select></div> 
<div class="sqrt"></div> 
<div class="itembutton" id="addTabBtn">添加选项卡</div> 
</div> 
<div class="clear"></div> 
<div class="tabs"style="height: 380px; margin: 4px;"></div> 
</div> 
</body> 
</html>

整个工程的目录如下所示:

jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能

本插件下载地址是http://boarsoft.com/cn/,里面还有很多优秀的插件,感兴趣可以自己练习下。

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
vue中使用props传值的方法
May 08 Javascript
实用的Vue开发技巧
May 30 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 #Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 #Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 #Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 #Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 #Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
php快递单号查询接口使用示例
2014/05/05 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
js转换对象为xml
2017/02/17 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python中Class类用法实例分析
2015/11/12 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
python中doctest库实例用法
2020/12/31 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
人事专员的岗位职责
2014/03/01 职场文书
工商管理专业自荐信
2014/06/03 职场文书
党员查摆剖析材料
2014/10/10 职场文书
个人党性分析总结
2015/03/05 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python