利用spry制作可折叠面板

首先要制作如下的图像：

bottom_q.gif

bottom_s.gif

top_q.gif

top_s.gif

然后新建一个html文档，将这个文档保存，再插入Spry折叠式面板。

html文档代码:

<title>无标题文档</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
  <div class="CollapsiblePanelContent">内容</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
  <div class="CollapsiblePanelContent">内容</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
  <div class="CollapsiblePanelContent">内容</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1",{contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2",{contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3",{contentIsOpen:false});
//-->
</script>
</body>
</html>

SpryCollapsiblePanel.css代码：

.CollapsiblePanel {
 width:300px;
 margin:0px;
 padding:0px;
}

.CollapsiblePanelTab {
 font: bold 1em Arial;
 color:#630;
 background:url(../top_q.gif) no-repeat;
 line-height:30px;
 height:30px;
 margin:0px;
 padding:2px 30px;
 cursor:pointer;
 -moz-user-select: none;
 -khtml-user-select: none;
}

.CollapsiblePanelContent {
 clear: both;
 border:solid 1px #000;
 padding:0px 280px 20px 0;
 margin:0 200px 0 0 ;
 } 

.CollapsiblePanelTab a {
 color: black;
 text-decoration: none;
}

.CollapsiblePanelOpen .CollapsiblePanelTab {
 background:url(../top_s.gif) no-repeat;
}

.CollapsiblePanelTabHover{
 background:url(../top_q.gif) no-repeat;
 color:#FFF;
}
.CollapsiblePanelOpen .CollapsiblePanelTabHover {
 background:url(../bottom_s.gif) no-repeat;
 color:#FFF;
}

效果如图下图所示：

posted on 2011-10-30 17:23  雨馨  阅读(346)  评论(0)    收藏  举报