竖竞选项卡式面板的实现
日期：2014-05-17 浏览次数：20775 次
竖直选项卡式面板的实现
前面的话：
我是html的初学者，懂得一些html的基本知识。最近开始学css，不会JavaScript。了解到adobe dw cs5的插入->spry有选项卡式面板的设计，对这个很感兴趣。但是发现默认的是tab水平排列在上面的。然而多数网站都是tab竖直排列在网页的左端。于是开始寻找修改spry插入的选项卡面板，以适应需求。
考虑到spry默认生成的选项卡式面板网页里已经包含了垂直的样式，但是大框架虽然有，直接运行则很不好看，因为只有tab竖直排列了，而内容在tab的下边而不是右侧。
实践：
新建文件，并插入spry选项卡式面板后，dw将生成三个文件：name.html（是主文件，文件名随意），SpryTabbedPanels.css，SpryTabbedPanels.js。在这里我们只修改name.html和SpryTabbedPanels.css，而js文件不动（因为我不会js，惭愧...）
在name.html中，只在选项卡面板的div前再套一层div，<div class="VTabbedPanels">...</div>，这层div完全是配合spry本身提供的竖直排列功能的，因此class的名字最好不要改。在本文件中修改的其他部分就是网页的内容了，没有其他标签了（至多添加一个无关痛痒的<p>标签，如果内容段落多的话）。于是name.html的代码如下：
前面的话：
我是html的初学者，懂得一些html的基本知识。最近开始学css，不会JavaScript。了解到adobe dw cs5的插入->spry有选项卡式面板的设计，对这个很感兴趣。但是发现默认的是tab水平排列在上面的。然而多数网站都是tab竖直排列在网页的左端。于是开始寻找修改spry插入的选项卡面板，以适应需求。
考虑到spry默认生成的选项卡式面板网页里已经包含了垂直的样式，但是大框架虽然有，直接运行则很不好看，因为只有tab竖直排列了，而内容在tab的下边而不是右侧。
实践：
新建文件，并插入spry选项卡式面板后，dw将生成三个文件：name.html（是主文件，文件名随意），SpryTabbedPanels.css，SpryTabbedPanels.js。在这里我们只修改name.html和SpryTabbedPanels.css，而js文件不动（因为我不会js，惭愧...）
在name.html中，只在选项卡面板的div前再套一层div，<div class="VTabbedPanels">...</div>，这层div完全是配合spry本身提供的竖直排列功能的，因此class的名字最好不要改。在本文件中修改的其他部分就是网页的内容了，没有其他标签了（至多添加一个无关痛痒的<p>标签，如果内容段落多的话）。于是name.html的代码如下：
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档 </title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"> </script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="VTabbedPanels">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Beijing </li>
<li class="TabbedPanelsTab" tabindex="0">Shanghai </li>
<li class="TabbedPanelsTab" tabindex="0">Tianjin </li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"> <p>Beijing, also known as Peking, is a metropolis in northern China, and the capital of the People's Republic of China. Governed as a municipality under direct administration of the central government, Beijing borders Hebei Province to the north, west, south, and for a small section in the east, and Tianjin Municipality to the southeast. Beijing is one of the Four Great Ancient Capitals of China. </p>
<p>Beijing is divided into 16 urban and suburban districts and two rural counties. Beijing is a major transportation hub, with dozens of railways, roads and motorways passing through the city. It is also the destination of many international flights arriving in China. Beijing is recognized as the political, educational, and cultural center of the People's Republic of China, while Shanghai and Hong Kong predominate in economic fields. The city hosted the 2008 Olympic Games. </p>
<p>Few cities in the world besides Beijing have served as the political and cultural centre of an area as immense as China for so long. The Encyclop?dia Britannica describes it as "one of the world's great cities," and declares that the city has been an integral part of China's history for centuries; there is scarcely a major building of any age in Beijing that doesn't have at least some national historical significance. Beijing is renowned for its opulent palaces, temples, and huge stone walls and gates. Its art treasures and universities have long made the city a centre of culture and art in China. </p> </div>
<div class="TabbedPanelsContent">
<p>Shanghai is the most populous city in the People's Republic of China, which is the 10th most populous metropolitan areas in the world. A global city, Shanghai exerts influence over global commerce,
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
