当前位置: 主页 > 学习教程 > 网页设计教程 >
周浦电脑培训
南汇电脑培训-淘宝sdk手风琴效果代码编写

所需DOM结构

需要将菜单中每个标题及其内容分别包含在对应的容器中,最外层容器有唯一的ID来标示组件。
 

<div class="J_TWidget section">

    <div class="ks-switchable-trigger ks-active"><h3>标题A</h3></div>

    <div class="ks-switchable-panel">

            内容AAAAA

    </div>

    <div class="ks-switchable-trigger"><h3>标题B</h3></div>
		<div class="ks-switchable-panel" style="display:none;">

			内容BBBBB

		</div>

    <div class="ks-switchable-trigger"><h3>标题C</h3></div>

		<div class="ks-switchable-panel" style="display:none;">

			内容CCCCC

		</div>

    <div class="ks-switchable-trigger last-trigger"><h3>标题D</h3></div>

		<div class="ks-switchable-panel last-panel" style="display:none;">

			内容DDDDD

		</div>

</div>

组件调用方法

<div class=”J_TWidget”  data-widget-type=”Accordion”  data-widget-config=”{

             'triggerType': 'click',

             'multiple':true

     }”>

             <!--  code  -- >
</div>

配置参数列表

配置参数 参数可选值 作用说明
triggerCls 自定义值 主列表的class值
panelCls 自定义值 列表所对应的内容列表的class值
triggerType mouse/click (默认值:click) 触发方式——

mouse:鼠标经过触发
click:鼠标点击触发
 

multiple true/false (默认值:false) 是否同时支持多面板展开
hasTriggers true/false (默认值:true) 是否设置触发点

 

分享到: