如何：使用YUI选项卡创建选项卡式框

最新推荐文章于 2024-08-10 21:02:05 发布

cunqu9743

最新推荐文章于 2024-08-10 21:02:05 发布

阅读量97

点赞数

文章标签： css html java javascript js ViewUI

如今，选项卡式包装非常流行。请查看MSNBC的“探索”部分或“ 高级新闻主题”，以了解如何在博客设置中使用它们。我认为这是有充分理由的。它使您可以在使访问者与网站交互的同时，减少混乱，向页面添加更多内容。另外，这还挺有趣的。

请注意这些“选项卡式框”的工作方式。当您单击新选项卡时，它们会立即更改框中的内容-无需从服务器加载。这是因为所有选项卡的内容都是在加载页面时加载的，但是一直隐藏到单击相应的选项卡为止。

使用Yahoo! UI Tab View ，创建一个选项卡式框非常简单。这是如何做：

1.在页面上包含Javascript文件。

...
	<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
	<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
	<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
</head>

<body>
	<script type="text/javascript">
	var myTabs = new YAHOO.widget.TabView("content-explorer");
	</script>
...

2.添加框的标记。

<div id="content-explorer">
			
	<ul class="yui-nav">
		<li class="selected"><a href="#">Articles</a></li>
		<li><a href="#">Photos</a></li>
		<li><a href="#">Video</a></li>
		<li><a href="#">Leprechaun</a></li>
	</ul>

	<div class="yui-content">
		<div>
			...
		</div>
		<div>
			...
		</div>
		<div>
			...
		</div>
		<div>
			...
		</div>
		<div>
			...
		</div>
	</div>
</div>

该标记中的所有内容对于它的工作都很重要，包括所有元素的所有ID和类名称。请注意，“ yui-nav”中有四个列表项，“ yui-content”中有四个div，这也很重要。这些应始终平等对应。

3. CSS样式

#content-explorer {
	padding-top: 20px;
	width:100%;
	line-height:normal;
	}
	#content-explorer ul {
		padding: 10px 10px 0;
		list-style: none;
		max-width: 770px;
		background: url(images/menu_bg.gif) bottom repeat-x;
		height: 31px;
		}
		#content-explorer ul li {
			float: left;
			background: url(images/right.gif) right top no-repeat;
			text-align: center;
			overflow: hidden;
			margin-left: 5px;
			}
			#content-explorer ul li a {
				display: block;
				background: url(images/left.gif) left top no-repeat;
				padding: 10px 20px 6px 20px;
				font-weight: bold;
				color: #999;
			}
			#content-explorer ul li a:hover {
				color: #990000;
			}
			#content-explorer ul li.selected {
				background: url(images/right_cur.gif) right top no-repeat;
			}
			#content-explorer ul li.selected a {
				background: url(images/left_cur.gif) left top no-repeat;
				padding-bottom: 8px;
				color: #990000;
			}
div.yui-content {
	overflow: auto;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	border-left: 2px solid black;
	padding: 20px;
}

CSS完全由您决定，没有像标记中那样的命名限制。不用担心在那里设置显示值以隐藏不同选项卡的内容，Javascript会自动为您完成。

对我来说，这方面最酷的部分就是所有这些的灵活性。您可以在内容区域的这些div中做任何您想做的事情。

[示例页]

[下载示例]

翻译自: https://css-tricks.com/simple-tabbed-box/

cunqu9743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何：使用YUI选项卡创建选项卡式框

如今，选项卡式包装非常流行。请查看MSNBC的“探索”部分或“ 高级新闻主题”，以了解如何在博客设置中使用它们。我认为这是有充分理由的。它使您可以在使访问者与网站交互的同时，减少混乱，向页面添加更多内容。另外，这还挺有趣的。请注意这些“选项卡式框”的工作方式。当您单击新选项卡时，它们会立即更改框中的内容-无需从服务器加载。这是因为所有选项卡的内容都是在加载页面时加载的，...
复制链接

扫一扫