zoukankan      html  css  js  c++  java
  • 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="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="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');
  • 相关阅读:
    wc 统计程序
    读C#程序
    VS2013 单元测试
    android开发心得之知识的量变到质变
    大学第一篇博客
    团队作业七
    团队作业六
    团队作业五
    团队作业四
    团队作业三
  • 原文地址:https://www.cnblogs.com/dudg/p/EasyUI-tabs.html
Copyright © 2011-2022 走看看