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. 【转】 BSS段 数据段 代码段 堆栈 指针 vs 引用

    原文:http://blog.csdn.net/godspirits/article/details/2953721 BSS段 数据段 代码段 堆栈 (转+) 声明:大部分来自于维基百科,自由的百科全 ...

  2. 发布web项目时，忽略指定文件夹或文件

    参考:http://blogs.msdn.com/b/webdev/archive/2010/04/22/web-deployment-excluding-files-and-folders-via- ...

  3. servlet中的cookie

    cookie的机制是:从客户端(浏览器)发送请求到服务器,然后服务器把接受的信息回写到客户端,这个信息在客户端跟服务器之间进行交互. 下面是一个创建cookie的小案例 //如何创建cookie pa ...

  4. Git 设置别名[alias]

    工作中我经常设置一下别名... 别名就在[alias]后面,要删除别名,直接把对应的行删掉即可. 而当前用户的Git配置文件放在用户主目录下的一个隐藏文件.gitconfig中: $ cat .git ...

  5. hdu 5233 Gunner II

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=5233 简单题,stl水之... #include<algorithm> #include& ...

  6. Go语言工程结构

    Go是一门推崇软件工程理念的编程语言. Go的代码必须放在GOPATH目录下,它应该包含三个子目录: src:用于以代码包的形式组织并保存Go源码文件.应该分为三类:库源码文件.命令源码文件.测试源码 ...

  7. openssl AES加密以及padding

    好习惯,先上代码再说事 加密 void AesEncrypt(unsigned char* pchIn, int nInLen, unsigned char *ciphertext, int & ...

  8. Nginx Gzip 压缩配置

    Nginx Gzip 压缩配置 随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-Z ...

  9. 自学asp.net mvc(一)

    之前一直做asp.net的webform,现在想学习一下mvc,把自学中遇到的问题记录到博客. 一.codeplex上托管代码 1. 2. 3. 4. 5. 6. 7. 8. 9.

  10. NUnit Test Adapter----单元测试需要安装这个插件

    最近通过VS2012集成Nunit的测试用例,想直接在VS中查看结果,分析测试覆盖率:所以找到了NUnit Test Adapter插件:该插件下载地址: http://visualstudiogal ...