一个基于 EasyUI 的前台架构（3）封装操作Tabs的JS代码-白红宇

一个基于 EasyUI 的前台架构（3）封装操作Tabs的JS代码

阅读量：6233 次

发布时间：2019-06-22

本文共 1575 字，大约阅读时间需要 5 分钟。

一般来说，系统框架的主内容区会引入另一个独立的 Web 页面来实现系统的功能，所以在在 Tabs 里的每一个标签页里使用 iframe 标签来引入子页面。所以这里可以将 Tabs 的 Content 属性值设为一个 <iframe> 标签即可。比如：

$("#tabs").tabs('add',{
           title: "百度搜索",         content: '',         closable: true,         icon: ''     });

执行以后，效果如图：

　　根据上面代码，我们可以将代码进行简单封装，写成一个独立的函数，使用参数来实现该功能。代码如下：

function OpenTab(title,url,icon){
       $("#tabs").tabs('add',{
           title: title,         content: '',         closable: true,         icon: icon     });    }

　　当然，我们还要考虑到标签重复打开的问题，而且组织标签内容 content 的代码在这里也不多美观，可以独立出来，这里我们修改代码，如下：

/* 打开一个标签 */ function OpenTab(title, url, icon){
       /**     如果这个标题的标签存在，则选择该标签     否则添加一个标签到标签组     */     if($("#tabs").tabs('exists', title)){
           $("#tabs").tabs('select', title);     }else{
           $("#tabs").tabs('add',{
               title: title,             content: createTabContent(url),             closable: true,             icon: icon         });     }    } /* 生成标签内容 */ function createTabContent(url){
       return ''; }

　　这样，我们就可以将这段JS代码保存到一个单独的 JS 文件中，在需要使用的页面引用即可。（这里命名为tabs.js）

　　然后，我们回到 untitled.html 页面，在页面左侧添加几个超链接。然后编写代码，在单击这几个超链接的时候获取超链接标签的相应属性，并在 Tabs 中打开一个新的 Tab。代码如下：

   
      EasyUI Demo 
      
             
          
           
      ***管理系统
 
     
 
      
       
       百度搜索
       
 
       Google搜索
       
 
       cnblogs
       
 
      
 
     
 
          
               
                
                    
        asdfasd

　　运行该页面，然后单击左侧的“百度搜索”链接，打开百度，然后再单击 “cnblogs”链接，打开cnblogs，然后再次单击“百度搜索”链接，Tabs 切换到“百度搜索”标页面中，如图：

你可能感兴趣的文章