easyui-tabs简单操作(随笔)

最新推荐文章于 2023-05-30 22:05:03 发布

原创最新推荐文章于 2023-05-30 22:05:03 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui-tab #获取title #获取index #获取tab

前端/UI相关专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何通过EasyUI库操作tabs组件，包括获取当前tab标题、根据标题获取tab、按索引显示tab，以及在iframe加载的tabs中获取并操作特定tab内的属性，如触发刷新事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取tab相关属性操作

          // 获取当前tab标题
           var pageTitle = $('.tabs-selected').text();  
          //根据标题(或索引)获取tab
           var tab = $('#centerTabs').tabs('getTab', pageTitle); 
         if (tab){
                  //根据tab获取索引
            var index = $('#centerTabs').tabs('getTabIndex', tab); 
           //按索引默认显示    
            $('#centerTabs').tabs('select',index);//显示  
        }

注:centerTabs为easyui-tabs层的ID

2、在tabs里获取对应的tab,并对tab里的属性相关操作(触发事件等)
前提:tabs使用’iframe’方式加载

                //$('.tabs-selected').text();  
                var tabTitle="销售出库单信息列表";
                var refresh_tab = $('#centerTabs').tabs('getTab',tabTitle);
                if(refresh_tab && refresh_tab.find('iframe').length > 0){ 
                       //获取到选定的tab下的iframe
                    var _refresh_ifram = refresh_tab.find('iframe')[0];
                    //获取到选定的tab下的iframe中的内容(此处默认第一个tab)
                    var refresh_doc = _refresh_ifram.contentWindow;
                    //获取到刷新元素#reflesh
                    var refind = refresh_doc.$('#reflesh');
                if(refind==null){
                    return false;//没有元素时返回false
                } else{ 
                   refind.click();//找到元素ID时，进行点击事件刷新。
                   }
                }