首页 > 代码库 > Jquery EasyUI tabs处理

Jquery EasyUI tabs处理

2024-08-03 15:36:26   226人阅读

一 获取选中的 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="http://www.mamicode.com/‘+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="http://www.mamicode.com/‘ + 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处理


联系
我们