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

    $("#tabs").tabs('add',{
        title: "百度搜索",
        content: '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="http://www.baidu.com"></iframe>',
        closable: true,
        icon: ''
    });

执行以后，效果如图：

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

function OpenTab(title,url,icon){
    $("#tabs").tabs('add',{
        title: title,
        content: '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>',
        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 '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
}

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="js/themes/icon.css"/>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>

<script type="text/javascript">
$(function(){
    $("#menu a").click(function(){
        var title=$(this).text();
        var url=$(this).attr("rel");
        var icon=$(this).attr("icon");
        OpenTab(title,url,icon);
        return false;    //使超链接的单击事件失效
    });
});
</script>
<style></style>
</head>

<body class="easyui-layout" >
<div region="north" style="height:80px;">
    <!-- 页面头部 -->
    <h1>***管理系统</h1>
</div>

<div region="west" split="true" style="width:220px;" title="导航菜单">
<div id="menu">
<a href="#" rel="http://www.baidu.com">百度搜索</a><br />
<a href="#" rel="http://www.google.com">Google搜索</a><br />
<a href="#" rel="http://www.cnblogs.com">cnblogs</a><br />
</div>
</div>

<div region="center">
    <div id="tabs" class="easyui-tabs" fit="true" border="false">
        <!--欢迎标签 START-->
        <div title="欢迎使用">
            <h1 style="font-size: 24px;">asdfasd</h1>
            <h1 style="font-size: 24px;"></h1>
        </div>
        <!--欢迎标签 END-->
    </div>
</div>

</body>
</html>

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

一个基于 EasyUI 的前台架构（3）封装操作Tabs的JS代码的更多相关文章

  1. 一个基于 easyui, vue 和 maptalks 的简单地图应用

    一个基于 easyui, vue 和 maptalks 的简单地图应用 做了一个小应用,结合 easyui , vue 和 maptalks 的简单的地图应用.可以用来画图,什么的. 地址

  2. 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil

    封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,代码比较简单,主要是把MongoTarget的配置.FileTarget的配置集成到类中,同时利用缓存依赖来判断是否需要重新创 ...

  3. 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil，nloglogutil

    封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,代码比较简单,主要是把MongoTarget的配置.FileTarget的配置集成到类中,同时利用缓存依赖来判断是否需要重新创 ...

  4. Go/Python/Erlang编程语言对比分析及示例 基于RabbitMQ.Client组件实现RabbitMQ可复用的 ConnectionPool（连接池） 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil 分享基于MemoryCache（内存缓存）的缓存工具类，C# B/S 、C/S项目均可以使用！

    Go/Python/Erlang编程语言对比分析及示例   本文主要是介绍Go,从语言对比分析的角度切入.之所以选择与Python.Erlang对比,是因为做为高级语言,它们语言特性上有较大的相似性, ...

  5. 转: Orz是一个基于Ogre思想的游戏开发架构

    Orz是一个基于Ogre思想的游戏开发架构,好的结构可以带来更多的功能.Orz和其他的商业以及非商业游戏开发架构不同.Orz更专著于开发者的感受,简化开发者工作.Orz可以用于集成其他Ogre3D之外 ...

  6. Android系统是一个基于BInder通信的C/S架构

    Android系统基本上可以看作是一个基于Binder通信的C/S架构.他有服务器端和客户端.比如自己开发一个程序,肯定是基于Activity的而Activity就是作为客户端,他的服务器端就是Act ...

  7. 建筑材料系统 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发

    框架介绍: 1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性 ...

  8. ABP 初探 之基于EasyUI的CURD

    结束了天天加班的项目,项目虽然结束,但还是有点小问题,只能在后期优化当中完成了,本次做项目采用了,MVC.Webapi.Entityframework,在园了里看到了有关ABP的介绍,同样ABP也是最 ...

  9. 初识NodeJS，一个基于GoogleV8引擎的Javascript运行环境

    思考 首先我们来思考一个问题:我们都知道几乎所有现代主流浏览器都全面支持了ECMAScript 5.1版标准,而JavaScript的标准是ECMAScript.那么我们就容易认为JavaScript ...

随机推荐

  1. 基于tiny4412的u-boot移植（二）

    作者信息 作者:彭东林 邮箱:pengdonglin137@163.com QQ: 405728433 平台介绍 开发环境:win7 64位 + VMware11 + Ubuntu14.04 64位 ...

  2. notepad++ 常用的插件及教程

    NotePad++ 教程 HEX-Editor      http://files.cnblogs.com/pengdonglin137/HexEditor_0_9_5_UNI_dll.zip 我的N ...

  3. MMU——存储器管理单元

    更多文档参见:http://pan.baidu.com/s/1qW0hjwo MMU,全称Memory Manage Unit, 中文名——存储器管理单元. 许多年以前,当人们还在使用DOS或是更古老 ...

  4. CASS 7.1 和 AutoCAD 2006的安装使用

    CAD 2006由于是一个古老的版本,所以在WIN7,WIN10上直接安装的话,一般无法成功.此外,AutoCAD 2006是不分32位64位的,之后的版本都是区分的. 但是,对于我这种几年不用一次C ...

  5. Android studio百度地图demo出现230错误，key校验失败

    转自daoxiaomianzi原文 Android studio 百度地图demo出现230错误,key校验失败 使用AndroidStudio导入Baidu地图的as版的demo,引入后,发现没有k ...

  6. 起步X5 UI模型使用的新的JAVASCRIPT UI库 DHTMLX （简称DHX）

    最近学习新版本的起步X5,发现 UI控件有很多变化,按培训师的解释,X5平台界面设计引入了新的JAVASCRIPT UI库 DHTMLX. 参考:DHX   http://www.dhtmlx.com ...

  7. 使用Eclipse载入一个现有的java项目

    下文的导入记录了在Eclipse环境中,要对已经下载好的java源码进行载入时的步骤.主要用于下载后的文件不方便进行拷贝到其它位置的情况.笔者几次用到这个顺序来载入项目,但是都是隔非常长时间才用一次, ...

  8. Js中数组的追加

    Concat arrayObject.concat(arrayX,arrayX,......,arrayX) 常用于 加载更多 ,数组的追加.

  9. Apache 使用gzip、deflate 压缩页面加快网站访问速度

    Apache 使用gzip 压缩页面加快网站访问速度 介绍: 网页压缩来进一步提升网页的浏览速度,它完全不需要任何的成本,只不过是会让您的服务器CPU占用率稍微提升一两个百分点而已或者更少.   原理 ...

  10. 【Python3 爬虫】10_Beautiful Soup库的使用

    之前学习了正则表达式,但是发现如果用正则表达式写网络爬虫,那是相当的复杂啊!于是就有了Beautiful Soup 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓 ...