关于自定义事件

一天要饭生活又开始啦 2013-05-27 05:30:10

<ul id="tabs">

<li data-tab="users">Users</li>

<li data-tab="groups">Groups</li>

</ul>

<div id="tabsContent">

<div data-tab="users"> ... </div>

<div data-tab="groups"> ... </div>

</div>

jQuery.fn.tabs = function (control) {

var element = $(this);

control = $(control);

element.delegate("li", "click", function () {

var tabName = $(this).attr("data-tab");

element.trigger("change.tabs", tabName);

});

element.bind("change.tabs", function (e, tabName) {

element.find("li").removeClass("active");

element.find(">[data-tab='" + tabName + "']").addClass("active");

});

element.bind("change.tabs", function (e, tabName) {

control.find(">[data-tab]").removeClass("active");

control.find(">[data-tab='" + tabName + "']").addClass("active");

});

var firstName = element.find("li:first").attr("data-tab");

element.trigger("change.tabs", firstName);

return this;

};

$("ul#tabs").tabs("#tabContent");

...全文

126 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

一天要饭生活又开始啦 2013-05-28

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
body { margin:0; padding:0; }
.clearfix:after { content:' '; display:block; clear:both; height:0; font-size:0; visibility:hidden; }
.clearfix { *zoom:1; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
ul li { float:left; width:50px; }
#tabs li.active { background-color:red; }
#tabsContent div { display:none; }
#tabsContent div.active { display:block; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
function tabs() {
	$('#tabs').delegate('li', 'click', function() {
		$('li').removeClass('active');
		$(this).addClass('active');
		$('#tabsContent').find('div').removeClass('active');
		$('#tabsContent').find('div').eq($(this).index()).addClass('active');
	});
}

$(function() {
    tabs();
});
</script>
</head>

<body>
<ul id="tabs" class='clearfix'>
	<li class='active'>Users</li>
	<li>Groups</li>
	<li>Groups</li>
</ul>
<div id="tabsContent">
	<div class='active'> ... </div>
	<div> ...... </div>
	<div> ......... </div>
</div>
</body>
</html>

一天要饭生活又开始啦 2013-05-28

打赏
举报

引用 1 楼 KK3K2005 的回复:

书上说自定义事件好扩展，可是我没看出啊，能给解释下吗？

一天要饭生活又开始啦 2013-05-28

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
body { margin:0; padding:0; }
.clearfix:after { content:' '; display:block; clear:both; height:0; font-size:0; visibility:hidden; }
.clearfix { *zoom:1; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
ul li { float:left; width:50px; }
#tabs li.active { background-color:red; }
#tabsContent div { display:none; }
#tabsContent div.active { display:block; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
jQuery.fn.tabs = function (control) {
	var element = $(this);
	control = $(control);
	
	element.delegate("li", "click", function () {
		var tabName = $(this).attr("data-tab");
		
		element.trigger("change.tabs", tabName);
	});
	
	element.bind("change.tabs", function (e, tabName) {
		element.find("li").removeClass("active");
		element.find(">[data-tab='" + tabName + "']").addClass("active");
	});
	
	element.bind("change.tabs", function (e, tabName) {
		control.find(">[data-tab]").removeClass("active");
		control.find(">[data-tab='" + tabName + "']").addClass("active");
	});
	
	var firstName = element.find("li:first").attr("data-tab");
	
	element.trigger("change.tabs", firstName);
	
	return this;
};


$(window).bind("hashchange", function(){
var tabName = window.location.hash.slice(1);
$("#tabs").trigger("change.tabs", tabName);
});

$(function() {
	$("#tabs").bind("change.tabs", function(e, tabName){
	window.location.hash = tabName;
	});
	$("ul#tabs").tabs("#tabsContent");
});
</script>
</head>

<body>
<ul id="tabs" class='clearfix'>
	<li data-tab="users">Users</li>
	<li data-tab="groups">Groups</li>
</ul>
<div id="tabsContent">
	<div data-tab="users"> ... </div>
	<div data-tab="groups"> ...... </div>
</div>
</body>
</html>