自定义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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
js实现自定义右键菜单
May 18 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仿discuz分页效果代码
2008/10/02 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP 面向对象详解
2012/09/13 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
用Python编写web API的教程
2015/04/30 Python
python提取页面内url列表的方法
2015/05/25 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
为什么说python适合写爬虫
2020/06/11 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
nginx lua 操作 mysql
2022/05/15 Servers