妙知谷怎樣學習jQuery easyUI教程？
- 學習交流
- 關注：3.06W次
顧名思義jQuery easyUI是一個基於jQuery的框架，相當於是jQuery的擴展、延續，jQuery easyUI集成了很多用户界面插件，我們在做頁面佈局的時候只要引用這些插件即可快速地佈局出頁面，而無需敲很多的代碼，通常作為前端框架來使用，但是要注意easyUI是收費的，在做網站時需要購買版權才可以使用它，而在學習的時候則可以直接在網上下載一些教程來使用即可，無需付費。那麼我們該怎麼來學習jQuery easyUI呢？
操作方法
（01）下載demo首先在搜狗瀏覽器的地址欄中輸入【jQuery easyUI 中文網】，第一個就是了，直接點擊進入。然後在該網站中找到並點擊【EasyUI下載】，由於我們是學習用的，而非商用，所以直接點擊【官方下載】即可。注：如果是作為商用的話，則點擊【購買商業版】。最後再點擊【Download】下載demo，雖然也可以在線上瀏覽查看即可，不過直接下載下來在無網絡的情況下也可以查看，而且運行速度較快。
（02）解壓下載下來的文件包我們放在了F盤裏面，解壓【】，注意解壓的時候要先創建一個文件夾，再將解壓到文件夾裏面，文件夾就命名為jquery-easyui-1.5.2即可。
（03）引入文件把jQuery-easyuui-1.5.2文件夾裏面的themes文件夾複製粘貼到項目中，然後當網頁用到easyUI時都要引入以下的四個文件：<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/><link rel="stylesheet" type="text/css" href="easyui/themes/"/><script type="text/javascript" src="easyui/"></script>
（04）佈局面板從easyUI幫助手冊中的【佈局-->佈局面板layout】複製【創建整個頁面的佈局】。如果沒有下載這個手冊的，可以複製下面的代碼：<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> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body>
（05）預覽然後運行頁面，在瀏覽器中預覽效果。點擊工具欄的【在瀏覽器中預覽/調試】圖標，在瀏覽器中預覽結果。
（06）修改我們把面板East和South去掉。然後按鍵盤F5刷新下頁面。或者也可以把West和south面板去掉，根據需要選擇或者保留面板。注意，面板是可以嵌套使用的。比如我們在center中再加一個面板。
（07）解析對佈局面板中用到的一些重要屬性進行解析：[1]title:表示定義佈局面板的標題[2]region：表示定義佈局面板的位置，佈局面板的位置有5個north/sourth/east/west/center[3]border：表示佈局面板是否有邊框，默認是有邊框，即值為true，把border屬性去掉或者值改為false，即可去掉邊框。[4]split:表示分隔條，即通過是否可以通過拖動改變佈局面板的大小。[5]iconCls:佈局面板的頭部圖標，這個都是easyUI中的css類。
特別提示
個人看法，僅供參考
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/jy/jiaoliu/1oqdod.html
