1、tabs的常用操作

  1. //1.判断tab是否存在。
  2.    var currtab = $('#tabs').tabs('getSelected');
  3.  
  4. //2.判断点击的tab是否是当前选中的tab。
  5.   var currtab = $('#tabs').tabs('getSelected');
  6.   var tab = $("#tabs").tabs("getTab", title);
  7.   if (currtab == tab)
  8.    {
  9.      ...
  10.    }
  11. //3.是当前tab时，刷新。
  12.     var url = $(currtab.panel('options').content).attr('src');
  13.     refreshTab(tab, url);
  14. //4.不是当前tab时，转换当前选中的tab，在刷新！
  15.      var tab = $("#tabs").tabs("select", title);
  16.      var currtab = $('#tabs').tabs('getSelected');
  17.      var url = $(currtab.panel('options').content).attr('src');
  18.                     refreshTab(tab, url);
  19.  //5.更新tab 对应的iframe  公用的方法
  20.      function refreshTab(obj,url)
  21.      {
  22.        var refresh_tab = obj;
  23.        if (refresh_tab && refresh_tab.find('iframe').length > 0)
  24.             {
  25.                 var _refresh_ifram = refresh_tab.find('iframe')[0];
  26.                 _refresh_ifram.contentWindow.location.href = url;
  27.             }
  28.     }

2、实战应用

html标签

  1. <body class="easyui-layout" >
  2.     <div id="mytabs" class="easyui-tabs" fit="true">
  3.         <div id="task" title="任务下发"  data-options="iconCls:'icon-task',closable:false" style="padding: 10px;border: 0px;height: 100%;" >
  4.             <iframe id="iframeTask" name="iframeTask" src="qualityTask.jsp"
  5.                 style="width: 100%;height: 100%;border: 0px;"></iframe>
  6.         </div>
  7.         <div id="track" title="任务跟踪" data-options="iconCls:'icon-track',closable:false"     style="padding: 10px;height: 100%;" data-options="">
  8.             <iframe  id="iframeTrack" name="iframeTrack" src="qualityTrack.jsp"
  9.                 style="width: 100%; height: 100%;border: 0px;"></iframe>
  10.         </div>
  11.         <div id="report" title="报表分析" data-options="iconCls:'icon-report',closable:false"    style="padding: 10px;height: 100%;">
  12.             <iframe  id="iframeReport" name="iframeReport" src="qualityReport.jsp"
  13.                 style="width: 100%; height: 100%;border: 0px;"></iframe>
  14.         </div>
  15.     </div>
  16. </body>

JS代码

  1. var count=0;
  2. $(document).ready(function(){
  3.          $('#mytabs').tabs({
  4.               border:false,
  5.               onSelect:function(title){
  6.                  if(title=='任务下发'&&count!=0){
  7.                      //var iframeTask=iframeTask.window.document.getElementById("iframeTask");
  8.                      var l=window.location;
  9.                       var reqUrl = l.protocol + "//" +l.host+"/wtms/pages/quality/qualityTask.jsp";
  10.                      $("#iframeTask").attr("src",reqUrl);
  11.                  }else if(title=='任务跟踪'){
  12.                      count=1;
  13.                      //var iframeTrack=iframeTrack.window.document.getElementById("iframeTrack");
  14.                      var l=window.location;
  15.                       var reqUrl = l.protocol + "//" +l.host+"/wtms/pages/quality/qualityTrack.jsp";
  16.                      $("#iframeTrack").attr("src",reqUrl);
  17.                  }else if(title=='报表分析'){
  18.                      count=1;
  19.                     // var iframeReport=iframeReport.window.document.getElementById("iframeReport");
  20.                      var l=window.location;
  21.                       var reqUrl = l.protocol + "//" +l.host+"/wtms/pages/quality/qualityReport.jsp";
  22.                      $("#iframeReport").attr("src",reqUrl);
  23.                  }
  24.               }
  25.         });
  26. });

JqueryeasyUI选项卡选择判定更改内部Iframe地址的更多相关文章

  1. 虚拟机的静态内部 IP 地址

     这是什么? 借助最新的 PowerShell 版本,您现在能够定义和配置特定的内部 IP 地址,该地址可以静态分配给部署在虚拟网络中的 IaaS 虚拟机.使用此功能,您可以直接为虚拟机配置内部 ...

  2. 如何更改magento后台地址

    magento默认的后台登陆地址是http://yourdomain.com/admin. 更改后台登陆地址是不难的,先用FTP登陆服务器,进入网站根目录,编辑app/etc/local.xml文件, ...

  3. Base标签小记：更改当前页面的地址

    一般来说,H5游戏的部署,index.html和代码资源都会放在同一个地址下然后使用iFrame导入到需要加载游戏的页面即可. 但是今天游戏项目部署遇到了一个问题,游戏自己的访问页面(index.ht ...

  4. Git更改远程仓库地址

    最近在开发一个公司内部的公共组件库.老大整理了git仓库里的一些项目,其中就包括这个项目. 项目git地址变了,于是我本地的代码提交成功后push失败. 查看远程地址 git remote -v 更改 ...

  5. 微信小程序 选择微信自带的地址 用户授权选择了拒绝

    // 选择微信自带地址 addAddr:function () { wx.chooseAddress({ success: function (res) { self.setData({ addrIn ...

  6. 四、Oracle loop循环、while循环、for循环、if选择和case选择、更改读取数据、游标、触发器、存储过程

    数据库的设计(DataBase Design): 针对于用户特定的需求,然后我们创建出来一个最使用而且性能高的数据库! 数据库设计的步骤: 01.需求分析 02.概念结构设计 03.逻辑结构设计 04 ...

  7. Linux下安装docker，更改镜像仓库地址，并部署springboot应用

    今天做不成的事,明天也不会做好. 各位同学大家好,随着docker的快速发展,越来越多的人开始使用,一方面随着容器化这个趋势越来越火,docker成为了其中的佼佼者:二来容器化确实降低了运维的门槛,让 ...

  8. svn提交时提示 Aborting commit: remains in conflict 解决办法，更改svn服务地址

    TortoiseSVN客户端如何更改新的URL 问题: 我们的服务器换了新的URL地址,这时候我们本地的SVN访问帐号和地址就要重新定义了. 解决步骤: 1:重新定义SVN的URL,右键(Tortoi ...

  9. tab选项卡(选择上面的菜单,下面出现对应的不同的内容)

    使用jQuery完成 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. Qt中调用PolarSSL库(一)

    最近一直在学习SSL相关的知识,也是先了解理论相关的知识,主要是SSL相关的基本概念和连接建立过程,主要是基于PolarSSL开源库进行学习.学习完了之后就希望能给有所运用,就想用Qt写一个简单的程序 ...

  2. Zendframework连接两个或多个数据库的实现

    配置文件 <db> <adapter>PDO_MSSQL</adapter> <config> <host>localhost</ho ...

  3. HDU1754（线段树）

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. Linux 多线程开发

    在任何一个时间点上,线程是可结合的(joinable)或者是分离的(detached).一个可结合的线程能够被其他线程收回其资源和杀死.在被其他线程回收之前,它的存储器资源(例如栈)是不释放的.相反, ...

  5. HttpURLConnection访问url的工具类

    java代码: import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; ...

  6. quick-cocos2d-x android返回键监听并实现原生退出对话框

    这两天最终闲了一下,就顺手又把quick捡起来又学了学,一直都认为quick比cocos2dx那套lua绑定要方便很多,今天试了下android返回键的监听,还是挺好弄的,所以就有了这篇. 首先说明一 ...

  7. 淘宝开源任务调度框架tbschedule

    背景 分布式任务调度是非常常见的一种应用场景,一般对可用性和性能要求不高的任务,采用单点即可,例如linux的crontab,spring的quarz,但是如果要求部署多个节点,达到高可用的效果,上面 ...

  8. .net如何后台批量删除

    button_Click(Sender sender,Event e){foreach (DataListItem item in DataList1.Items){CheckBox cbox=(Ch ...

  9. Jquery时间段选择器

    效果(有给小bug, 在时间的大小比较上.): HTML: <html> <head> <title>测试DatePicker</title> < ...

  10. Android studio教程：[2]项目整体布局

    上篇介绍了如何创建项目,这一次将介绍创建完的项目如何呈现在开发者的眼前,介绍android studio开发环境的整体布局,让大家知道各个模块的位置和功能. 工具/原料 Android studio ...