1. 程式人生 > >曹鋒老師《一頭扎進EasyUI視訊教程》學習筆記(1)

曹鋒老師《一頭扎進EasyUI視訊教程》學習筆記(1)

介紹了一本書《深入淺出設計模式》,來說明“一頭扎進”這個系列名字的由來。

參考資料:
1、Easyui中文示例文件
http://www.java1234.com/easyui.html
說明:這份文件是這個視訊教程非常重要的一份線上文件和參考資料。當然還有很多 easyui 的文件還是非常不錯的,為了突出這份文件對於這份視訊教程和學習筆記的重要性,所以只放置了這樣一份參考資料。

搭建 easyui 框架的最小化配置。
因為我沒有找到 esayui 的 CDN,所以就採取了相對路徑的配置方式。

<!DOCTYPE html>
<html lang="en">
<head
>
<meta charset="UTF-8"> <title>Document</title> <link type="text/css" rel="stylesheet" href="../js/jquery-easyui-1.4.1/themes/default/easyui.css"> <link type="text/css" rel="stylesheet" href="../js/jquery-easyui-1.4.1/themes/icon.css"> </head> <body> <script
type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.min.js">
</script> <script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> </body> </html
>

本講主要講解了以下內容。
一、panel元件
1、基本面板元件
2、面板工具
開啟、關閉、展開、摺疊(collapsible)。
關注 data-options 這個屬性。
3、定製工具
tools 這個屬性。
根據你的特殊需求,自定義工具。
設定 class 屬性,顯示圖示。
4、載入內容
非同步載入。
5、巢狀面板
元件是最小化的 ui 單元。
fit:true 使勁往外頂。
spilt:true 可以左右伸縮的。
注意:一定要有一個 region:’center’ 的 div。