easyUI的Tab面板是继承了panel

Tab中js的两种使用方法：
说明：jsp主页面加入一个id为tab的div，要引入easyUI的相关js、css

 <div data-options="region:'center'" >
   
   <div id="tab" class="easyui-tabs" fit="true">
             
               <div title="主页"></div>
     </div>
  </div>


第一种。使用content：

/加入tab。这里有一个name属性
function f_addTab(name,tabId,title,url){
 if ($("#tab").tabs('exists', tabId)) {
  $('#tab').tabs('select', tabId);
 // $('#'+tabId).attr('src',url);//刷新
 } else {
  $('#tab').tabs('add',{
   id:tabId,
   title:title,
   content:'<iframe name="'+name+'" src="'+url+'" frameborder="0" style="height:100%;width:100%;" "></iframe>',
   closable:true ,//tab显示关闭键
   cache:true //设置缓存，假设为false。在每次选中所选的tab时，都会载入一次页面内容

  });
 }
 
}

另外一种，使用href：
function f_addHref(tabId,title,hrefUrl){
 
 if ($("#tab").tabs('exists', tabId)) {
   $('#tab').tabs('select', tabId);
   $('#'+tabId).attr('src',url);//刷新
 } else {
  $('#tab').tabs('add',{
   id:tabId,
   title:title,
   href:hrefUrl,
   closable:true ,
   cache:true

  });
 }

}

第一种和另外一种的差别：
content属性是加入整个url请求中完整的jsp页面，而href属性仅仅引入url中的<body></body>中的内容，详细可參考这个站点：


假设使用href创建tab，那么使用datagrid时。每一个页面的grid的id都不能重名。否则会无法显示，由于href属性是不断在原来的页面插入url中请求的页面内容，一旦datagrid的id重名，那么在第二个datagrid就会无法显示

引入easyUI的相关js文件差别：
假设使用href创建tab，那么仅仅要在主页中引入相关的easyUI的js、css文件就能够了。
假设使用content创建tab，那么每一个页面都要引入相关的easyUI的js、css文件



下面是我自己測试出来的结果：


我这里有三个页面。分别为1.jsp  、 2.jsp  、3.jsp，1.jsp是主页

2.jsp中有一个js的f_search()方法，用来刷新id为invendg的datagrid数据
function f_search(){

 alert('已调用f_search方法');//href创建tab时。这里能够运行
   
 $('#invendg').datagrid('load',
   serializeObject( $("#searchForm").form() ) //将searchForm表单内的元素序列为对象传递到后台
 );
 
 console.info($('#invendg'));//href创建tab时，这时火狐控制台打印一个空的对象。即Object[ ]
 
}

3.jsp是用来添加、改动2.jsp的数据。在3.jsp添加、改动完保存后要刷新1.jsp中grid的数据

使用content创建tab时调用父窗体方法，要加上name属性，子页面可通过这个name属性调用指定的父窗体。如：
window.frames['test'].f_search();
我这里使用了第一种方法创建tab。假设使用parent或window调用，即parent.f_search()。将会调用最上层的方法，即1.jsp中的方法。假设1.jsp找不到这种方法将会报错

使用href创建tab时调用父窗体方法，能够直接调用。但使用父窗体方法时，不能调用到父窗体的对象元素。
假设我3页面使用了2.jsp页面的 f_search()方法，那么将无法找到 $('#invendg')这个对象。这个能够从火狐浏览器的调试控制台查看。利用
 console.info($('#invendg'));打印出来是一个空的对象，正常的打印应该是这种，

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTUxMTY4NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">



可看到object的中括号里有值

我在使用href属性创建tab时。在3.jsp页面直接调用2.jsp页面的方法。即f_search()方法，尽管能运行到父页面方法，但调用不了 $('#invendg')这个对象

注意：在使用href引入页面时另一个须要注意的问题。就是每一个页面都不能有重名的js方法。新建tab时，使用href属性，假设每一个tab的页面都使用了同名的js方法。或同样的div的id。那么新的窗体js方法和document元素会覆盖了旧窗体中同样的js方法和document元素。


如有1、2两个页面，1和2 都有一个f_add()方法，假设先打开了1。然后再打开2，这时在1中将不能使用1中原来的f_add()方法。使用的将是2页面中的方法。



初学easyUI。在使用tab面板时遇到了很多问题。临时将我自己实践出来的经验分享给大家。大家也能够加easyUI的一些QQ群，积累一下经验。

href,content的差别，写得比較具体的一篇文章，大家可參考一下： http://www.easyui.info/archives/164.html 



easyUI Tab href,content差别的更多相关文章

  1. jquery easyui tab加载内容的几种方法

    转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...

  2. jquery easyui Tab 引入页面的问题

    jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href ...

  3. 【转】 jquery easyui Tab 引入页面的问题

    原地址:http://blog.csdn.net/superdog007/article/details/8225518 jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上 ...

  4. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  5. Easyui Tab刷新

    Easyui Tab刷新: function refreshTab(title){ var tab = $('#id').tab('getTab',title); $('#id').tab('upda ...

  6. 【转】关于easyui tab 加载 js ajax 不走后台的问题， 怕找不到 以防万一

    一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天在此说明一下原因. 不管是window,dailog还是tab其实质最终都是继承了panel.panel有两种方式展示 ...

  7. easyui tab 加载iframe 高度问题

    其实按网上搜的结果,easyui 有个data-options属性是fit:true. 加上他之后会使得自适应父类的宽高. 加上之后,发现个问题,当刷新tab内容的时候高度是对的,但是新建tab的时候 ...

  8. Easyui Tab使用

    常见问题: 1. easyui 在子tab页中打开新tab页(关于easyUI在子页面增加显示tabs的一个问题) https://blog.csdn.net/u014805893/article/d ...

  9. 扩展easyUI tab控件，添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

随机推荐

  1. [poj 3904] sky code 解题报告（组合计算+容斥原理）

    题目链接:http://poj.org/problem?id=3904 题目大意: 给出一个数列,询问从中取4个元素满足最大公约数为1的方案数 题解: 很显然,ans=总的方案数-最大公约数大于1的4 ...

  2. [Project Euler 429] Sum of squares of unitary divisors（数论）

    题目链接:https://projecteuler.net/problem=429 题目: 我们称 N 的约数 d 为特殊的当且仅当 gcd(d, n / d) = 1. 设 S(n) 为 n 所有特 ...

  3. Liunx-php7安装swoole扩展

    Liunx-php7安装swoole扩展 标签(空格分隔): php 下载包 https://github.com/swoole/swoole-src/releases 安装过程 直接wget也行直接 ...

  4. TabLayout中Indicator的样式修改

    最近写一个项目的时候用到了TabLayout,其中Indicator只是固定的一条横线,样式只能修改Color和Height,没有办法改变形状和宽度等其他信息. 经过查看TabLayout类的源码,发 ...

  5. JavaScript总结（2）

    <!--脚本部分-->06 <script type="text/javascript">07 date_object=new Date();08 what ...

  6. Linux 下段错误 core文件

    什么是core dump? core的意思是内存,dump的意思是扔出来,堆出来:当一个程序奔溃时,在进程当前工作目录的core文件中复制了该进程的存储图像.core文件仅仅是一个内存映像(同时加上调 ...

  7. ES6中的let、contst

    一 let 1.let 局部变量 不会变量提升,在运用时候要先声明在调用,var 全局变量 会产生变量提升: 2.在块级作用域中纯在let const,他所生命的变量就绑定在这个区域,未经过声明调用会 ...

  8. codeforces 401 B Sereja and Contests【贪心】

    题意:给出最后的时间n,div 1必须和div2一起举行,并且div2的时间总是比div1大1 给出Sereja(只能参加div2)参加过的k场比赛的时间,问他最少错过了多少场div2,最多错过了多少 ...

  9. NodeJS学习笔记 (25)逐行读取-readline(ok)

    模块概览 readline是个非常实用的模块.如名字所示,主要用来实现逐行读取,比如读取用户输入,或者读取文件内容.常见使用场景有下面几种,本文会逐一举例说明. 文件逐行读取:比如说进行日志分析. 自 ...

  10. POJ1201Intervals(差分约束）

    题意 给出数轴上的n个区间[ai,bi],每个区间都是连续的int区间. 现在要在数轴上任意取一堆元素,构成一个元素集合V 要求每个区间[ai,bi]和元素集合V的交集至少有ci不同的元素 求集合V最 ...