easyui easyui-accordion的使用和在tab切换时没有样式
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切换时没有样式的更多相关文章
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
- element--ui使用tab切换时如何获取当前对象的id或者其他属性
1. 问题 当使用tab切换时,部分特殊场景需要获取当前元素的类名或者id. 2.解决思路,tab切换是绑定函数,函数会传递过去当前对象,通过当前对象获取对象属性 vue部分代码:本项目是在vue-c ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
- react 实现tab切换 三角形筛选样式
这次使用的是react的class 类组件 import React, { Component } from 'react' import { LeftOutline, SearchOutli ...
- jQuery带tab切换搜索框样式代码
效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...
- echarts在tab切换时容器宽度设置为100%,只展示100px
在 mychart.setOption(option); 后面加上 mychart.resize(); 即可
- 谷歌内核浏览器 iframe内容的 tab切换 滚动条消失
问题: 新版本的-webkit- 内核浏览器 在tab切换时,iframe 内容区 丢失滚动条 如下图 (虽然滚动条位置还在,可以垂直滚动,但滚动条不见了) 解决思路: 让iframe重新计算宽高,重 ...
随机推荐
- js进度条插件pace.js
主要用到themes文件夹和pace.js文件
- 如何分页爬取数据--beautisoup
'''本次爬取讲历史网站'''#!usr/bin/env python#-*- coding:utf-8 _*-"""@author:Hurrican@file: 分页爬 ...
- 【JavaScript框架封装】数据类型检测模块功能封装
数据类型检测封装后的最终模块代码如下: /*数据类型检验*/ xframe.extend(xframe, { // 鸭子类型(duck typing)如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭 ...
- ios风格的时间选择插件
1.起因 在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子. 2.插件效果 3.插件依赖以及安装使用 插件依赖 ...
- Laravel的维护模式
1.开启维护模式: php artisan down 2.关闭维护模式:php artisan up 3.当应用处于维护模式时,所有的路由都会指向一个自定义的视图.这对于更新应用或执行维护任务时临时 ...
- 马上着手开发ios应用程序
https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOSCh/chapters/Introd ...
- C#中的DES加密
publicstaticstringEncryptString(string sInputString,string sKey,string sIV) { try { byte[] data =Enc ...
- 计算机网络系统--常用DOS命令
01.名称:md 用法:md “文件夹名” 用处:批量建立文件夹 02.关机命令 shutdown At 18:00 shutdown –s 18:00关机 shutdown -s -t 3 ...
- NYOJ 589 糖果
糖果 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 topcoder工作室的PIAOYIi超级爱吃糖果.如今他拥有一大堆不同种类的糖果.他准备一口气把它们吃完.但是 ...
- 【树形DP】 HDU 2196 Computer
题意:求节点间的最大距离 先DFS一次 记录下 每一节点的子树下的最大距离(DP[ u ] [ 0 ])和第二大距离(DP[ u ] [ 1 ]) 用DP[ v ] [ 2 ] 表示由v的父节点来的最 ...