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. Ubuntu14.04 切换root账户su root失败解决办法

    原因是需要备份一个vimrc,可是cp就提示Permission denied. su root就提示su: Authentication failure 解决办法: sudo passwd root ...

  2. mouseout以及mouseover

    两个图层 红色图层代表outside蓝色图层代表inside dom结构如下 <div id="outside">      <div id="insi ...

  3. Timer wheel etc.

    http://code.google.com/p/hierarchal-wheel-timer/ 最小堆的实现(C 语言版) 最小堆的实现(java) Linux 下定时器的实现方式分析 更快bobh ...

  4. html中的框架

    1.总的代码 <frameset rows=20%,*> <frame src="top.html" /> <frameset cols=30%,*& ...

  5. ORACLE DG之参数详解

    1.DB_NAME 数据库名字,需要保持同一个Data Guard中所有数据库DB_NAME相同. 主库和备库相同 DB_NAME='chicago' DB_NAME='chicago' 2.DB_U ...

  6. 配置《算法 第四版》的Eclipse开发环境

    1. 安装JAVA JAVA网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 配置环境变量(我把JAVA安装在 ...

  7. sftp

    SFTP 为 SSH的一部分,是一种传输档案至 Blogger 伺服器的安全方式.其实在SSH软件包中,已经包含了一个叫作SFTP(Secure File Transfer Protocol)的安全文 ...

  8. StyleCop学习笔记——默认的规则

    在StyleCop中有一些官方自己写好的检测规则下面就是英文的解释 文档规则 1.SA1600:ElementsMustBeDocumented元素必须添加注释 2.SA1601: PartialEl ...

  9. Android--获取短信的内容，截取短信

    1.首先我们要写一个广播接收器,当我们的手机收到短信时,系统会自动发送一个广播,我们只需要接收到这条广播就可以了 2.在广播里面,我们重写的onReceive()方法,通过里面的Intent写到的Bu ...

  10. SQL Server 2008 R2 主从数据库同步

    一.准备工作: 主数据库服务器: OS:Windows Server 2008 R2    DB: SQL Server 2008 R2 Hostname : CXMasterDB IP: 192.1 ...