easyUI中組件的綜合使用

欄目: 學習交流 / 發佈於: / 人氣:2.47W

easyUI是前端框架之一，也是最為常用的前端框架之一。它裏面包含了很多的組件，各個組件之間可以獨立使用，也可以結合起來使用。學習easyUI首先要先弄懂easyUI各個組件的作用和使用方法，然後再將各個組件結合起來使用。現在，我們來看看easyUI中各個組件的綜合使用吧。

操作方法

（01）新建文檔首先雙加桌面上的Dreamweaver圖標，打開軟件。其次在工具的主界面中找到：【文件】--【新建】---【HTML頁面】，創建一張HTML頁面的文檔。

（02）導入4個js文件下載easyUI包並解壓，將解壓之後的文件夾導入到站點或www文件夾裏面。然後在easyUI文件夾中拉出4個js文件，文件如下所示：<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>

（03）創建頁面佈局然後在easyUI手冊中複製下layout佈局代碼到HTML頁面的body部位。並去掉east和south面板。代碼如下所示：<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>

（04）頁面的頭部North面板去掉title標題，然後在面板中隨便寫上網站的文字。代碼如下所示： <div data-options="region:'north',split:true"style="height:70px;background:#CFC;line-height:70px;font-size:30px;font-family:'微軟雅黑';color:red;overflow:hidden;">搜狗</div>

（05）west面板：在west面板中插入摺疊面板/可伸縮面板 <div data-options="region:'west',title:'West',split:true" style="width:100px;"> <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> content1 </div> <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div> </div>

（06）在center面板中插入tabs選項卡，代碼如下所示： <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>

（07）如果電腦上沒有安裝360瀏覽器的話，點擊Dreamweaver中的地球圖標，在下來菜單中找到【編輯瀏覽器列表】，在首選參數頁面，點擊瀏覽器旁邊的【+】號，然後在添加瀏覽器中輸入瀏覽器名稱和瀏覽【瀏覽器的安裝路徑】，然後點擊確定按鈕即可。

特別提示

easyUI組合控件編碼代碼的話，一般是這麼佈局的，還可以根據頁面的實際需要編輯不同的頁面，在實際開發前端的時候，頁面要美觀點，添加style修飾。在Dreamweaver中可以添加多個瀏覽器列表。

Tags：EasyUI 組件