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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
Angular6中使用Swiper的方法示例
Jul 09 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
vue实现公共方法抽离
Jul 31 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python八大排序算法速度实例对比
2017/12/06 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
HTTP状态码详解
2021/03/18 杂记
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
消防安全宣传标语
2014/06/07 职场文书
庆七一宣传标语
2014/10/08 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
使用Ajax实现进度条的绘制
2022/04/07 Javascript