Jquery EasyUI tabs处理

浏览数：62 / 时间：2015年06月09日

一获取选中的 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‘);

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery EasyUI tabs处理