yahoo标签 (转)
使用YUI TabView
Using the YUI TabView
我们还没有详细介绍过Yahoo! UI库，要学习它的很多高级效果，TabView似乎是一个很好的入门。
提示：你可以从http://developer.yahoo.com/yui上面下载YUI、查看示例及阅读文档。
和其他库一样，YUI TabView将列表项元素（li）用于页签，而一般将div元素用于内容。这样做的一个优点是为了找到页签，你不必访问页面的所有div元素：
<ul class="yui-nav">
<li class="selected"><a href="#tab1">Name:</a></li>
<li><a href="#tab2">Address:</a></li>
<li><a href="#tab3">Choices:</a></li>
</ul>
接下来是另外一个div元素，它带有一些单独的面板，每块面板都包含在自己的div元素中。由于没有使用标识符，这样做对保持面板元素和页签之间的同步非常重要。这些元素彼此之间是物理隔离的，并且，它们并没有共享唯一的父元素。
使用专用的class划分全局容器（yui-navset）、导航列表（yui-nav）和元素（yui- content）。另外，我们为全局容器元素指定了一个标识符。建立了标签页后，这个标识符会传递给一个函数调用，以便建立标签页效果：
var myTabs = new YAHOO.widget.TabView("tabview");
示例5-10显示了这个完整的页面。正如你所见到的，我们再次看到使用封装的高级效果，我们所提供的代码少了很多。YUI的文档还算是比较齐全的，包括如何为这个效果添加功能以集成Web服务请求和其它行为。
示例5-10：基于YUI的TabView标签页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Tabbed Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="yui/build/tabview/assets/tabs.css" type="text/css" />
<link rel="stylesheet" href="yui/build/tabview/assets/border_tabs.css" type="text/css" />
<script type="text/javascript" src="yui/build/yahoo/yahoo.js">
</script>
<script type="text/javascript" src="yui/build/dom/dom.js">
</script>
<script type="text/javascript" src="yui/build/event/event.js">
</script>
<script type="text/javascript" src="yui/build/tabview/tabview.js">
</script>
<script type="text/javascript">
//<![CDATA[
var myTabs = new YAHOO.widget.TabView("tabview");
//]]>
</script>
</head>
<body>
<form action="GET">
<div id="tabview" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1">Name:</a></li>
<li><a href="#tab2">Address:</a></li>
<li><a href="#tab3">Choices:</a></li>
</ul>
<div class="yui-content">
<div>
<label for="firstname">First Name:</label><br /><input type="text" id="firstname"
name="firstname" /><br /><br />
<label for="lastname">Last Name:</label><br /><input type="text" id="lastname"
name="lastname" /><br /><br />
</div>
<div>
<label for="street">Street Address:</label><br /><input type="text" id="street"
name="street" /><br /><br />
<label for="city">City:</label><br /><input type="text" id="city" name="city" /><br /><br
/>
<label for="state">State:</label><br /><input type="text" id="state" name="state" /><br /><br />
</div>
<div>
<input type="checkbox" id="opt1" name="opt1" checked="checked" /><label for="opt1">
XXXXXXX</label><br />
<input type="checkbox" id="opt2" name="opt2" /><label for="opt2">XX XXXXXX</label><br />
<input type="checkbox" id="opt3" name="opt3" /><label for="opt3">X X XXXXX</label><br />
<input type="checkbox" id="opt4" name="opt4" checked="checked" /><label for="opt4">X
XXXXX</label><br />
</div>
</div>
</div>
</form>
</body>
</html>
我唯一不喜欢YUI TabView控件的地方是：并不是像它的开发者所说的那样，不用看文档就可以使用它。图5-5显示了使用YUI控件的页面。
 |
| 图5-5：使用YUI TabView控件建立的标签页 |
当然，由于使用class来标记标签页中的每个组件，所以所有内容都可以在CSS中进行修改。
提示：我倾向于将封装的行为称为“效果（effect）”，而其他情况则参考Apple以及其他公 司，将可植入到一个环境中的少量封装代码和视觉元素称之为“控件（widget）”。然而，控件也用于表示一个完整的对象，它可以原封不动地包含在Web 页面中，它通常会从一个远程资源请求数据。实际上，在Ajax开发中，“控件”已经成为非常普通的术语。
这也正是我不喜欢使用“控件”这个术语的原因，因为它有太多的含义，我担心在含义相近时，会发生混 淆。当我说“Ajax效果”时，对于这个特定的环境来说，它是唯一的。然而，毕竟各人有各人的见解。你只要意识到，当很多Ajax开发者提到“控件”时， 它就相当于本书中所使用的“Ajax效果”。
