印艺天空网站上-记spry可折叠面板用法20090609

20090609-印艺天空-网站

初次用到drwamweaver cs3 中的 spry可折叠面板 修改成 左侧子导航菜单。

用后方知,drwamweaver cs3 中的 spry可折叠面板强悍,并适合网页设计者使用豪无障碍实现想要的折叠效果。

1,初探drwamweaver cs3 中的 spry可折叠面板,新建一文档,插入“spry可折叠面板”获取页面源代码为:

<div id=”CollapsiblePanel1″ 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”);
//–>
</script>

高级用法就是:直接套用drwamweaver cs3 生成的代码。JS和CSS也是自己生成。

css:基本自己从新再写,不会JS惹在CSS都不想再去写,那就只能加强设计去了。

<div id=”CollapsiblePanel1″ class=”CollapsiblePanel”>
<div class=”CollapsiblePanelTab” tabindex=”0″><span>解决方案</span></div>
<div class=”CollapsiblePanelContent”>
<ul  id=”mune_sub_div”class=”left_menu_sub”>
<li><span><a href=”4.1.html” title=”#”>商务按需印刷(POD)</a></span></li>
<li><span><a href=”4.2.html” title=”#”>可变数据印刷(VDP)</a></span></li>
<li><span><a href=”4.3.html” title=”#”>工业产品印刷</a></span></li>
<li><span class=”sub_dangqian”><a href=”4.4.html” title=”#”>个性化产品服务</a></span></li>
</ul>
</div>
</div>
<script type=”text/javascript”>
<!–
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel1”);
//–>
</script>

基本就结束了,说明下实际应用中的参数详解:

                        <script type=”text/javascript”>
<!–
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel1“);
//–>
</script>

CollapsiblePanel1:模式状态是显示,菜单是打开状态。若想默认是关闭状态就添加上个属性:{contentIsOpen:false}

右侧默认是关闭。

                        <script type=”text/javascript”>
<!–
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel1”, {contentIsOpen:false});
//–>
</script>

同一页面添加两个或更多可折叠面板,页面中源代码:

<div id=”CollapsiblePanel1″ class=”CollapsiblePanel”>
<div class=”CollapsiblePanelTab” tabindex=”0″><span>服务项目</span></div>
<div class=”CollapsiblePanelContent”>
<ul  id=”mune_sub_div”class=”left_menu_sub”>
<li><span><a href=”2.1.html” title=”#”>彩色数码印刷</a></span></li>
<li><span><a href=”2.2.html” title=”#”>黑白数码快印</a></span></li>
<li><span><a href=”2.3.html” title=”#”>可变数据印刷</a></span></li>
<li><span><a href=”2.4.html” title=”#”>写真喷绘裱版</a></span></li>
<li><span><a href=”2.5.html” title=”#”>创意设计制作</a></span></li>
<li><span><a href=”2.6.html” title=”#”>文本装订快递</a></span></li>
<li><span><a href=”2.7.html” title=”#”>个性印品制作</a></span></li>
<li><span><a href=”2.8.html” title=”#”>网络数码快印</a></span></li>
</ul>
</div>
</div>
</li>
<li><span><a href=”2.9.html” title=”#”>服务流程</a></span></li>
<li><span><a href=”2.10.html” title=”#”>设备介绍</a></span></li>
<li><span><a href=”2.11.html” title=”#”>产品展示</a></span></li>
<li><span><a href=”2.12.html” title=”#”>联系方式</a></span></li>
<li>
<div id=”CollapsiblePanel2″ class=”CollapsiblePanel”>
<div class=”CollapsiblePanelTab” tabindex=”0″><span>店面介绍</span></div>
<div class=”CollapsiblePanelContent”>
<ul  id=”mune_sub_div”class=”left_menu_sub”>
<li><span><a href=”2.13.html” title=”#”>北京西城店</a></span></li>
<li><span><a href=”2.13.2.html” title=”#”>上海恒丰店</a></span></li>
<li><span><a href=”2.13.1.html” title=”#”>广渠门总店</a></span></li>
</ul>
</div>
</div>
<script type=”text/javascript”>
<!–
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel1”, {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel2”, {contentIsOpen:false});
//–>
</script>

完毕。

发表评论