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

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

向页面加入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>

posted on 2014-04-13 20:49 milantgh 阅读(1050) 评论(0) 收藏举报

刷新页面返回顶部