JqueryeasyUI选项卡选择判定更改内部Iframe地址

1、tabs的常用操作

//1.判断tab是否存在。
   var currtab = $('#tabs').tabs('getSelected');

//2.判断点击的tab是否是当前选中的tab。
  var currtab = $('#tabs').tabs('getSelected');
  var tab = $("#tabs").tabs("getTab", title);
  if (currtab == tab)
   {
     ...
   }
//3.是当前tab时，刷新。
    var url = $(currtab.panel('options').content).attr('src'); 
    refreshTab(tab, url);
//4.不是当前tab时，转换当前选中的tab，在刷新！
     var tab = $("#tabs").tabs("select", title);
     var currtab = $('#tabs').tabs('getSelected');
     var url = $(currtab.panel('options').content).attr('src');
                    refreshTab(tab, url);
 //5.更新tab 对应的iframe  公用的方法
     function refreshTab(obj,url)
     {
       var refresh_tab = obj;
       if (refresh_tab && refresh_tab.find('iframe').length > 0)
            {
                var _refresh_ifram = refresh_tab.find('iframe')[0];
                _refresh_ifram.contentWindow.location.href = url;
            } 
    }

2、实战应用

html标签

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

JS代码

var count=0;
$(document).ready(function(){
         $('#mytabs').tabs({   
              border:false,   
              onSelect:function(title){
                 if(title=='任务下发'&&count!=0){
                     //var iframeTask=iframeTask.window.document.getElementById("iframeTask");
                     var l=window.location;
                      var reqUrl = l.protocol + "//" +l.host+"/wtms/pages/quality/qualityTask.jsp";
                     $("#iframeTask").attr("src",reqUrl);
                 }else if(title=='任务跟踪'){
                     count=1;
                     //var iframeTrack=iframeTrack.window.document.getElementById("iframeTrack");
                     var l=window.location;
                      var reqUrl = l.protocol + "//" +l.host+"/wtms/pages/quality/qualityTrack.jsp";
                     $("#iframeTrack").attr("src",reqUrl);
                 }else if(title=='报表分析'){
                     count=1;
                    // var iframeReport=iframeReport.window.document.getElementById("iframeReport");
                     var l=window.location;
                      var reqUrl = l.protocol + "//" +l.host+"/wtms/pages/quality/qualityReport.jsp";
                     $("#iframeReport").attr("src",reqUrl);
                 }
              }   
        });
});

posted on 2013-12-05 09:31 boonya 阅读(1027) 评论(0) 编辑收藏举报