自定义jQuery选项卡插件实例
<!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>
- jQuery插件Validate实现自定义校验结果样式
- jQuery插件formValidator自定义函数扩展功能实例详解
- 自定义刻度jQuery进度条及插件
- jQuery UI插件自定义confirm确认框的方法
- jQuery实现的一个自定义Placeholder属性插件
- jquery自定义滚动条插件示例分享
- 使用jQuery.fn自定义jQuery翻页插件
- Jquery插件之打造自定义的select标签
- JQuery扩展插件Validate 5添加自定义验证方法
- 自定义一个jquery插件[鼠标悬浮时候 出现说明label]
- jQuery创建自己的插件(自定义插件)的方法
- jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
相关文章
这篇文章介绍了Jquery多选框互相内容交换的实例代码，有需要的朋友可以参考一下2013-07-07
上篇文章我简单的描述了加载页面、事件委派、事件切换三种JQuery的事件机制，这篇文章我讲下在JQuery事件机制中占主导地位并且在我们的实际工作中最常用到的机制-事件处理2010-12-12
JQuery中$.ajax()方法想必大家并不陌生吧，在本文将为大家介绍下其参数及应用示例，感兴趣的朋友不要错过2013-12-12
这篇文章主要介绍了jquery 校验中国身份证号码实例详解的相关资料,需要的朋友可以参考下2017-04-04
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
这篇文章主要介绍了jQuery autoComplete插件两种使用方式及动态改变参数值的方法,结合实例形式分析了jQuery自动匹配插件autoComplete的使用技巧与动态改变参数传入值的实现方法,需要的朋友可以参考下2016-10-10
jQuery+css last-child实现选择最后一个子元素操作示例
这篇文章主要介绍了jQuery+css last-child实现选择最后一个子元素操作,结合实例形式分析了jQuery结合css进行页面元素选择与样式修改相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了jQuery实现可兼容IE6的淡入淡出效果告警提示功能,结合具体实例形式分析了jQuery弹出警告提示功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下2017-09-09
本篇文章，小编为大家介绍关于jQuery实用基础超详细介绍，有需要的朋友可以参考一下2013-04-04
本篇文章主要是对jQuery获取(选中)单选,复选框,下拉框中的值的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
在实际开发中经常会遇到数据没发生改变是，由于用户不小心点击保存，这样导致数据库的日志增大；还有数据填写好后，忘了添加保存直接关闭页面离开。2011-04-04
最新评论