zoukankan      html  css  js  c++  java
  • 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%") } }); } }   

    效果图:

  • 相关阅读:
    SpringBoot第十七篇:定时任务
    20年研发管理经验谈(十)
    SpringBoot第十六篇:自定义starter
    20年研发管理经验谈(九)
    20年研发管理经验谈(八)
    20年研发管理经验谈(七)
    SpringBoot第十五篇:swagger构建优雅文档
    CSS聊天气泡
    Java单例模式
    Java观察者模式
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9522557.html
Copyright © 2011-2022 走看看