sprytabbedpanels.js库之在页面中插入Tabbed Panels

浏览数：166 / 时间：2015年06月09日

向页面加入sprytabbedpanels.js文件.
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
向页面插入SpryTabbedPanels.css 样式文件.
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
为了在你的页面中加入tabbed panels ,请在相应位置加入如下代码
<div id="TabbedPanels1" class="TabbedPanels">
</div>
在div id="TabbedPanels1"...标签中插入ul class="TabbedPanelsTabGroup"标签,并在每一个UL标签中加入一个或多个li class="TabbedPanelsTab"标签.如下:
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">Tab 1</li>
<li class="TabbedPanelsTab">Tab 2</li>
<li class="TabbedPanelsTab">Tab 3</li>
<li class="TabbedPanelsTab">Tab 4</li>
</ul>
</div>
在这个例子在加入4个标签,你可以加入无限个标签.
To add a content area (or panel) for each of the tabs, insert a div class="TabbedPanelsContentGroup" container tag after the ul tag, and a div class="TabbedPanelsContent" tag for each content panel, as follows(为了给每一个标签加入一个内容区,在UL标签后插入一个div class="TabbedPanelsContentGroup" 标签.并在div class="TabbedPanelsContentGroup"中为每一个内容面板加入一个div class="TabbedPanelsContent" 标签,如下:
```
<div class="TabbedPanels" id="TabbedPanels1">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab">Tab 1</li> 
		<li class="TabbedPanelsTab">Tab 2</li> 
		<li class="TabbedPanelsTab">Tab 3</li> 
		<li class="TabbedPanelsTab">Tab 4</li>
	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent">Tab 1 Content</div>
		<div class="TabbedPanelsContent">Tab 2 Content</div>
		<div class="TabbedPanelsContent">Tab 3 Content</div> 
		<div class="TabbedPanelsContent">Tab 4 Content</div> 
	</div> 
</div> 
```

初始化
<div id="TabbedPanels1" class="TabbedPanels">
. . .
</div>
<script type="text/javascript">
	var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

保存.

最终代码如下:

<head>
. . .
	<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
	<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> 
</head> 
<body>
	<div class="TabbedPanels" id="TabbedPanels1">
		<ul class="TabbedPanelsTabGroup">
			<li class="TabbedPanelsTab">Tab 1</li> 
			<li class="TabbedPanelsTab">Tab 2</li> 
			<li class="TabbedPanelsTab">Tab 3</li> 
			<li class="TabbedPanelsTab">Tab 4</li>
		</ul>
		<div class="TabbedPanelsContentGroup">
			<div class="TabbedPanelsContent">Tab 1 Content</div>
			<div class="TabbedPanelsContent">Tab 2 Content</div>
			<div class="TabbedPanelsContent">Tab 3 Content</div> 
			<div class="TabbedPanelsContent">Tab 4 Content</div> 
		</div>
	</div>
<script type="text/javascript">
	var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script> 
</body></body>

sprytabbedpanels.js库之在页面中插入Tabbed Panels,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

sprytabbedpanels.js库之在页面中插入Tabbed Panels