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>

相关阅读:
Android应用四大组件和应用程序的生命周期
 DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义
 Web前端灰框技术
 用JS实现在页面关闭或刷新时触发特定的事件
 style.display的全部属性值
 Android SDK更新的问题
 页面灰框模式精彩实现
 解决sql 语句中truncate语句不支持变量的问题
 获取网页中图片链接的路径的正则表达式
 web页面自动保存本页面的内容到本地
原文地址：https://www.cnblogs.com/milantgh/p/3662729.html