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>

转载于:https://www.cnblogs.com/milantgh/p/3662729.html

sprytabbedpanels.js库之在页面中插入Tabbed Panels相关推荐

html页面嵌入markdown,在页面中插入Markdown编辑器
前端在页面中插入Markdown编辑器: 1.官网下载:http://pandao.github.io/editor.md/ 2.你的html: Simple example - Editor.md ...
CSS3之利用选择器和content属性在页面中插入内容
CSS3之使用选择器在页面中插入内容 1. 使用选择器来插入内容:例, h2:before{ content:'COLUMN'; color:white: background-color:o ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
在ppt中插入html,PPT页面中插入浏览器方法 PPT中插入浏览器教程-PPT家园
如何在PPT页面中插入浏览器 2018-04-01 14:42 责任编辑:pptjia 导读 / PPT中自带有浏览器的控件,叫做"MicrosoftWebBrowser"(当然如 ...
ppt中加载html,PPT页面中插入浏览器方法 PPT中插入浏览器教程-PPT家园
PPT中自带有浏览器的控件,叫做"Microsoft Web Browser"(当然如果你使用的是2010PPT版本的话,你的"开发工具"还需要在"自 ...
页面中插入word文档
一.页面中插入word文档 <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
如何在HTML页面中插入百度地图
在网页制作时,如果想要把企业地址以地图的形式插入HTML页面中,可以通过百度地图轻松实现,当然,前提是注册百度账号并且通过实名认证网址:http://api.map.baidu.com/lbsapi ...
如何在aspx页面中插入swf动画
阅读: 66 评论: 0 作者: eng308 发表于 2009-10-27 13:14 原文链接 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf- ...
打开另外一个页面_如何在PDF页面中插入图片？
如何给PDF添加图片?有些时候为了丰富PDF的文档内容,需要添加一些图片,相比Word或PPT文档可以直接插入图片,而PDF的操作很多人可能并不熟悉,下面一起来看看如何在PDF文档中插入图片. 关于P ...

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

sprytabbedpanels.js库之在页面中插入Tabbed Panels相关推荐

最新文章

热门文章