jQuery扩展之TAB切换

HTML：

<div class="tab mb10" tabopts="{action:'click',animate:0}">
	<div class="tab-nav">
		<ul>
			<li class="c">社会</li>
			<li>娱乐</li>
			<li>体育</li>
			<li>军事</li>
		</ul>
	</div>
	<div class="tab-content">1</div>
	<div class="tab-content hide">2</div>
	<div class="tab-content hide">3</div>
	<div class="tab-content hide">4</div>
</div>

<div class="tab" tabopts="{action:'mouseover',animate:0}">
	<div class="tab-nav">
		<ul>
			<li class="c">社会</li>
			<li>娱乐</li>
			<li>体育</li>
			<li>军事</li>
		</ul>
	</div>
	<div class="tab-content">1</div>
	<div class="tab-content hide">2</div>
	<div class="tab-content hide">3</div>
	<div class="tab-content hide">4</div>
</div>

将js中需要用到的参数以自定义HTML属性的方式指定。

CSS：

.tab {width:600px; border:1px solid #36f;}
.tab-nav {height:26px; margin-bottom:-1px; background:#ccf;}
.tab-nav ul {}
.tab-nav li {float:left; width:100px; height:25px; border-right:1px solid #36f; font:12px/25px arial; text-align:center;}
.tab-nav li.c {height:26px; background:#fff; font-weight:700; _position:relative;}
.tab-content {border-top:1px solid #36f; padding:10px; height:240px;}

注意_position:relative, 如果不加，IE6中高亮项的背景色无法越过tab-content的border-top。

JS:

$.fn.tab = function(option) {
	var setting = {
		action : "mouseover",
		animate : 1
	};

	return this.each(function() {
		var $this    = $(this),
			opts     = $.extend({}, setting, eval('(' + $this.attr("tabopts") + ')')),
			$nav     = $this.find(".tab-nav"),
			$content = $this.find(".tab-content");

		$nav.delegate("li", opts.action, function() {
			$(this).addClass("c").siblings().removeClass("c");
			if (opts.animate) {
				$content.hide().eq($(this).index()).fadeIn();
			} else {
				$content.addClass("hide").eq($(this).index()).removeClass("hide");
			}http://www.qianduankaifa.com/demo/tab.html
		});
	});
};
$(".tab").tab();

接受HTML属性后，需要通过eval进行转换。

演示：http://www.qianduankaifa.com/demo/tab.html

标签：,

Posted in 开发 |

?????