1. 向页面加入sprytabbedpanels.js文件.
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
  2. 向页面插入SpryTabbedPanels.css 样式文件.
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
  3. 为了在你的页面中加入tabbed panels ,请在相应位置加入如下代码
    <div id="TabbedPanels1" class="TabbedPanels">
    </div>
  4. 在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个标签,你可以加入无限个标签.
  5. 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> 
  6. 初始化
    <div id="TabbedPanels1" class="TabbedPanels">
    
. . .
    
</div>
    
<script type="text/javascript">
    
	var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    
</script>
  7. 保存.

    最终代码如下:

    <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的更多相关文章

  1. ember.js:使用笔记7 页面中插入效果

    在某些情况下,我们需要根据数据生成某些效果:由于每个模版的controller可能不同,在不同页面之间跳转可能会无法随即更新的问题. controller: 直接使用标签:{{}},适用于在子项目内切 ...

  2. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  3. JSP 页面中插入图片

    第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...

  4. 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

    如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签. <script> 和 </script> 会告诉 JavaScript 在何处 ...

  5. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  6. 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...

  7. 如何在 网站页面中插入ppt/pdf 文件，使用插件，Native pdf 支持，chrome，Edge，Firefox,

    1 经过测试:在网页中插入 ppt 不好使:可能是浏览器=>同源策略 error?             pdf 可以正常使用:   <前提:一定要放在服务器端才行!> 2 经过e ...

  8. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. JSP+JDBC实现在可视化页面中插入数据到SQL数据库

    原创 本篇博客创建一个如下图所示的JSP页面,将用户填入的数据插入到对应的数据库中. JSP页面代码: <%@ page language="java" contentTyp ...

随机推荐

  1. centos6.3安装nginx

    一般使用linux系统的不少网友可能都是直接使用一键安装包进行安装的,以前作者也这样,但是很多时候这些一键安装方便是方便但是可能在升级及其他很多地方不是很好,本文就说下在centos6.3安装ngin ...

  2. DevExpress GridControl 部分用法

    1.GridControl赋值:this.GridControl1.DataSouce=dt; 2.GridContro总合计及分组合计: 常规总合计直接RunDesigner-Group Summa ...

  3. [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库

    此为文章备份,原文出处(我的网站)  [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库 http://www.dotblogs.com.tw ...

  4. 使用WIF实现单点登录Part IV —— 常见问题

    InvalidOperationException: ID1073: 尝试使用 ProtectedData API 解密 Cookie 时出现 CryptographicException (有关详细 ...

  5. STM32F0xx_TIM输入捕获（计算频率）配置详细过程

    前言 关于STM32的定时器,可谓是功能强大,估计没有多少人研究完STM32定时器的所有功能(包括我也没有),只是使用常用的一些功能,后续我会推出关于STM32定时器的更多功能. STM32芯片多数为 ...

  6. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

  7. [terry笔记]更改oracle用户名

    更改oracle的用户名 之前有个需求,整理一个schema的表.索引等规划到一个表空间里,利用expdp/impdp然后remap就完成了,但是整理好的用户名remap变更了,应用又不想修改其连接信 ...

  8. 【javascript】随手记代码

    //js实现的当前界面的刷新.前进.后退 <input type="button" value="刷新" onclick="window.loc ...

  9. 菜鸟学习Hibernate——简单的增、删、改、查操作

    上篇博客利用Hibernate搭建起一个简单的例子,把数据库的映射显示了出来在上一篇的博客基础上这篇博客讲述如何利用Hinbernate框架实现简单的数据库操作. 1.加入junit.jar 2.新建 ...

  10. bat隐藏文件夹

    在windows中隐藏文件是可以隐藏,但是下面红色区域一旦选中,那也就显示出来了 现在有如下代码,可以实现个性化隐藏 ========================================= ...