• easyui easyui-accordion的使用和在tab切换时没有样式


    1.easyui-accordion的使用

    <div id="aa" class="easyui-accordion" style="300px;height:200px;">
        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
    		<h3 style="color:#0099FF;">Accordion for jQuery</h3>
    		<p>Accordion is a part of easyui framework for jQuery.
    		It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
    		content2
        </div>
        <div title="Title3">
    		content3
        </div>
    </div>
    

    2.在tab切换时失去样式,只需要在切换时初始化就可以了

    tab标签中使用accordion:

    <ul id='alarmDetails' class="nav nav-tabs">
        <li class='active'>
    		<a href="#Tab1" data-toggle="tab" name="mainTab"  href='javascript:void(0)'>Tab1</a>
    	</li>
    	<li >
    		<a href="#Tab2" data-toggle="tab" name="mainTab" href='javascript:void(0)'>Tab2</a>
    	</li>
    </ul>
    <div id="tabContent"  class="tab-content">														
    	<div  class="tab-pane fade  in active" id="Tab1">
    		tab1的内容
        </div>
        <div  class="tab-pane fade" id="Tab2">
            <div id="aa" class="easyui-accordion" style="300px;height:200px;">
    		    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
    				<h3 style="color:#0099FF;">Accordion for jQuery</h3>
    				<p>Accordion is a part of easyui framework for jQuery.
    				It lets you define your accordion component on web page more easily.</p>
    		    </div>
    		    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
    				content2
    		    </div>
    		    <div title="Title3">
    				content3
    		    </div>
    		</div>
        </div>
    </div>    

    切换事件:

    //tab标签的改变进行表格的初始化
    $('a[name="mainTab"]').on('shown.bs.tab', function(e) {
    	$(this).tab("show");
    	// 获取已激活的标签页的名称
    	var selectTabName = $(e.target).text();
    	selectTab(selectTabName);
    });
    //初始化标签内容
    function selectTab(tab){
    	if(tab == 'Tab2' ){
    		//初始化pannel列表
    		$('#aa').accordion({
                //动画 animate:true, //事件的调用 onSelect:function(title, index){ $('#aa').css("width","100%") } }); } }   

    效果图:

  • 相关阅读:
    周鸿祎笔录
    set multiset 集合实现众数的统计
    栈实现 汉诺塔 操作是否符合规范
    优先队列----解决排序问题
    字符串的应用(续一)
    优先队列 的实例(未完----待续)
    字符串的应用
    栈实现括号
    Jave垃圾回收算法
    Java 按代回收垃圾以及回收算法
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9522557.html
Copyright © 2020-2023  润新知