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 相关文章推荐
js的event详解。
Sep 06 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
浅谈React碰到v-if
Nov 04 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
JS随机密码生成算法
2019/09/23 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
python计算最大优先级队列实例
2013/12/18 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
python psutil模块使用方法解析
2019/08/01 Python
Python logging设置和logger解析
2019/08/28 Python
python自动生成model文件过程详解
2019/11/02 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
python中time tzset()函数实例用法
2021/02/18 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
类的核心特性有哪些
2014/01/01 面试题
HSRP的含义以及如何工作
2014/09/10 面试题
交通事故赔偿协议书范本
2014/04/15 职场文书
爱国主义演讲稿
2014/05/07 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
调研座谈会发言材料
2014/08/23 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
文明班级申报材料
2014/12/24 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android