sprytabbedpanels.js库之在页面中插入Tabbed Panels

  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>

你可能感兴趣的:(Panel)