自定义jQuery选项卡插件实例


Posted in Javascript onMarch 27, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>jQuery自定义选项卡插件</title>
<style>
body, ul { padding:0; margin:0; }
li { list-style:none; }
#tabs { zoom:1; }
#tab:after { content:""; display:block; clear:both; }
#tabs li { float:left; padding:10px; color:#FF8900; background:#FFF; cursor:pointer; }
#tabs .active { background:#FF8900; color:#FFF; }
#tabContent { background:#FF8900; color:#FFF; padding:10px; clear:both; }
#tabContent div { display:none; }
#tabContent div.active { display:block; }
</style>
</head>
<body>
<ul id="tabs">
  <li data-tab="users">Users</li>
  <li data-tab="groups">Groups</li>
</ul>
<div id="tabContent">
  <div data-tab="users">Users Content</div>
  <div data-tab="groups">Groups Content</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
jQuery.fn.tabs = function (control) {
    var element = $(this);
    var control = $(control);
    element.delegate('li', 'click', function () {
        // 遍历选项卡名称
        var tabName = $(this).attr('data-tab');
        // 点击选项卡时触发自定义事件
        element.trigger('change.tabs', tabName);
    });
    // 绑定到自定义事件
    element.bind('change.tabs', function (ev, tabName) {
        element.find('li').removeClass('active');
        element.find('>[data-tab=' + tabName + ']').addClass('active');
    });
    element.bind('change.tabs', function (ev, tabName) {
        control.find('>[data-tab]').removeClass('active');
        control.find('>[data-tab=' + tabName + ']').addClass('active');
    });
    // 激活第 1 个选项卡
    var firstName = element.find('li:first').attr('data-tab');
    element.trigger('change.tabs', firstName);
    return this;
};
jQuery(function ($) {
    $('#tabs').tabs('#tabContent');
    $('#tab').bind('change.tabs', function (ev, tabName) {
        window.loaction.hash = tabName;
    });
    $(window).bind('hashchange', function () {
        var tabName = window.location.hash.slice(1);
        $('#tabs').trigger('change.tabs', tabName);
    });
});
</script>
</body>
</html>
Javascript 相关文章推荐
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jquery实现保存已选用户
Jul 21 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
vue实现表格过滤功能
Sep 27 Javascript
js实现时间日期校验
May 26 Javascript
js数组的操作详解
Mar 27 #Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 #Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 #Javascript
JS删除数组元素的函数介绍
Mar 27 #Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 #Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 #Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 #Javascript
You might like
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python中return如何写
2020/06/18 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
应届中专生自荐书范文
2014/02/13 职场文书
高中打架检讨书
2014/02/13 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
企业党建工作总结2015
2015/05/26 职场文书
教师师德工作总结2015
2015/07/22 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
linux目录管理方法介绍
2022/06/01 Servers