Jquery EasyUI tabs处理

一 获取选中的 Tab

1.   // 获取选中的 tab panel 和它的 tab 对象   

2.  var pp = $('#tt').tabs('getSelected');   

3.  var tab = pp.panel('options').tab;    // 相应的 tab 对象    

注:根据指定tab的title 获取tab对象接口使用方式如下:

    var tab = $('#tt').tabs('getTab','title'), 

二 更新特定的选项卡面板 可使用update方法,param参数包含2个属性:

tab: 将被更新的选项卡。

options: 选项卡相关配置项。

//当前被选中的tab  
var current_tab = $('#frame_tabs').tabs('getSelected');  
$('#frame_tabs').tabs('update',{  
     tab:current_tab,  
     options : {  
          content : '<iframe scrolling="auto" frameborder="0"  src="'+URL+'" style="width:100%;height:100%;"></iframe>',  
      //或者 href : '';  
     }  
});  

    1.创建tab,同时捕捉 'onSelect' 事件

  $('#tt').tabs({   
      border:false,   
      onSelect:function(title){   
          alert(title+' is selected');   
      }   
  });  

  2.增加新的tab panel

  $('#tt').tabs('add',{   
      title:'New Tab',   
      content:'Tab Body',   
      closable:true  
  });  

三 tabs 动态加载iframe

 $('#EasyTabs').tabs('add', {
                    title: tabTitle,
                    content: '<iframe frameborder="0"  src="' + ContentUrl + '" style="width:100%;height:100%;"></iframe>',
                    iconCls: 'icon-tip',
                    closable: true,
                    tools: [{
                        iconCls: 'icon-mini-refresh',
                        handler: function () {
                            alert('refresh');
                        }
                    }]
                });

 

EasyUI相同的Tab只打开一个(即EasyUI方法的调用方法)
function addTabA(title){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
         $('#tt').tabs('add',{
         title:title,
         content:'Tab Body ' ,
         iconCls:'icon-save',
         closable:true
        });
    }
}
 
jQuery EasyUI的其他方法调用方式相似
例如:layout 默认收起
$('#layout').layout('collapse', 'north');

posted on 2014-11-21 16:56  风雨潜行  阅读(559)  评论(0编辑  收藏  举报

导航