easyui根據文件寫的小例子
阿新 • • 發佈：2018-12-18
layout佈局、according可摺疊、tab選項卡，動態新增選項卡。
*注：這種外掛其實匯入一個封裝的css和js檔案。基於jQuery.可以使了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="js/easyui/themes/default/easyui.css"> <link rel="stylesheet" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <title>Title</title> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">北部</div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">南部</div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"> <div class="easyui-accordion" data-options="fit:true"> <!-- 使用子div表示每個面板 --> <div data-options="iconCls:'icon-cut'" title="面板一">1111</div> <div title="面板二">2222</div> <div title="面板三">3333</div> </div> </div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增一個面板</a> <div id="mytabs" class="easyui-tabs" data-options="fit:true"> <!-- 使用子div表示每個面板 --> <div data-options="iconCls:'icon-cut'" title="面板一">1111</div> <div data-options="closable:true" title="面板二">2222</div> <div title="面板三">3333</div> </div> </div> <script> $(function(){ // 動態建立tab $('#btn').bind('click', function(){ var e = $("#mytabs").tabs("exists","面板四"); if(e){ $("#mytabs").tabs("select","面板四"); }else{ $("#mytabs").tabs("add",{ title:'面板四', iconCls:'icon-edit', closable:true, content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>' }); } }); }); </script> </body> </html>