1.easyui-accordion的使用

<div id="aa" class="easyui-accordion" style="width: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="width: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%")
}
});
}
}   

效果图:

easyui easyui-accordion的使用和在tab切换时没有样式的更多相关文章

  1. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  2. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  3. element--ui使用tab切换时如何获取当前对象的id或者其他属性

    1. 问题 当使用tab切换时,部分特殊场景需要获取当前元素的类名或者id. 2.解决思路,tab切换是绑定函数,函数会传递过去当前对象,通过当前对象获取对象属性 vue部分代码:本项目是在vue-c ...

  4. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  5. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  6. react 实现tab切换 三角形筛选样式

    ​ ​ 这次使用的是react的class 类组件 import React, { Component } from 'react' import { LeftOutline, SearchOutli ...

  7. jQuery带tab切换搜索框样式代码

    效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...

  8. echarts在tab切换时容器宽度设置为100%,只展示100px

    在 mychart.setOption(option); 后面加上 mychart.resize(); 即可

  9. 谷歌内核浏览器 iframe内容的 tab切换 滚动条消失

    问题: 新版本的-webkit- 内核浏览器 在tab切换时,iframe 内容区 丢失滚动条 如下图 (虽然滚动条位置还在,可以垂直滚动,但滚动条不见了) 解决思路: 让iframe重新计算宽高,重 ...

随机推荐

  1. 洛谷P1297 [国家集训队]单选错位_数学期望

    考虑第 iii 位, 那么当前共有 a[i]a[i]a[i] 种选项,那么当前选项正确的情况就是下一个被误填的答案与当前答案相同.换句话说,当前答案一共有 a[i]a[i]a[i] 种可能,而下一个答 ...

  2. 【图像处理】使用OpenCV实现人脸和行人检测

      OpenCV全称是Open source Computer Vision Library(开放源代码计算机视觉库),是一个用于图像处理.分析.机器视觉方面的开源函数库,提供了很多图像处理的工具和可 ...

  3. 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...

  4. svn查看工程版本库的url地址

    打开cmd,cd到工程目录,使用svn的命令:svn info 完.

  5. Inflation System Properties

    https://blogs.oracle.com/buck/inflation-system-properties I wanted to write a quick post about the t ...

  6. C#中的DES加密

    publicstaticstringEncryptString(string sInputString,string sKey,string sIV) { try { byte[] data =Enc ...

  7. crm2013使用图片字段

    在CRM2013能够加入图片字段(一个实体仅仅能加入一个图片字段) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveV9mMTIz/font/5a6L5L2 ...

  8. nyoj 119 士兵杀敌(三) 【线段树】【单点更新】

    题意:. .. 策略如题. 思路:我们先如果仅仅求某一区间的最大值.我们仅仅须要利用线段树的模板.仅仅须要初始化和询问的时候小小的改动一下.改成祖先结点储存的不再是子节点的和而是两个子节点之间的最大值 ...

  9. WPF 基础到企业应用系列2——WPF前世今生

    1.开篇前言       非常多时候了解一项新技术的历史和趋势往往比这项技术的本身价值还要重要.WPF作为一项新技术(已经三年多了.或者应该叫老技术了).我们都有必要了解它的来龙去脉,尤其是公司的CT ...

  10. 编写函数int count_number_string(char str[])和函数int maxnum_string(char str[])

    题目如图: 这里不再赘述 代码: //字符串中统计与查询 //杨鑫 #include <stdio.h> #include <stdlib.h> #include <st ...