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. 4）Java容器类相关知识

    1>Array 和 Arrays:   Arrays:用来操作array的工具类,其中包含一组static函数:      equals():比较两个array 是否相等. array拥有相同元 ...

  2. Oracle 直方图理论

    一.何为直方图 直方图是一种几何形图表,它是根据从生产过程中收集来的质量数据分布情况,画成以组距为底边.以频数为高度的一系列连接起来的直方型矩形图,如图所示 二.ORACLE 直方图 在Oracle中 ...

  3. python之ftplib库

    检测ftp是否可用 #!/usr/bin/python #coding:utf-8 from ftplib import FTP def ftp_open(ip,user,passwd): try: ...

  4. 谈谈对MVC的理解

    MVC是Model-View-Controler的简称,即模型-视图-控制器.其实MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC中的模型.视图.控制器它们分别承担着不同的任务 ...

  5. EXCLE图形插入实例

    根据所给名称找到相应图片,并进行导入. 代码如下: Sub Import_picture() For Each shap In Sheet1.Shapes '在sheet1中的图片对象进行循环 If ...

  6. 'mysql.column_stats' doesn't exist and Table 'mysql.index_stats' doesn't exist

    在生产库MariabDB中修改字段类型,提示如下错误:​Table 'mysql.column_stats' doesn't existTable 'mysql.index_stats' doesn' ...

  7. Socket(2)

    UDP: UDP协议没有socket之间的虚拟链路,也就是说没有“握手”阶段,只是发送接收. 可以想象成直播,直播时如果中间网络不好,不会事后重新播放之前的,而是直接跳过. 也就是说一方只负责发送,一 ...

  8. Redis到底该如何利用？【转自：http://www.cnblogs.com/capqueen/p/HowToUseRedis.html】

    Redis是个好东西,经过上两个星期的研究和实践,目前正在项目里大规模的替换掉原来的本地内存cache.但是替换过程中却发现,Redis这东西高端,大气上档次,似乎不是我想象里的使用方法. 在没有深入 ...

  9. Swift计算文本宽高

    iOS 8 开始可以配合 AutoLayout 自动估算文本的高度,但是当 Cell 比较复杂的时候,还会需要手动去计算.首先声明一个样式 var TextStyle : [String : NSOb ...

  10. OC中实例变量可见度、setter、getter方法和自定义初始化方法

    在对类和对象有一定了解之后,我们进一步探讨实例变量的可见度等相关知识 实例变量的可见度分为三种情况:public(共有),protected(受保护的,默认),private(私有的),具体的不同和特 ...