【jQuery 冻结任意行列】冻结任意行和列的jQuery插件
实现原理：
创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的div，并放置在所有div的最上层。
处理表格的滚动事件，在表格横向或者纵向滚动时，同时让相应的冻结行和冻结列也同步滚动。
说明：
首先在最外层创建一个最大的Layer的DIV用来承载以下的DIV：
冻结行列的插件设置，如果单纯冻结某行或者某列，那么总共需要创建两个DIV便可以实现；如果行列同时冻结，则需要创建四个DIV实现。
例如，此处需要行列同时冻结，则生成的页面代码如下结构：
使用操作：
1》》》先定义冻结行列的JS代码
freezeTable.js
/*
* 锁定表头和列
*
* 参数定义
* table - 要锁定的表格元素或者表格ID
* freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0
* freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0
* width - 表格的滚动区域宽度
* height - 表格的滚动区域高度
*/
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) { //获取冻结行数或者列数
if (typeof(freezeRowNum) == 'string')
freezeRowNum = parseInt(freezeRowNum)
if (typeof(freezeColumnNum) == 'string')
freezeColumnNum = parseInt(freezeColumnNum)
//获取table
var tableId;
if (typeof(table) == 'string') {
tableId = table;
table = $('#' + tableId);
} else
tableId = table.attr('id');
/**
* 生成最外层的DIV用来承载内部的四个DIV
*/
var divTableLayout = $("#" + tableId + "_tableLayout");
if (divTableLayout.length != 0) {
divTableLayout.before(table);
divTableLayout.empty();
} else {
table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
divTableLayout = $("#" + tableId + "_tableLayout");
}
/**
* 根据需要页面table定义的属性 需要冻结的行或者列 ，对应的拼接字符串用于生成不同的DIV 【如果行列同时冻结：生成总共四个DIV】【单独冻结行或列，仅需要生成两个DIV】
* 这个四个DIV都是包括数据在内，完全克隆了原本的table，
*/
var html = '';
if (freezeRowNum > 0 && freezeColumnNum > 0)
html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';
if (freezeRowNum > 0)
html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';
if (freezeColumnNum > 0)
html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';
html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';
//将div追加到页面
$(html).appendTo("#" + tableId + "_tableLayout");
var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
var divTableData = $("#" + tableId + "_tableData"); //位于最底层的【数据DIV】【第一个DIV，也就是原本的那个真身】
divTableData.append(table);
//行列同时冻结生成的【行列DIV】【第二个DIV】，一般位于左上角重叠部分
if (divTableFix != null) {
var tableFixClone = table.clone(true); //克隆1
tableFixClone.attr("id", tableId + "_tableFixClone");
divTableFix.append(tableFixClone);
}
//行冻结生成的【冻结行DIV】【第三个DIV】
if (divTableHead != null) {
var tableHeadClone = table.clone(true);//克隆2
tableHeadClone.attr("id", tableId + "_tableHeadClone");
divTableHead.append(tableHeadClone);
}
//列冻结生成的【冻结列DIV】【第四个DIV】
if (divTableColumn != null) {
var tableColumnClone = table.clone(true);//克隆3
tableColumnClone.attr("id", tableId + "_tableColumnClone");
divTableColumn.append(tableColumnClone);
}
$("#" + tableId + "_tableLayout table").css("margin", "0");
/**
* 根据冻结行数，设置行冻结的div的高度【如果行列同时冻结，则行列div也设置对应高度】
*/
if (freezeRowNum > 0) {
var HeadHeight = 0;
var ignoreRowNum = 0;
$("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
if (ignoreRowNum > 0)
ignoreRowNum--;
else {
var td = $(this).find('td:first, th:first');
HeadHeight += td.outerHeight(true);
ignoreRowNum = td.attr('rowSpan');
if (typeof(ignoreRowNum) == 'undefined')
ignoreRowNum = 0;
else
ignoreRowNum = parseInt(ignoreRowNum) - 1;
}
});
HeadHeight += 2;
divTableHead.css("height", HeadHeight);
divTableFix != null && divTableFix.css("height", HeadHeight);
}
/**
* 根据冻结列数，对冻结列DIV设置宽度【如果行列同时冻结，则行列div也设置对应宽度】
*/
if (freezeColumnNum > 0) {
var ColumnsWidth = 0;
var ColumnsNumber = 0;
$("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {
if (ColumnsNumber >= freezeColumnNum)
return;
ColumnsWidth += $(this).outerWidth(true);
ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
});
ColumnsWidth += 2;
divTableColumn.css("width", ColumnsWidth);
divTableFix != null && divTableFix.css("width", ColumnsWidth);
}
//滚动
divTableData.scroll(function () {
divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());
divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());
});
divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });
divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });
divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });
divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });
divTableFix != null && divTableFix.offset(divTableLayout.offset());
divTableHead != null && divTableHead.offset(divTableLayout.offset());
divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
divTableData.offset(divTableLayout.offset());
}
/*
* 调整锁定表的宽度和高度，这个函数在resize事件中调用
*
* 参数定义
* table - 要锁定的表格元素或者表格ID
* width - 表格的滚动区域宽度
* height - 表格的滚动区域高度
*/
function adjustTableSize(table, width, height) {
var tableId;
if (typeof(table) == 'string')
tableId = table;
else
tableId = table.attr('id');
$("#" + tableId + "_tableLayout").width(width).height(height);
$("#" + tableId + "_tableHead").width(width - 17);
$("#" + tableId + "_tableColumn").height(height - 17);
$("#" + tableId + "_tableData").width(width).height(height);
}
//返回页面的高度
function pageHeight() {
if ( /msie/.test(navigator.userAgent.toLowerCase())) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
} else {
return self.innerHeight;
}
};
//返回当前页面宽度
function pageWidth() {
if ( /msie/.test(navigator.userAgent.toLowerCase())) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
} else {
return self.innerWidth;
}
};
2》》》在需要实现冻结的界面的table中添加需要冻结的行和列数即可
gene.jsp在本页面的table标签中定义 freezeColumnNum="3" freezeRowNum="1" 冻结前三列，第一行
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>基因列表</title>
<style type="text/css" >
.pageInfo{
display: inline;
}
.table{
width: 5000px;
} .table tbody tr {
background: #C6E2FF;
}
</style>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span>
基因信息管理 <span class="c-gray en">></span>
<a href="queryAllProduct.htmls">产品列表 </a><span class="c-gray en">></span>
<a href="disease.htmls">疾病列表</a> <span class="c-gray en">></span>
<a href="gene.htmls">基因信息列表</a> <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="pd-20">
<div class="text-c">
<select class="select" id="" name="" style="width:250px">
<option value="0">疾病名称</option>
<option value="AccountInfo">基因型</option>
<option value="AdminInfo">关键字</option>
</select>
<button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查询</button>
</div>
</div> <div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a>
<a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加基因型</a></span>
</div> <!-- 分页 + table 从这里开始 由于样式采用bootstrap，所以class样式尽量使用一致的 -->
<div class="container">
<!-- 分页的第一部分 开始 -->
<div class="row" style="margin: 20px 0px 5px 10px;">
<label class="pageInfo">每页显示 </label>
<select class="form-control pageInfo" style="width: 20%">
<option>5</option>
<option selected="selected">10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
<label class="pageInfo">条</label>
</div>
<input type="hidden" value=${disease} class="beDiseaseId"/>
<div class="row gen"><!-- 采用样式row 分成一层 一层 -->
<table id="genetable" class="table table-border table-bordered table-bg table-hover table-sort table-striped" freezeColumnNum="3" freezeRowNum="1">
<thead>
<tr class="text-c">
<th><input type="checkbox" id="ch2">全选</th>
<th>疾病名称</th>
<th>基因名称<br/>【gene】</th>
<th>位置信息<br/>【location】</th>
<th>SNP<br/>【rs#】</th>
<th>突变区域<br/>【position】</th>
<th>突变信息<br/>【(ref /mut)allele】</th>
<th>影响氨基酸改变<br/>【influence】</th>
<th>风险等位基因信息<br/>【Risk allele】</th>
<th>最小等位基因频率<br/>【allele frequency】</th>
<th>基因型分布<br/>【genotype model】</th>
<th>基因型分布对应频率<br/>【genotype frequency】</th>
<th>O/R值<br/>【OR/HR value】</th>
<th>最小等位基因<br/>【minor allele】</th>
<th>case人数<br/>【case】</th>
<th>control人数<br/>【control】</th>
<th>基因序列<br/>【flanking sequence5'-3'】</th>
<th>国外分布<br/>【Foreign published】</th>
<th>单体型图<br/>【Hapmap】</th>
<th>中华8号<br/>【中华8号】</th>
<th>替代位点<br/>【替代位点】</th>
<th>替代微点风险等位基因<br/>【替代位点风险等位基因】</th>
<th>基因备注</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- 分页 第二部分 开始 -->
<div class="row">
<!-- 第二部分左边部分开始 -->
<div class="pageInfo pull-left" style="position: relative;top: 32px; font-family: Times New Roman;">当前显示第<label class="startInfo"></label>条到第<label class="endInfo"></label> 条，总共<label class="totalInfo"></label>条</div>
<!-- 第二部分右边部分 开始 -->
<div class="pageInfo pull-right">
<nav >
<ul class="pagination">
<li>
<a href="#" aria-label="Previous" style="display: none">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- 分页第二部分 结束 -->
</div> <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/H-ui.js"></script>
<script type="text/javascript" src="../js/H-ui.admin.js"></script>
<script type="text/javascript" src="../js/pageSet.js"></script>
<script type="text/javascript" src="../js/freezeTable.js"></script>
<script type="text/javascript" src="../js/geneinfo/gene/gene.js"></script>
</body>
</html>
3》》》在本页面的JS中 实现冻结代码即可
gene.js 在本JS中 定义冻结方法，在数据填充完成之后，再判断是否需要执行冻结操作，调用冻结方法即可。
【为何在数据填充完成之后才判断是否使用？】
【因为，若数据未填充即执行冻结方法，那么克隆的几个DIV中是没有table的数据的，因此冻结插件中是获取不到需要冻结的行数或者列数，那冻结就不能成功】
var indexGeneAdd;//定义一个index作为产品添加弹出窗的layer打开返回值 ，用于关闭的时候使用
var disease;
var flag = true; //设置boolean值用于判断是否已经实现冻结，如果已经实现冻结则仅需要上面的加载数据即可/如果未实现冻结，即flag为true，则上面数据加载完成就实现冻结操作
$(document).ready( function () { disease = $(".beDiseaseId").val();
disease = JSON.parse(disease);
/**
* >>>>>>>>>>>>>>>>>>>>>>以下是冻结列的插件使用>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/
/**
* 冻结列的绑定方法
*/
function freeTable(){
var table = $("table"); //获取当前table
var tableId = table.attr('id'); //table的ID之后作为参数传递
var freezeRowNum = table.attr('freezeRowNum'); //获取页面table定义的冻结行和列
var freezeColumnNum = table.attr('freezeColumnNum');
if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') {
freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth()-500, pageHeight()-350);
var flag = false;
$(window).resize(function() {
if (flag)
return ;
setTimeout(function() {
adjustTableSize(tableId, pageWidth()-500, pageHeight()-350);
flag = false;
}, 100);
flag = true;
});
}
}
/**
* 由于 冻结列是几个DIV，因此鼠标置于一行上看到的是几块， 解决光标置上一体的变化问题
*/
$(document).on("mouseover",".table-bordered tbody tr td",function(){
$(".table-bordered tbody").find("tr:eq("+$(this).parent().index()+")").find("td").css("background-color","#E6E6FA")
});
/**
* 光标移出效果变化
*/
$(document).on("mouseout",".table-bordered tbody tr td",function(){
$(".table-bordered tbody").find("tr:nth-child(odd)").find("td").css("background-color","#C6E2FF");
$(".table-bordered tbody").find("tr:nth-child(even)").find("td").css("background-color","#F9F9F9");
}); /**
* 全选按钮的点击事件
*/
$("#ch2").click(function(){
if($(this).prop("checked")){
$(this).parents("div table").parent("div").siblings().find('tbody').find("input[type='checkbox']").prop("checked",true);//让其他的几个table中checkbox也全部选中
}else{
$(this).parents("div table").parent("div").siblings().find('tbody').find("input[type='checkbox']").prop("checked",false);//让其他的几个table中checkbox也全部选中
} }); /**
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>以下是分页插件的初始化对象，绑定数据的方法>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/
/**
* 封装数据 的方法 在本页面的js中，
*/
bindData = function bindData(){
var result = page.result;
$(".table-bordered tbody").empty();
if(result != "" && result != null && result != undefined) {
var temp = "";
$.each(result, function(index, item) {
//JSON.stringify(item) 对象转化字符串
temp += "<tr class='text-c'><td><input type='checkbox' value='"+item.geneId
+"'><input type='hidden' value='"+JSON.stringify(item)
+"'/></td><td>"+disease.diseaseName
+"</td><td>"+item.geneName
+"</td><td>"+item.location
+"</td><td>"+item.snp
+"</td><td>"+item.position
+"</td><td>"+item.allele
+"</td><td>"+item.influence
+"</td><td>"+item.riskAllele
+"</td><td>"+item.alleleFrequency
+"</td><td>"+item.genotypeModel
+"</td><td>"+item.genotypeFrequency
+"</td><td>"+item.orhrvalue
+"</td><td>"+item.minorAllele
+"</td><td>"+item.caseNum
+"</td><td>"+item.controlNum
+"</td><td>"+item.flankingSequence
+"</td><td>"+item.foreignPublished
+"</td><td>"+item.hapMap
+"</td><td>"+item.theE
+"</td><td>"+item.alterSite
+"</td><td>"+item.alterSiteRisk
+"</td><td>"+item.geneCre
+"</td>";
});
$(".table-bordered tbody").append(temp);
}
page.setValue();
//设置boolean值用于判断是否已经实现冻结，如果已经实现冻结则仅需要上面的加载数据即可/如果未实现冻结，即flag为true，则上面数据加载完成就实现冻结操作
if(flag){
freeTable();
flag = false;
}
} /**
* 实例化一个分页组件的 对象
*/
page = new page("queryAllGene.htmls?diseaseId="+disease.diseaseId, bindData);
page.pageSet(); /**
* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>增加 + 删除>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*/
/**
* 添加基因 页面
*/ $(".btn-primary").click( function(){
indexGeneAdd = layer.open({
type: 2,
title: "添加基因信息",
content: 'geneadd.htmls',
area: ['1200px', '900px']
});
}); } );
如此既可以实现冻结行列的操作！！！！
【jQuery 冻结任意行列】冻结任意行和列的jQuery插件的更多相关文章
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- jQuery实现表格冻结行和列
前几天,遇到一个需求是要将表格的前几行和前几列冻结即固定,就是在有滚动条的情况下,保持那几行和那几列固定,这个需求其实是一个非常常见的需求,因为在涉及好多行和列时,在拖动滚动条时,我们需要知道每行每列 ...
- [No000018E]Vim快速跳转任意行、任意列以及高亮显示当前行、当前列方法-Vim使用技巧(3)
vim提供了丰富的快速跳转任意行.任意列的方法,方便高效地移动光标,定位文件位置. 一.Vim行跳转 使用vim查看文件时,使用以下命令可以快速跳转文件首.尾行,方便对整个文件有个全局把握. 1.1 ...
- jquery获取td所在的行和列
今天在做项目时.遇到一个须要获取第几行第几列的问题. 后来.网上找了找资料,整理了此文.(使用jquery的preAll()获取列) 代码例如以下: <!DOCTYPE html PUBLIC ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- 任意表格(table)实现拖动列(column)改变列大小
直接上代码吧,原理可以看我上一篇博文.本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入). $(function () { var i ...
- #467 – 使用UniformGrid 均分行和列(Use a UniformGrid for Evenly Spaced Rows and Columns)
原文 #467 – 使用UniformGrid 均分行和列(Use a UniformGrid for Evenly Spaced Rows and Columns) UniformGrid 布局面板 ...
- 使用pandas库实现csv行和列的获取
1.读取csv import pandas as pd df = pd.read_csv('路径/py.csv') 2.取行号 index_num = df.index 举个例子: import pa ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
随机推荐
- CentOS 6.x 系统安装选项说明
在安装CentOS 6.x的过程中会出现以下界面: 这些选项有什么区别呢?转载一位网友的描述: Desktop:基本的桌面系统,包括常用的桌面软件,如文档查看工具 Minimal Desktop:基本 ...
- js正则表达式替换空格
str.replace(/^\s+|\s+$/g, '') 解析: str:要替换的字符串 \s : 表示 space ,空格+: 一个或多个^: 开始,^\s,以空格开始$: 结束,\s$,以空 ...
- WCF服务与WCF数据服务的区别
问: Hi, I am newbie to wcf programming and a little bit confused between WCF Service and WCF Data Se ...
- IOS-Social.framework
1.使用前 需要导入Social.framework 框架 2.实例代码(新浪微博为例) - (IBAction)shejiaoBtn { // 判断服务器是否可用 if ([SL ...
- Hibernate简单分页
5.1 准备工作 建立项目,加入jar 建立hibernate.cfg.xml 建立pojo类和对应的映射文件 5.2 建立vo类PageEntity package org.guangsoft.vo ...
- ios cell常用属性
1.设置UITableViewCell的accessoryView 有时候我们需要设置cell的一些样式,比如下图, 这个就是设置了cell的accessory属性的内容,如果我们想在上面显示Swit ...
- HBase参数配置及说明（转）
版本:0.94-cdh4.2.1 hbase-site.xml配置 hbase.tmp.dir 本地文件系统tmp目录,一般配置成local模式的设置一下,但是最好还是需要设置一下,因为很多文件都会默 ...
- Lattice Diamond 的学习之新建工程
1).打开软件 在软件打开后的初始布局会有一个Start page 可以创建.打开.导入一个ISPLEVER 工程. 2).建立工程:1,Start page 中Project --> NEW ...
- php 上传文件实例 注册账号
注册界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- EasyUi–7.tab和datagrid和iframe的问题
1. 多个tab切换,第2个不显示 动态添加tab Iframe页面的方法 展开 折叠 <script type="text/javascript"> $(functi ...