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. java枚举类型使用笔记

    1.values()方法返回枚举所有实例的一个数组,调用这个数组的length方法,可以得到这个枚举对象中实例的个数 2.枚举类的每个实例,其实都是static的,可以通过static方法直接调用,而 ...

  2. js 将json字符串转换为json兑现

    在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ &quo ...

  3. <?php>慢慢写一些php的cookie问题<?>

    写网站是个爬坑的过程,在你设计完功能之后,就会发现:卧槽,这个怎么实现?你妹,这个能实现么? 进了公司分工明确还好说(= =学长们都这么说),在学校自己没事写一些项目的话只能自己爬坑了. 蹬蹬瞪蹬,登 ...

  4. C 封装一个简单二叉树基库

    引文 今天分享一个喜欢佩服的伟人,应该算人类文明极大突破者.收藏过一张纸币类型如下 那我们继续科普一段关于他的简介 '高斯有些孤傲,但令人惊奇的是,他春风得意地度过了中产阶级的一生,而  没有遭受到冷 ...

  5. ED/EP系列3《基本指令》

    Ø --APPLICATIONBLOCK(应用锁定): Ø --APPLICATION UNBLOCK(应用解锁): Ø --CARDBLOCK(卡片锁定): Ø --EXTERNAL AUTHENT ...

  6. Environment 类

    提供有关当前环境和平台的信息以及操作它们的方法. 此类不能被继承. using System; using System.Collections; using System.Collections.G ...

  7. hdu 5311 Hidden String

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5311 Hidden String Description Today is the 1st anniv ...

  8. JavaScript高级程序设计之动态脚本及动态样式

    1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createEle ...

  9. ifstat-网络接口监测工具

    ifstat-网络接口监测工具 http://gael.roualland.free.fr/ifstat/ ifstat is a tool to report network interfaces ...

  10. ubuntu下xampp的安装

    转载:http://blog.csdn.net/zhoushengchao/article/details/6006584 首先,请从www.xampp.org下载最新版XAMPP.然后,将安装文件服 ...