java web前端easyui（layout+tree+雙tabs）佈局+樹+2個選項卡tabs

weixin_30924079發表於2020-04-04

1.列出要實現的樣式：

2.實現的程式碼：

分三大部分：

1）：頁面主體部分：mian.vm

<html>
<head>
  <title>Ks UI</title>
  #parse("ui:include")
  <style>
      body{padding:0;margin:0}
  </style>
  <script>
      $(document).ready(function(){
        var tabs_content = $("#content");
        tabs_content.tabs({
            border:false,
            fit:true
        });
        
        //新增tab頁面
        function addTabs(tab){
            tabs_content.tabs("add",{
                title:tab.text,
                closable:true,
                content : '<iframe frameborder="0" scrolling="auto" width="100%" height="100%" src="${path}'+tab.url+'"></iframe>'
            });
        }
        
        $("#tree_menu").tree({
            onClick: function(node){
                console.log(node);
                if(!tabs_content.tabs('exists',node.text)){
                    if(node.url){
                        addTabs(node);
                    }
                }else{
                    tabs_content.tabs("select",node.text);
                }
            }
        });
        
        //新增歡迎頁面
        addTabs({
            text:'歡迎使用Ks UI',
            url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/welcome.vm'
        });
    });
  </script>
</head>
<body class="easyui-layout">
        <div data-options="region:'north'" style="height:70px"></div>
        <div data-options="region:'west',split:true" title="選單" style="width:240px;">
            <ul class="easyui-tree" id="tree_menu" data-options="url:'$path/ui/resource/demo/data/tree.json',method:'get',animate:true"></ul>
        </div>
        <div data-options="region:'center'">
            <div  class="easyui-tabs" id="content" >
            </div>
        </div>
</body>
</html>

說明：這部分程式碼負責完成效果頁面的整體框架和效果頁面center上面的tabs，重點看tabs是如何實現的（程式碼<script>函式部分）

2）：center中豎著的tabs部分：

就是index.vm檔案

<html>
<head>
  <title></title>
  #parse("ui:include")
  <script>
      $(document).ready(function(){
        $("#tt").tabs({
            tabPosition:'left',
            fit:true,
            onSelect:function(title,index){
                open(index);
                
            }
        });
        
        function open(index){
        
            var tab = $("#tt").tabs("getTab",index);
            //console.log(tab);
            //console.log(tab[0]);
            //不重複開啟 
            if(tab.attr("opend")){
                return;            
            }
            var url = tab.panel("options").url;
            //var op=tab.panel("options");
            //console.log(op);
            if(url){
                $(tab[0]).html('<iframe frameborder="0" scrolling="auto" width="100%" height="100%" src="${path}'+url+'"></iframe>');
                tab.attr("opend",true);
            }
            
        }
        
        open(0);
        
    });
  </script>
</head>
<body>

<div id="tt" class="easyui-tabs">
   <div title="基本實現" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/base.vm'">
   </div>
   <div title="皮膚工具欄" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/mbgjl.vm'">
   </div>
   <div title="自定義工具欄" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/zdygjl.vm'">
   </div>
    <div title="皮膚頁尾" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/mbyj.vm'">
   </div>
   <div title="載入皮膚內容" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/jzmbnr.vm'">
   </div>
   <div title="皮膚巢狀" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/mbqt.vm'">
   </div>
   <div title="流式皮膚" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/lsmb.vm'">
   </div>
   <div title="API" style="padding:10px;" data-options="url:'/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/api.vm'">
   </div>
</div>
</body>
</html>

3）：豎著的tabs中的每個小視窗的示例檔案：base.vm

<html>
<head>
  <title></title>
  #parse("ui:include")
</head>
<body>
    <h2>基本皮膚Basic Panel</h2>
    <p>皮膚是其他元件或元素的容器</p>
    <div style="margin:20px 0 10px 0;">
        <a href="#" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('open')">開啟</a>
        <a href="#" class="easyui-linkbutton" οnclick="javascript:$('#p').panel('close')">關閉</a>
    </div>
    <div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;">
        <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
        <ul>
            <li>easyui is a collection of user-interface plugin based on jQuery.</li>
            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
            <li>complete framework for HTML5 web page.</li>
            <li>easyui save your time and scales while developing your products.</li>
            <li>easyui is very easy but powerful.</li>
        </ul>
    </div>
</body>
</html>

附上：mian.vm中用到的tree.json:

[{   
    "text":"基礎元件",
    "children":[
        {"text":"皮膚Panel","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/index.vm"},
        {"text":"資料表格DataGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datagrid/index.vm"},
        {"text":"樹形資料表格TreeGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/treegrid/index.vm"},
        {"text":"分割按鈕SplitButton","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/splitbutton/index.vm"},
        {"text":"表單Form","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/form/index.vm"},
        {"text":"下拉選單框ComboBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combobox/index.vm"},
        {"text":"數字文字框微調NumberSpinner","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/numberspinner/index.vm"},
        {"text":"時間框微調TimeSpinner","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/timespinner/index.vm"},
        {"text":"視窗Window","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/window/index.vm"},
        {"text":"放置Droppable","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/droppable/index.vm"},
        {"text":"手風琴選單Accordion","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/accordion/index.vm"},
        {"text":"資料列表DataList","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datalist/index.vm"},
        {"text":"連結按鈕LinkButton","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/linkbutton/index.vm"},
        {"text":"分頁Pagination","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/pagination/index.vm"},
        {"text":"文字框TextBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/textbox/index.vm"},
        {"text":"資料表格下拉框ComboGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combogrid/index.vm"},
        {"text":"日曆Calendar","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/calendar/index.vm"},
        {"text":"日期時間框微調DateTimeSpinner","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datatimespinner/index.vm"},
        {"text":"對話方塊Dialog","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/dialog/index.vm"},
        {"text":"調整大小Resizable","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/resizable/index.vm"},
        {"text":"選項卡Tabs","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/tabs/index.vm"},
        {"text":"屬性網格PropertyGrid","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/propertygrid/index.vm"},
        {"text":"選單Menu","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/menu/index.vm"},
        {"text":"進度條ProgressBar","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/progressbar/index.vm"},
        {"text":"檔案框FileBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/filebox/index.vm"},
        {"text":"樹形下拉框ComboTree","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combotree/index.vm"},
        {"text":"日期框DateBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datebox/index.vm"},
        {"text":"滑動條Slider","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/slider/index.vm"},
        {"text":"訊息框Messager","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/messager/index.vm"},
        {"text":"提示框Tooltip","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/tooltip/index.vm"},
        {"text":"佈局Layout","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/layout/index.vm"},
        {"text":"樹Tree","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/tree/index.vm"},
        {"text":"選單按鈕MenuButton","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/menubutton/index.vm"},
        {"text":"搜尋框SearchBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/searchbox/index.vm"},
        {"text":"自定義下拉框Combo","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/combo/index.vm"},
        {"text":"數字文字框NumberBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/numberbox/index.vm"},
        {"text":"日期時間框DateTimeBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/datetimebox/index.vm"},
        {"text":"驗證框ValidateBox","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/validatebox/index.vm"},
        {"text":"拖動Draggable","url":"/cn/com/ksplatform/ui/demo/main/views/fcomponents/draggable/index.vm"}
    ]
},{   
    "text":"組合元件",
    "children":[
    ]
},{   
    "text":"功能元件",
    "children":[
        {"text":"分頁資料列表"}
    ]
}]

這篇博文的目的主要是學習，各個main.vm和index.vm中<script></script>間函式的寫法，如何能熟練正確的使用easyui各個模組的屬性和方法：

其中通過chrome瀏覽器的console平臺，藉助console.log()方法，列印出index.vm檔案中比較難理解的幾個變數值：onSelect:function(title,index)中的title和index分別是tabs中各個子視窗的標題和索引號，索引號從0開始；

var tab = $("#tt").tabs("getTab",index); 列印出這裡的var tab變數是整個大的頁面；

console.log(tab[0]); 注意console輸出的這個tab[0]恰好是tabs中選中的子視窗頁面；

var url = tab.panel("options").url 中的url就是：/cn/com/ksplatform/ui/demo/main/views/fcomponents/panel/base.vm，也就是在index.vm中每個子視窗的地址；

easyui中tree模組的屬性：

$("#tree_menu").tree({
onClick: function(node){
console.log(node);
if(!tabs_content.tabs('exists',node.text)){
if(node.url){
addTabs(node);
}
}else{
tabs_content.tabs("select",node.text);
}
}
});

這個函式中的node是什麼呢？

這點可以看easyui中tree的api（當然也可以直接console輸出）：

每個節點都具備以下屬性：

id：節點ID，對載入遠端資料很重要。
text：顯示節點文字。
state：節點狀態，'open' 或 'closed'，預設：'open'。如果為'closed'的時候，將不自動展開該節點。
checked：表示該節點是否被選中。
attributes: 被新增到節點的自定義屬性。
children: 一個節點陣列宣告瞭若干節點。

前端還是經驗的積累，所以多看api！！，多參加實踐！！

轉載於:https://www.cnblogs.com/zhangshitong/p/4941089.html

EasyUi之Tabs(選項卡)
2024-03-25
UI
【easyUI】批量關閉tabs
2017-04-28
UI
Jquery tabs
2013-09-18
jQuery
直播平臺原始碼，實現一個簡單的帶tabs選項卡切換的首頁導航功能
2023-12-01
原始碼
Web前端佈局
2019-10-21
Web前端
自制簡單的Tabs（Vue）
2018-09-05
Vue
TabError: inconsistent use of tabs and spaces in indentation
2018-06-06
Error
ionic1開發之tabs
2016-12-30
修改el-tabs的樣式
2024-03-14
HarmonyOS-基礎之Tabs元件
2024-04-13
元件
鴻蒙HarmonyOS實戰-ArkUI元件（Tabs）
2024-04-15
鴻蒙UI元件
web前端佈局篇（切圖）
2017-04-07
Web前端
vue元件之路之Tabs標籤頁
2019-03-28
Vue元件
10 - Vue3 UI Framework - Tabs 元件
2021-12-20
VueUIFramework元件
什麼是Chrome Custom Tabs（CCT）?
2017-07-06
Chrome
前端--js實現選項卡
2020-02-04
前端JS
一個好用簡單的佈局空間EasyUI
2016-08-17
UI
web前端佈局練手專案
2017-02-26
Web前端
bootstrap3-標籤頁 nav, tabs and pills
2013-12-26
boot
【摸魚神器】一次搞定 vue3的路由 + 選單 + tabs
2022-05-25
Vue路由
web前端html+css常用佈局01
2015-08-25
Web前端HTMLCSS
web前端html+css常用佈局02
2015-08-25
Web前端HTMLCSS
web前端html+css常用佈局03
2015-08-25
Web前端HTMLCSS
web前端html+css常用佈局04
2015-08-25
Web前端HTMLCSS
Input原始碼解讀——從"Show tabs"開始
2023-01-08
原始碼
聖盃佈局？雙飛翼佈局？
2017-12-13
Web前端開發之EasyUI
2015-02-03
Web前端UI
HTML中兩個tabs導航衝突問題的解決方法
2018-12-03
HTML
easyui-layout佈局高度自適應
2018-04-02
UI
聖盃佈局與雙飛翼佈局
2018-11-07
聖盃佈局和雙飛翼佈局
2020-10-01
雙飛翼佈局和聖盃佈局
2018-05-29
有贊vant-ui Tabs、List、PullRefresh元件實踐
2018-08-21
UI元件
vue + element 實現快速關閉動態tabs功能
2021-01-03
Vue
CSS經典佈局——聖盃佈局與雙飛翼佈局
2021-07-12
CSS
css聖盃佈局和雙飛翼佈局
2021-09-09
CSS
CSS:三欄佈局之雙飛翼佈局
2018-05-02
CSS
java：佈局方法（流佈局）
2020-11-03
Java

java web前端easyui（layout+tree+雙tabs）佈局+樹+2個選項卡tabs

相關文章