Moo.fx滑动效果选项卡

1. 样式定义 

body {
	color: #333;
	font-size: 11px;
	font-family: verdana;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #DFE44F;
}

p {
	margin: 0;
	padding: 5px;
	line-height: 1.5em;
	text-align: justify;
	border: 1px solid #73A405;
}

#wrapper {
	width: 800px;
	margin: 0 auto;
}

.box {
	background: #fff;
}

.boxholder {
	clear: both;
	padding: 5px;
	background: #8DC70A;
}

.tab {
	float: left;
	height: 32px;
	width: 102px;
	margin: 0 1px 0 0;
	text-align: center;
	background: #8DC70A url(images/greentab.jpg) no-repeat;
}

.tabtxt {
	margin: 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	padding: 9px 0 0 0;
}

 

2. 引入 JS 脚本

<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>

 

3. 定义初始化函数

function init() {
	var stretchers = document.getElementsByClassName('box');
	var toggles = document.getElementsByClassName('tab');
	var myAccordion = new fx.Accordion(
		toggles, stretchers, {opacity: true, height: true, duration: 600}
	);
	//hash functions
	var found = false;
	toggles.each(function(h3, i){
		var div = Element.find(h3, 'nextSibling');
			if (window.location.href.indexOf(h3.title) > 0) {
				myAccordion.showThisHideOpen(div);
				found = true;
			}
		});
		if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}

 

4. 定义 HTML 元素

<div id="wrapper">
	<div id="content">
		<div id="test" class="tab" title="first">
			<h3 class="tabtxt"><a href="#">first</a></h3>
		</div>
		<div class="tab">
			<h3 class="tabtxt" title="second"><a href="#">second</a></h3>
		</div>
		<div class="tab">
			<h3 class="tabtxt" title="third"><a href="#">third</a></h3>
		</div>
		<div class="tab">
			<h3 class="tabtxt" title="fourth"><a href="#">fourth</a></h3>
		</div>
		<div class="boxholder">
			<div class="box">
				<p><strong>The First Box</strong></p>
			</div>
			<div class="box">
				<p>
					<strong>The Second Box</strong>
				</p>
			</div>
			<div class="box">
				<p>
					<strong>The Third Box</strong>
				</p>
			</div>
			<div class="box">
				<p>
					<strong>The Fourth Box</strong>
					<br />
				</p>
			</div>
		</div>
	</div>
</div>

 

5. JS 函数调用

<script type="text/javascript">
	Element.cleanWhitespace('content');
	init();
</script>

 

6. 效果预览

 

7. Demo 下载

附件 demo，欢迎下载。

 

8. 探讨

不可否认，该选项卡的渐变滑动效果确实很靓，但是各个选项卡的选中和未选中状态均一样，这会给人一种难以区分的错觉，也许这是它的不足吧，又或者是本人尚未深入研究，暂时仍不知道如何设置或者修改。

如果大家知道，望不吝赐教。

 

 

-------------------------------------------------

Stay Hungry, Stay Foolish!

Afa

May 18th, 2010

-------------------------------------------------