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 中字符串连接的性能的一些问题
May 07 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
深入解析ES6中的promise
Nov 08 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 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获取当前时间的毫秒数的方法
2014/01/26 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
纯js简单日历实现代码
2013/10/05 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python入门篇之对象类型
2014/10/17 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python组合无重复三位数的实例
2018/11/13 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
学校后勤人员职责
2013/12/27 职场文书
交通事故协议书范本
2014/11/18 职场文书
小学教师自我评价
2015/03/04 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
运动会通讯稿300字
2015/07/20 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers