借助于spry实现Tab面板

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_34417183

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/93wei/archive/2011/10/24/2222462.html

本文详细介绍了如何利用SpryWidget库在HTML页面中实现圆角图，并通过TabbedPanels交互效果展示不同内容区域，提供了具体的代码示例和CSS样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

中间用了滑动门效果来实现圆角图。

最终实现效果图：

原图：

下面是html页面中的代码：

<!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 id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><span>Home</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span>Web Dev</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span>Web Design</span></li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">内容 1</div>
    <div class="TabbedPanelsContent">内容 2</div>
    <div class="TabbedPanelsContent">内容 3</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

下面是css样式中的代码：

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
.TabbedPanelsTab {
display:block;
height:30px;
position: relative;
top: 2px;
float: left;
padding:0px 0px 0px 15px;
margin: 0px;
background:url(../img/dq.gif) left top;
font: bold 0.7em sans-serif;
list-style: none;
cursor: pointer;
color:#fff;
font:bold 14px Arial;
-moz-user-select: none;
-khtml-user-select: none;

}
.TabbedPanelsTab span{
display:block;
background:url(../img/dq.gif) right top;
padding:7px 25px 7px 0;
}
.TabbedPanelsTabHover {
background:url(../img/jg.gif);
color:#900;
}
.TabbedPanelsTabHover span{
display:block;
background:url(../img/jg.gif) right top;
padding:7px 25px 7px 0;
}
.TabbedPanelsTabSelected {
background:url(../img/dj.gif);
color:#900;
}
.TabbedPanelsTabSelected span{
display:block;
background:url(../img/dj.gif) right top;
padding:7px 25px 7px 0;
}
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #000;
border-bottom: solid 1px #000;
border-top: solid 1px #000;
border-right: solid 1px #000;
background-color: #fff;
}
.TabbedPanelsContent {
padding: 4px;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}