大头盆盆

导航

Accordion - 手风琴

//手风琴效果
<div style="overflow:hidden;height:400px;width:948px;">
    <div class="J_TWidget" data-widget-config="{&quot;triggerType&quot;:&quot;mouse&quot;,&quot;autoplay&quot;:true,&quot;triggerCls&quot;:&quot;pan_trg&quot;,&quot;panelCls&quot;:&quot;pan_content&quot;,&quot;multiple&quot;:false,&quot;hasTriggers&quot;:true}" data-widget-type="Accordion">
        <div style="height:400px;float:left;margin-left:0px;width:950px;">
            <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#0088FF;">
                <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span>
            </div>
            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:block;width:830px;">
                 <a href="" target="_blank"> <img  src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
            </div>
            <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#FF8000;">

                <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span>

            </div>
            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">
                 <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
            </div>
            <div  class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#008000;">

                <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a>

            </div>
            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">
                 <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
            </div>
            <div  class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#606060;">

                <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a>

            </div>
            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">
                 <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>
            </div>
        </div>
    </div>
</div>


triggerCls    自定义值    主列表的class值
panelCls    自定义值    列表所对应的内容列表的class值
triggerType    mouse/click (默认值:click)    触发方式——
mouse:鼠标经过触发
click:鼠标点击触发

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

 

posted on 2016-07-29 11:00  大头盆盆  阅读(267)  评论(0编辑  收藏  举报