spry可折叠面板

这里我们要实现的是一个，可折叠面板，效果如图所示：

首先我们建立一个HTML文件，保存后，在工具栏找到折叠面板,如图所示：

连续插入几个这样的面板，就会出现多个可折叠面板了

要做到如图这种效果首先我们要准备四个背景图片：

首先我们来研究一下HTML代码，这里也需要JavaScript文件和css文件。

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

然后我们只需要在原有的CSS基础上去改变它的样式表就行了

下面是修改以后的CSS代码，这里就不一一说明了

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
500px;
}

这里是最基础的设置

.TabbedPanelsTab {
display:block;
height:30px;
position: relative;
top: 2px;
float: left;
padding:0px 0px 0px 15px;
margin:0;
font: bold 14px Arial;
background:url(../2.gif);
list-style: none;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
color:#fff;
}
.TabbedPanelsTab span{
display:block;
background:url(../2.gif) right top;
padding:7px 25px 7px 0;
}

这里对于span的设置，是利用的滑动门技术HTML代码中添加了标签如下：

<div class="AccordionPanelTab"><span>Web Dev</span></div>

其他几个同样设置

.TabbedPanelsTabHover{
background:url(../1.gif);
color:#900;
}
.TabbedPanelsTabHover span{
display:block;
background:url(../1.gif) right top;
padding:7px 25px 7px 0;
}

设置鼠标经过时候的效果

.TabbedPanelsTabSelected {
background:url(../3.gif);
color:#900;
}
.TabbedPanelsTabSelected span{
display:block;
background:url(../3.gif) right top;
padding:7px 25px 7px 0;
}

设置点选以后的效果

其他没有提到过的地方，就照原样不动。到这里我们就可以实现最终的效果了。

总结

以上是生活随笔为你收集整理的spry可折叠面板的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。