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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
node.js 动态执行脚本
Jun 02 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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
php4的彩蛋
2006/10/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
python pdb调试方法分享
2014/01/21 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python如何求解两数的最大公约数
2018/09/27 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python龙贝格法求积分实例
2020/02/29 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
食品厂厂长岗位职责
2014/01/30 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
个人总结格式范文
2015/03/09 职场文书
终止合同协议书范本
2016/03/22 职场文书
我收到了德劲DE1107
2022/04/05 无线电
MySQL批量更新不同表中的数据
2022/05/11 MySQL