用spry做折叠面板

在基于Spry的基础上实现了Tab面板之后，再来制作一个折叠面板的页面，效果如图所示。图中一共有3个折叠面板，每个面板都有一个标题，单击一个标题，就可以实现面板的折叠隐藏或展开。图1为折叠起来的效果，2为展开后的效果。

   

                            1

                              2

以上两张图黑色的均为鼠标经过时的颜色。制作折叠面板的html代码如下：

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>//这是链接javascript文件的代码
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />//这是链接css文件的代码
下面是正文：
<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">4岁男孩没做好操老师锯其手腕</div>
  <div class="CollapsiblePanelContent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其实对4岁的孩子来说调皮本是其天真烂漫童年的一种表现，人们还常说，孩子小时候调皮点是好事，是长大后灵活、开朗的一种反应。当然调皮的孩子对于幼儿教师来说确实不好管理，面对调皮的孩子，幼儿老师应该循循善诱、因势利导，再加喋喋不休的言教用以教化。对于调皮的孩子，老师更不能意气用事，动不动就动粗，更可怕的是采取一些另类的手段对孩子加以摧残。而这个时期的孩子正是性格的塑造期和心灵的成长期，老师如果采取类似用钢锯条锯手腕的方法来惩罚学生，会给孩子的心灵造成严重无法弥补的创伤，可能会使使得孩子的性格变得更加腼腆、内向，更怕的是可能造成恐世心理。。 </div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">男童被老师锯破手腕续</div>
  <div class="CollapsiblePanelContent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;因为做操不听话，西安城东一幼儿园老师对一名4岁男童用锯条割手腕的方式进行处罚，导致男童受伤。昨日本报A6版对此事报道后，引起社会热议。

　　<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 两名当事老师已被幼儿园开除。灞桥区教育局表示，将召集辖区所有的民办幼儿园园长开会，加强师德教育，已决定对该幼儿园园长做出停职处分。

　　　<br />
　　昨日上午，记者再次来到位于米秦路的灞桥区苏王早慧幼儿园，得知10月23日晚，幼儿园紧急召开全园教师会议，除了用锯条割伤孩子的主班老师刘老师被开除，没有及时制止的配班老师王老师也被开除。

　　<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 昨日，两人给学校各留一份检讨后，已联系不上。据幼儿园高园长介绍，刘老师和王老师都在20岁左右，均未婚。

　　据一些老师讲，幼儿园大部分教师已结婚，跟当事老师接触较少，但对她俩印象不错，“性格开朗，就是性子有点急！”一位老师说。

　　<br />
 当事老师“比赛总要争第一”

　　<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 另一位老师表示，刘老师很要强，在幼儿园内的各种比赛中都要争第一，即使排第二也会很不服气。“发生这样的事，让人很惊讶。”

　　<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 两人的检讨书上，充满了“后悔”、“歉意”等字眼。据知情者介绍，事发当天(21日)下午4时许，幼儿园物业人员修理桌凳时，将锯条忘记在事发班级中，恰好当天是做操彩排，急于在月底比赛中拿第一名的刘老师看见4岁的明明不听话，便拿锯条吓唬，没想到失手伤了孩子。

　　<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 高园长说，两人都是幼儿师范专业毕业，并取得幼教资格证等从业资格。当记者提出查看两人资格证时，高园长称已被两人拿走。同时，她承认幼儿园管理上存在问题。 </div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="0">几何结构</div>
  <div class="CollapsiblePanelContent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;福利卡上的纠纷拉伤将大幅拉升阶段浪费空间按时到了附近拉客速度拉萨的减肥了撒打开机房了建设大楼附近的萨拉客服经理 艾萨拉的咖啡加拉斯的减肥了卡斯觉得浪费空间按死了阿里山的减肥拉萨的减肥了刷卡缴费</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>

 

css样式和javascript是自动生成的而做成圆角效果只是在css样式稍微改动一下即可，而javascript中的代码不用变动。

以下是css样式代码：

.CollapsiblePanel {
 width:300px;
 margin: 0px;
 padding: 0px;
}
.CollapsiblePanelTab {
 font: bold 1em Arial;
    color:#630;
 background:url(../img/ys.gif) no-repeat;
 line-height:30px;
 margin: 0px;
 padding: 2px 30px;
 cursor: pointer;
 -moz-user-select: none;
 -khtml-user-select: none;
}
.CollapsiblePanelContent {
 margin: 0px;
 padding: 0px;
}
.CollapsiblePanelTab a {
 color: black;
 text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
 background:url(../img/dkys.gif) no-repeat;
}

.CollapsiblePanelClosed .CollapsiblePanelTab {
}
.CollapsiblePanelTabHover  {
 color:#fff;
 background:url(../img/ysjg.gif) no-repeat;
}
.CollapsiblePanelOpen .CollapsiblePanelTabHover{
 background:url(../img/dkjg.gif) no-repeat;
 color:#fff;
 }

转载于:https://www.cnblogs.com/93wei/archive/2011/10/25/2224236.html