jQueryEasyUI
jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富並且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。
這里我們使用easyUI搭建一個簡單的頁面框架，非常簡單！
效果如此：
需要引入的最少的文件
3個js文件是必須的
文件下載鏈接：http://www.jeasyui.net/download/
注意：easyui從1.2.3版本之后開始收費了
創建一個html：
引入js以及要用到的樣式
注意，由於ezUI是依賴jQuery的，所以引用的順序一定是jQuery的js在easyUI的js之前！！！
demo1_layout.html:
<!DOCTYPE HTML> <html> <head> <title>demo layout</title> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="themes/icon.css"></link> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"></link> </head> <body> </body> </html>
（從我的路徑可以看出，我的html文件和jQuery的js是平級關系）
完整代碼：
<!DOCTYPE HTML> <html> <head> <title>demo layout</title> <!-- 引入jQuery的js --> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <!-- 引入jQuery easyUI的js --> <script type="text/javascript" src="jquery.easyui.min.js"></script> <!-- 引入 國際化的js --> <script type="text/javascript" src="easyui-lang-zh_CN.js"></script> <!-- 引入圖片樣式 --> <link rel="stylesheet" type="text/css" href="themes/icon.css"></link> <!-- 引入默認樣式 --> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"></link> </head> <body> <!-- 使用easyui的layout布局 --> <div class="easyui-layout" data-options="fit:true"> <!-- easyui在data-options配置配置 --> <!-- 只有center區域是必須的 --> <div data-options="region:'east',title:'東部'" style="width:200px;">東部</div> <div data-options="region:'west',title:'西部'" style="width:200px;"> <!-- 可折疊面板accordion --> <!-- fit 屬性，使得當前div大小占滿 父容器 --> <div class="easyui-accordion" data-options="fit:true"> <!-- 每一個div就是一個面板 --> <!-- 通過iconCls設置圖標，找icon.css中定義的類 --> <div data-options="title:'基本功能',iconCls:'icon-mini-add'">可折疊面板1</div> <div data-options="title:'高級功能',iconCls:'icon-mini-add'">可折疊面板2</div> <div data-options="title:'管理員功能',iconCls:'icon-mini-add'">可折疊面板3</div> </div> </div> <div data-options="region:'south',title:'南部'" style="height:100px;">南部</div> <div data-options="region:'north',title:'北部'" style="height:100px;">北部</div> <div data-options="region:'center',title:'中部'"> <!-- 選項卡tab 面板 --> <div class="easyui-tabs" data-options="fit:true"> <!-- 這里的每一個div就是一個選項卡 --> <div data-options="title:'tab1'">tab標簽面板1</div> <!-- closable 可關閉 --> <div data-options="title:'tab2',closable:true">tab標簽面板2</div> <div data-options="title:'tab3',closable:true">tab標簽面板3</div> <div data-options="title:'tab4',closable:true">tab標簽面板4</div> </div> </div> </div> </body> </html>
轉載請注明：https://www.cnblogs.com/1906859953Lucas/p/9212852.html