一個基於 EasyUI 的前台架構（3）封裝操作Tabs的JS代碼

最後更新：2016-09-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

一般來說，系統架構的主內容區會引入另一個獨立的 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代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

一個基於 EasyUI 的前台架構（3）封裝操作Tabs的JS代碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support