jQuery validate插件submitHandler提交導致死循環(huán)解決方法
656
2024-03-13
本文實例針對jQuery實現(xiàn)Tab選項卡切換效果進行了簡單演示，完全是自己的思考實現(xiàn)過程，分享給大家供大家參考。具體如下：
起初我Html代碼架子是這樣的：
<div class="tabs"> <ul> <li class="acss" data-box="#panel-1">標簽1</li> <li class="bcss" data-box="#panel-2">標簽2</li> <li class="bcss" data-box="#panel-3">標簽3</li> </ul> <div id="panel-1">內(nèi)容111111</div> <div id="panel-2" style="display:none;">內(nèi)容222222</div> <div id="panel-3" style="display:none;">內(nèi)容333333</div> </div>
后來換成了下面這個：
<dl class="tabs"> <dt> <a class="acss" >標簽1</a> <a class="bcss" >標簽2</a> <a class="bcss" >標簽3</a> </dt> <dd id="panel-1">內(nèi)容1</dd> <dd id="panel-2" style="display:none;">內(nèi)容2</dd> <dd id="panel-3" style="display:none;">內(nèi)容3</dd> </dl>
之所以換成這個，是因為我覺得 dl dt dd 在頁面布局中用的比 div ul li 要少，這樣可以做到更好的隔離性。我們用js操作dl dt dd 對象，就會更少的影響到頁面內(nèi)其它元素，還有就是不用在li標簽中自定義data-box屬性，更符合頁面書寫標準。而且這個結(jié)構(gòu)的整體感覺也比上面那個好。
插件的實現(xiàn)代碼如下：
(function ($) {
$.fn.Tabs = function (options) {
//默認參數(shù)設置
var settings = {
beforeCss: "bcss", //激活前樣式名
afterCss: "acss", //激活后樣式名
model: "mouseover" //切換方式("mouseover"或者"click")
};
//不為空，則合并參數(shù)
if (options)
$.extend(settings, options);
//獲取a標簽集合
var arr_a = $("> dt > a", this);
//給a標簽分別綁定事件
arr_a.each(function () {
$(this).bind(settings.model, function (event) {
//去除a標簽的錨點跳轉(zhuǎn)
event.preventDefault();
//樣式控制
$(this).removeClass().addClass(settings.afterCss)
.siblings("a").removeClass().addClass(settings.beforeCss);
//隱藏與顯示控制
var dd_id = $(this).attr("href");
$(dd_id).show().siblings("dd").hide();
});
});
//遵循鏈式原則
return this.each(function () { });
};
})(jQuery);
之所以說是輕量級，是因為代碼量真的很少，也很簡單。加了注釋相信大家都可以看懂。
其中settings中的model是用來控制切換方式的：
當為"click"時，點擊實現(xiàn)切換； 當為"mouseover"時，鼠標滑入實現(xiàn)切換。開始時是想用hover來實現(xiàn)鼠標滑入切換的，結(jié)果發(fā)現(xiàn)，hover不支持bind綁定。因為hover是jquery通過封裝 mouseover事件 的產(chǎn)物，它并不是一個正宗的事件，因此無法綁定。
下面給出個DEMO：
<!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>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.tabs
{
width: 504px;
margin: 50px auto;
}
.acss,.bcss
{
text-decoration:none;
line-height: 35px;
font-size: 14px;
padding:8px 15px;
}
.bcss
{
background-color: #D4D4D4;
border-bottom:1px solid white;
}
.acss
{
background-color: orange;
border-bottom:1px solid orange;
}
.tabs dd
{
width: 500px;
height: 300px;
border: 1px solid orange;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<dl class="tabs" id="tabs1">
<dt>
<a class="acss" >標簽1</a>
<a class="bcss" >標簽2</a>
<a class="bcss" >標簽3</a>
</dt>
<dd id="panel-1"><h1>鼠標滑入切換</h1></dd>
<dd id="panel-2" style="display:none;">內(nèi)容2</dd>
<dd id="panel-3" style="display:none;">內(nèi)容3</dd>
</dl>
<dl class="tabs" id="tabs2">
<dt>
<a class="acss" >標簽1</a><默認第一個激活-->
<a class="bcss" >標簽2</a>
<a class="bcss" >標簽3</a>
</dt>
<dd id="panel-4"><h1>鼠標點擊切換</h1></dd><默認第一個顯示-->
<dd id="panel-5" style="display:none;">內(nèi)容2</dd>
<dd id="panel-6" style="display:none;">內(nèi)容3</dd>
</dl>
<script src="http://www.gimoo.net/t/js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/js/jquery.similar.Tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$("#tabs1").Tabs(); //默認鼠標滑入切換
$("#tabs2").Tabs({model:"click"}); //設置為點擊切換
</script>
</body>
</html>
效果圖如下：
希望本文所述對大家學習jquery程序設計有所幫助。
