界面設計
詳見：http://www.w3school.com.cnjavascript
1、html && xhtml && html5php
html:css
一、html格式：<p>段落</p>html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX </title>
</head>
<body>
</body>
</html>
二、被重定向到新的地址(5 秒內):<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />前端
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />html5
三、<br/> 標籤訂義換行java
四、<ins>：下劃線（定義被插入文本）；若是文本不是超連接，就不要<u>對其使用下劃線</u>。node
五、邊框上顯示信息python
<fieldset>
<legend>邊框信息</legend>
</fieldset>jquery
六、顯示度量值：<meter value="3" min="0" max="10"></meter>
七、導航條：
<nav>
<a href="/html/index.asp">Home</a>
<a href="/html/html_elements.asp">Next</a>
</nav>
八、框架：
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的瀏覽器沒法處理框架！</body> </noframes> </frameset>
九、<noscript>定義針對不支持客戶端腳本的用戶的替代內容。</noscript>
十、<object> 定義內嵌對象。
十一、<ol> 標籤訂義有序列表
<ol start="50"> <li>50</li> <li>51</li> <li>52</li> </ol>
十二、經過 <optgroup> 標籤把相關的選項組合在一塊兒：
<select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select>
1三、執行計算而後在 <output> 元素中顯示結果：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <p><b>註釋：</b>Internet Explorer 不支持 <output> 標籤。</p>
1四、使用函數來加載 XML 文檔
<html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=loadXMLDoc("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html>
1五、進度：<progress value="22" max="100"></progress>
1六、<q>瀏覽器在引用的周圍插入了引號</q>
1七、<sub> 定義下標文本。<sup> 標籤可定義上標文本
1八、爲 <details> 元素定義可見的標題。
<details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5. </details>
1九、HTML5 視頻：<video src="/i/movie.ogg" controls="controls"></video>
20、hour時提示詳細信息。標記一個縮寫：<abbr title="People's Republic of China">PRC</abbr>。標記一個首字母縮寫：<acronym title="World Wide Web">WWW</acronym>
2一、規定了一個相對地址<base href="http://www.w3school.com.cn/i/" /> 下：<img src="eg_smile.gif" />
2二、從右向左輸出 (rtl)：<bdo dir="rtl"> text</bdo>
2三、換行並增長外邊距：blockquote
2四、<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。
2五、<embed src="/i/helloworld.swf" />
2六、"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
2七、<a href="mailto:someone@example.com">someone@example.com</a>
2八、簡單的三框架頁面：cols垂直框架、rows水平框架,邊框是沒法移動noresize ;指定到指定節 <frame src="/example/html/link.html#C10">
iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）。
<frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset>
2九、刪除文本和下劃線文本： <del>二十</del> <ins>十二</ins> 、map、mark、加雙引號：<q>quotation</q>，<u> 標籤爲文本添加下劃線、strong加粗、<strike> 標籤可定義加刪除線文本定義
xhtml: XHTML不是HTML 5 的升級版本，是做爲一種 XML 應用被從新定義的 HTML，是一個 W3C 標準。
一、DOCTYPE 沒有關閉標籤
二、在 XHTML 文檔中doctype、html、head、body 以及 title元素是強制性的
三、lang 屬性的正確用法：<div lang="en" xml:lang="en">Hello World!</div>
四、XHTML 元素必須被正確地嵌套，XHTML 元素必須被關閉，標籤名必須用小寫字母，XHTML 文檔必須擁有根元素。
html5:
一、HTML5 將成爲 HTML、XHTML 以及 HTML DOM 的新標準。
二、Canvas 和 SVG 都容許您在瀏覽器中建立圖形，可是它們在根本上是不一樣的
Canvas SVG
依賴分辨率 不依賴分辨率
不支持事件處理器 支持事件處理器
弱的文本渲染能力 最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
可以以 .png 或 .jpg 格式保存結果圖像 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 不適合遊戲應用
三、localStorage - 沒有時間限制的數據存儲；sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口後，數據會被刪除。
四、視頻video及音頻audio：control 屬性供添加播放、暫停和音量控件。包含寬度和高度屬性也是不錯的主意。<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的
五、拖放：把 draggable 屬性設置爲 true；
ondragstart 屬性調用函數：drag(event)，其內dataTransfer.setData() 方法設置被拖數據的數據類型和值；ondragover 事件規定在何處放置被拖動的數據，默認地，沒法將數據/元素放置到其餘元素中，若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。這要經過調用 ondragover 事件的 event.preventDefault() 方法：當放置被拖數據時，會發生 drop 事件。
六、使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。<html manifest="demo.appcache">manifest 文件的建議的文件擴展名是：".appcache"。
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
請注意，manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。
CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存，是必需的；當 manifest 文件加載後，瀏覽器會從網站的根目錄下載其下列出的文件
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存；永遠不會被緩存，且離線時是不可用的；可使用星號來指示全部其餘資源/文件都須要因特網鏈接
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）；小節規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /offline.html
一旦文件被緩存，則瀏覽器會繼續展現已緩存的版本，即便您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您須要更新 manifest 文件。
七、web worker 是運行在後臺的 JavaScript，不會影響頁面的性能。typeof(Worker)!=="undefined"判斷瀏覽器是否支持。postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息； 向 web worker 添加一個 "onmessage" 事件監聽器：w.onmessage=function(event){};如需終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法.
八、HTML5 服務器發送事件（server-sent event）容許網頁得到來自服務器的更新:EventSource 對象用於接收服務器發送事件通知\onopen當通往服務器的鏈接被打開\onmessage當接收到消息
建立一個新的 EventSource 對象，而後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"）
每接收到一次更新，就會發生 onmessage 事件
服務器端事件流的語法是很是簡單的。把 "Content-Type" 報頭設置爲 "text/event-stream"。如今，您能夠開始發送事件流了。
輸出發送數據（始終以 "data: " 開頭）具體以下：
//PHP 代碼 (demo_sse.php)： <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> //具體實現代碼： <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script>
九、HTML5 擁有多個新的表單輸入類型：email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color；datalist、keygen、output
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能;novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域;formaction - 重寫表單的 action 屬性\formnovalidate - 重寫表單的 novalidate 屬性\formenctype - 重寫表單的 enctype 屬性\formmethod - 重寫表單的 method 屬性\formtarget - 重寫表單的 target 屬性;placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。pattern 屬性規定用於驗證 input 域的模式（pattern）,模式（pattern） 是正則表達式。required \multiple
註釋：autocomplete 適用於 <form> 標籤，以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。
十、HTML5 以前的 HTML 版本是HTML 4.01；在 HTML5 中，哪一個元素用於組合標題元素<hgroup>；HTML5 中再也不支持<font>元素；在 HTML5 中再也不支持 <script> 元素的type屬性；由 SVG 定義的圖形是XML格式； HTML5 內建的getContext對象用於在畫布上繪製；HTML5的<meter> 元素用於顯示已知範圍內的標量測量
十一、引入網頁<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
2、CSS（詳細：http://www.w3school.com.cn）
一、margin:上 右 下 左
二、overflow 屬性規定當內容溢出元素框時發生的事情。包括自動換行、滾動欄等
三、position:relative;overflow:hidden; display:none；
* 四、多個div按百分比（%）並列於一行：display:inlineblack與float:left|right並用才能夠到達無縫效果。具體以下：
<div>
<div style = "width:20%;float:left; display:inline-block; background:red;border:1px dotted preparent">1</div>
<div style="width:60%;display:inline-block;background:blue;border:0px" align = "center">
<div>44</div>
<div>44</div>
<div>44</div>
</div>
<div style = "width:20%;display:inline-block;float:right;border:0px;background:green">66</div>
</div>
五、內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味着它將優先於如下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
六、在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的；在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。
七、 :first-child 僞類來選擇元素的第一個子元素。li.first-child{text-transform:uppercase;}註釋：必須聲明 <!DOCTYPE>，這樣 :first-child 才能在 IE 中生效。選擇器匹配全部 <p> 元素中的第一個 <i> 元素：p > i:first-child {font-weight:bold;} ;選擇器匹配全部做爲元素的第一個子元素的 <p> 元素中的全部 <i> 元素：p:first-child i {color:blue;};:lang 僞類使你有能力爲不一樣的語言定義特殊的規則。在下面的例子中，:lang 類爲屬性值爲 no 的 q 元素定義引號的類型：q:lang(no){quotes: "~" "~"} \ <q lang="no">段落中的引用的文字</q>;:active 向被激活的元素添加樣式。
:focus 向擁有鍵盤輸入焦點的元素添加樣式。:hover 當鼠標懸浮在元素上方時，向元素添加樣式。 :link 向未被訪問的連接添加樣式。
:visited 向已被訪問的連接添加樣式。 :first-child 向元素的第一個子元素添加樣式。 :lang 向帶有指定 lang 屬性的元素添加樣式。
"first-line" 僞元素用於向文本的首行設置特殊樣式 (p:first-line {color: #ff0000;font-variant: small-caps})
"first-letter" 僞元素用於向文本的首字母設置特殊樣式：p:first-letter{color:#ff0000;font-size:xx-large;}
":before" 僞元素能夠在元素的內容前面插入新內容:h1:before {content:url(/i/logo.gif)}
":after" 僞元素能夠在元素的內容以後插入新內容:h1:after{content:url(logo.gif);}
八、派生選擇器：li strong {}
id 選擇器：以 "#" 來定義：#red {color:red;} <p id="red">紅色。</p> #sidebar p {}
類選擇器以一個點號顯示：.center {text-align: center} .fancy td {} <td class="fancy">
HTML 元素設置樣式：[title]{color:red;} [title=name]{border:5px solid blue;} input[type="button"]{}
空格分隔的屬性值:[title~=hello]{color:red;} //好比：title值如："hey hello boy"
連字符分隔的屬性值：[lang|=en] { color:red; } //好比：<p lang="en-us">Hi!</p>
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每一個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每一個元素。
[attribute*=value] 匹配屬性值中包含指定值的每一個元素。
九、<link rel="stylesheet" type="text/css" href="mystyle.css" />
body {background-image: url("images/back40.gif");}
一、背景：
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center; //100% 100%;
background-attachment:fixed
background-repeat 屬性設置是否及如何重複背景圖像。值：repeat、repeat-x、repeat-y、no-repeat、inherit,默認repeat：背景圖像在水
平和垂直方向上重複。
全部背景屬性在一個聲明之中：background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
二、文本
縮進：text-indent: 1cm; //5%
對齊：text-align: justify //兩端對齊 及 center
字母間距：letter-spacing: 5px //默認值 normal
單詞間距：word-spacing：5px //默認值 normal
字符轉換：text-transform：none //默認值 none 對文本不作任何改動，將使用源文檔中的原有大小寫。uppercase 和 lowercase 將文
本轉換爲全大寫和全小寫字符;capitalize 只對每一個單詞的首字母大寫。
文本修飾：text-decoration: none //值：none、underline、overline、line-through，blinktext-decoration 值會替換而不是累積起來
處理空白符：white-space: normal; //會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。normal：合併全部的空白符，並忽
略換行符;pre：空白符、換行不會被忽略;nowrap：防止元素中的文本換行；pre-wrap ：瀏覽器不只會保留空白符並保留換行符，還容許自動換行
； pre-line：瀏覽器會保留換行符，並容許自動換行，可是會合並空白符。
文本方向：direction //屬性有兩個值：ltr 和 rtl;對於行內元素，只有當 unicode-bidi 屬性設置爲 embed 或 bidi-override 時纔會應用
direction 屬性。
三、字體：font-family系列;font-size:大小;font-weight:加粗;font-style :風格（如斜體）;font-variant:變形（如小型大寫字母）。
四、連接：a:link - 普通的、未被訪問的連接；a:visited - 用戶已訪問的連接；a:hover - 鼠標指針位於連接的上方；a:active - 連接被點擊的
時刻。
五、列表
列表類型：list-style-type //circle、square，upper-roman、lower-alpha
列表圖像：list-style-image : url(xxx.gif)
列表標誌位置：list-style-position
簡寫列表樣式：list-style : url(example.gif) square inside
六、表格
border-collapse 設置是否把表格邊框合併爲單一的邊框。值：separate、collapse
border-spacing 設置分隔單元格邊框的距離。
caption-side 設置表格標題的位置。
empty-cells 設置是否顯示錶格中的空單元格。
table-layout 設置顯示單元、行和列的算法。
注：必須有：<!DOCTYPE>
七、輪廓
outline 在一個聲明中設置全部的輪廓屬性。
outline-color 設置輪廓的顏色。
outline-style 設置輪廓的樣式。
outline-width 設置輪廓的寬度。
八、元素框：增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸；元素的背景是內容、內邊距和邊框區的背景
padding ：接受長度值或百分比值，但不容許使用負值。padding-top、padding-right、padding-bottom、padding-left。
border ：邊框樣式border-style: none、dotted、dashed、solid、double、groove、ridge、outset、inset、inherit。
border-width:能夠指定長度值或thin 、medium（默認值） 和 thick。
border-color: blue rgb(25%,35%,45%) #909090 red;transparent 使用邊框就像是額外的內邊距同樣；此外在須要的時候使其
可見；元素的背景會延伸到邊框區域。
margin ：設置外邊距會在元素外建立額外的「空白」，接受任何長度單位、百分數值甚至負值。
外邊距合併：當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併；
當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併；
假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生合併；
若是這個外邊距遇到另外一個元素的外邊距，它還會發生合併。
九、定位和浮動
塊和行：div、h1 或 p 元素經常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容，即「塊框」。與之相反，span 和 strong 等元素
稱爲「行內元素」，這是由於它們的內容顯示在行中，即「行內框」。
經過將 display 屬性設置爲 block，可讓行內元素（好比 <a> 元素）表現得像塊級元素同樣。還能夠經過把 display 設置爲
none，讓生成的元素根本沒有框。這樣的話，該框及其全部內容就再也不顯示，不佔用文檔中的空間。
把一些文本添加到一個塊級元素（好比 div）的開頭。即便沒有把這些文本定義爲段落，它也會被看成段落對待。
定位機制：普通流、浮動和絕對定位。除非專門指定，不然全部框都在普通流中定位。行內框在一行中水平佈置。可使用水平內邊距、
邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行造成的水平框稱爲行框（Line Box），行框的高度
老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。
position 屬性值的含義：
static：元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素
中。
relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。
absolute:元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在
正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed:元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。
提示：相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。
十、溢出:overflow: 自動地處理溢出auto、scroll、hidden
十一、剪切圖片 img {position:absolute;clip:rect(0px 50px 200px 0px)}
十二、垂直顯示：vertical-align:
1三、優先級：-index可被用於將在一個元素放置於另外一元素以後。Z-index: -1 擁有更低的優先級;默認的 z-index 是 0；值若爲1優先級更高。
position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow 設置當元素的內容溢出其區域時發生的事情。
clip 設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。
vertical-align 設置元素的垂直對齊方式。
z-index 設置元素的堆疊順序。
1四、定位
relative：相對定位，設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它本來所佔的空間仍保留。
注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。
absolute：絕對定位，設置爲絕對定位的元素框從文檔流徹底刪除，並相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初
始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生
成何種類型的框。
提示：由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。能夠經過設置 z-index 屬性來控制這些框的堆放次序。
相對定位是「相對於」元素在文檔中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，若是不存在已定位的祖先元素，那麼
「相對於」最初的包含塊。
float:浮動,浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，所
以文檔的普通流中的塊框表現得就像浮動框不存在同樣。
行框和清理：浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。所以，建立浮動框可使文本圍繞圖像。要想阻止行
框圍繞浮動框，須要對該框應用 clear 屬性。clear 屬性規定元素的哪一側不容許其餘浮動元素。
clear 屬性的值能夠是 left、right、both 或
none，它表示框的哪些邊不該該挨着浮動框。
1五、選擇器
元素選擇器：一般將是某個 HTML 元素，好比 p、h一、em、a，甚至能夠是 html 自己；
分組：經過分組，創做者能夠將某些類型的樣式「壓縮」在一塊兒，這樣就能夠獲得更簡潔的樣式表。h1, h2, h3, h4, h5, h6
{color:blue;}
通配選擇器（universal selector）：顯示爲一個星號（*），如：* {color:red;}。
類選擇器：容許以一種獨立於文檔元素的方式來指定樣式。.class_style {color:red;}
多類選擇器:一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔.如：<p class="important warning"></p>
ID 選擇器:容許以一種獨立於文檔元素的方式來指定樣式。ID 選擇器前面有一個 # 號 - 也稱爲棋盤號或井號。只能在文檔中使用一次;
不能使用 ID 詞列表;
屬性選擇器:能夠根據元素的屬性及屬性值來選擇元素。好比：a[href][title] {color:red;}；
指向 Web 服務器上某個指定文檔的超連接變成紅色：a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
若是須要根據屬性值中的詞列表的某個詞進行選擇，則須要使用波浪號（~）：p[class~="important"] {color: red;}
p.important 和 p[class="important"] 應用到 HTML 文檔時是等價的。
簡單屬性選擇、根據具體屬性值選擇、屬性與屬性值必須徹底匹配、根據部分屬性值選擇、子串匹配屬性選擇器、特定屬性選擇
類型、
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每一個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每一個元素。
[attribute*=value] 匹配屬性值中包含指定值的每一個元素。
後代選擇器（descendant selector）又稱爲包含選擇器。後代選擇器能夠選擇做爲某元素後代的元素。根據上下文選擇元素：h1 em {}
屬性選擇器：能夠根據元素的屬性及屬性值來選擇元素
子元素選擇器（Child selectors）：只能選擇做爲某元素子元素的元素。
相鄰兄弟選擇器（Adjacent sibling selector）：可選擇緊接在另外一元素後的元素，且兩者有相同父元素。若是要增長緊接在 h1 元素後
出現的段落的上邊距，能夠這樣寫：h1 + p {margin-top:50px;}
結合其餘選擇器：相鄰兄弟結合符還能夠結合其餘結合符：html > body table + ul {margin-top:20px;}
僞類：用於向某些選擇器添加特殊的效果。a:link、a:visited 、a:hover 、a:active ；
<a class="one" href="/index.html" target="_blank"> 對應 a.one:link {}；
focus 僞類:input:focus{background-color:yellow;}
first-child僞類:來選擇元素的第一個子元素。li:first-child {text-transform:uppercase;}
lang僞類:使你有能力爲不一樣的語言定義特殊的規則。q:lang(no){quotes: "~" "~"} <q lang="no">test</q>
active僞類:向被激活的元素添加樣式。
僞元素：用於向某些選擇器設置特殊效果。
1六、尺寸屬性
height 設置元素的高度。 line-height 設置行高。 max-height 設置元素的最大高度。
max-width 設置元素的最大寬度。 min-height 設置元素的最小高度。 min-width 設置元素的最小寬度。
width 設置元素的寬度。
1七、分類
clear 設置一個元素的側面是否容許其餘的浮動元素。
cursor 規定當指向某元素之上時顯示的指針類型。
display 設置是否及如何顯示元素。
float 定義元素在哪一個方向浮動。
position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
visibility 設置元素是否可見或不可見。
1八、背景圖片：background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
div透明度：opacity 屬性可以設置的值從 0.0 到 1.0或更早filter:alpha(opacity=60);
1九、@media 規則使你有能力在相同的樣式表中，使用不一樣的樣式規則來針對不一樣的媒介。
<style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style>
| all | 用於全部的媒介設備。 |
| aural | 用於語音和音頻合成器。 |
| braille | 用於盲人用點字法觸覺回饋設備。 |
| embossed | 用於分頁的盲人用點字法打印機。 |
| handheld | 用於小的手持的設備。 |
| 用於打印機。 | |
| projection | 用於方案展現，好比幻燈片。 |
| screen | 用於電腦顯示器。 |
| tty | 用於使用固定密度字母柵格的媒介，好比電傳打字機和終端。 |
| tv | 用於電視機類型的設備。 |
20、background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
CSS 文件中插入註釋：/* this is a comment */；顯示沒有下劃線的超連接：a {text-decoration:none}；文本以大寫字母開頭：text-transform:capitalize
2一、div旋轉角度
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
CSS3：
一、圓角邊框：border-radius:25px;
向矩形添加陰影：box-shadow: 10px 10px 5px #888888;
使用圖片來繪製邊框 ：border-image:url(/i/border.png) 30 30 round; //stretch
二、background-size 屬性規定背景圖片的尺寸：background-size:40% 100%;
background-origin 屬性規定背景圖片的定位區域。背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。
多個背景圖片：background-image:url(bg_flower.gif),url(bg_flower_2.gif);
background-clip 規定背景的繪製區域。
三、字體：水平陰影、垂直陰影、模糊距離，以及陰影的顏色：
hanging-punctuation 規定標點字符是否位於線框以外。
text-outline 規定文本的輪廓。
text-overflow 規定當文本溢出包含元素時發生的事情。
text-shadow 向文本添加陰影。
text-wrap 規定文本的換行規則。
word-wrap 容許對長的不可分割的單詞進行分割並換行到下一行。
punctuation-trim 規定是否對標點字符進行修剪。
text-align-last 設置如何對齊最後一行或緊挨着強制換行符以前的行。
text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。
text-justify 規定當 text-align 設置爲 "justify" 時所使用的對齊方法。
word-break 規定非中日韓文本的換行規則。
四、CSS3 @font-face 規則中定義顯示字體
@font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'), url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }
五、經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。
2D轉換：translate()：元素從其當前位置移動；
rotate()：元素順時針旋轉給定的角度rotate(30deg)；
scale()：元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數
skew()：元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數
matrix()：方法把全部 2D 轉換方法組合在一塊兒。方法須要六個參數，包含數學函數，容許您：旋轉、縮放、移動以及傾斜元素。
3D 轉換： rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
| 屬性 | 描述 | CSS |
|---|---|---|
| transform | 向元素應用 2D 或 3D 轉換。 | 3 |
| transform-origin | 容許你改變被轉換元素的位置。 | 3 |
| transform-style | 規定被嵌套元素如何在 3D 空間中顯示。 | 3 |
| perspective | 規定 3D 元素的透視效果。 | 3 |
| perspective-origin | 規定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定義元素在不面對屏幕時是否可見。 |
六、CSS3能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果
寬度屬性的過渡效果，時長爲 2 秒：transition: width 2s;
<style> div { width:100px; height:100px; background:yellow; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style>
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果什麼時候開始。默認是 0。
<style> div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } div:hover { width:200px; } </style>
過渡效果會在開始以前等待兩秒：transition-property:width 1s linear 2s;
七、 CSS3可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
@keyframes 規則： 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。您在 @keyframes 中建立動畫時，請把它捆綁到某個選擇器，不然不會產生動畫效果。
動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。您能夠改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
animation: myfirst 5s linear 2s infinite alternate;
@keyframes 規定動畫。
animation 全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
animation-delay 規定動畫什麼時候開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1。
animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode 規定對象動畫時間以外的狀態。
<style> div { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body>
八、div多行多格
column-count 屬性規定元素應該被分隔的列數;column-gap 屬性規定列之間的間隔;column-rule 屬性設置列之間的寬度、樣式和顏色規則。
column-count 規定元素應該被分隔的列數。
column-fill 規定如何填充列。
column-gap 規定列之間的間隔。
column-rule 設置全部 column-rule-* 屬性的簡寫屬性。
column-rule-color 規定列之間規則的顏色。
column-rule-style 規定列之間規則的樣式。
column-rule-width 規定列之間規則的寬度。
column-span 規定元素應該橫跨的列數。
column-width 規定列的寬度。
columns 規定設置 column-width 和 column-count 的簡寫屬性。
九、新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。
resize 屬性規定是否可由用戶調整元素尺寸；box-sizing 屬性容許您以確切的方式定義適應某個區域的具體內容；outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
appearance 容許您將元素設置爲標準用戶界面元素的外觀
box-sizing 容許您以確切的方式定義適應某個區域的具體內容。
icon 爲創做者提供使用圖標化等價物來設置元素樣式的能力。
nav-down 規定在使用 arrow-down 導航鍵時向何處導航。
nav-index 設置元素的 tab 鍵控制次序。
nav-left 規定在使用 arrow-left 導航鍵時向何處導航。
nav-right 規定在使用 arrow-right 導航鍵時向何處導航。
nav-up 規定在使用 arrow-up 導航鍵時向何處導航。
outline-offset 對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
resize 規定是否可由用戶對元素的尺寸進行調整。
3、javascript
JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對於傳統編程來講，會在執行前對全部代碼進行編譯。JavaScript 對大小寫是敏感的。JavaScript 可以改變頁面中的全部 HTML 元素、 HTML 屬性、CSS 樣式，而且可以對頁面中的全部事件作出反應。
一、格式：腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。在文本字符串中使用反斜槓對代碼行進行換行。單行註釋以 // 開頭。
<script type="text/javascript"> var idx = 1; function addPanel(){ idx++; } </script>
注：如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：<script src="myScript.js"></script>
二、document：
您只能在 HTML 輸出中使用 document.write。若是您在文檔加載後使用該方法，會覆蓋整個文檔.document.write("<h1>This is a heading</h1>");
經過 id、標籤名、 類名找到 HTML 元素。注：經過類名查找 HTML 元素在 IE 5,6,7,8 中無效。
使用 JavaScript 來處理 HTML 內容是很是強大的功能:document.getElementById("id");x.innerHTML = "Hello JavaScript";
三、 isNaN(ix)：判斷Ix是不是數字。
四、若是從新聲明 JavaScript 變量，該變量的值不會丟失。如：var carname="Volvo";var carname;變量 carname 的值依然是 "Volvo"。
五、JavaScript 變量均爲對象。當您聲明一個變量時，就建立了一個新的對象。Undefined 這個值表示變量不含有值。能夠經過將變量的值設置爲 null 來清空變量。當您聲明新變量時，可使用關鍵詞 "new" 來聲明其類型。
六、JavaScript 變量的生命期從它們被聲明的時間開始。局部變量會在函數運行之後被刪除。全局變量會在頁面關閉後被刪除。若是您把值賦給還沒有聲明的變量，該變量將被自動做爲全局變量聲明。
七、數字與字符竄相加結果爲字符串。
八、JavaScript驗證
<html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} } } </script> </head> <body> <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html>
九、事件：
onload 和 onunload 事件：在用戶進入或離開頁面時被觸發。onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。onload 和 onunload 事件可用於處理 cookie。
onchange 事件：常結合對輸入字段的驗證來使用。
onmouseover 和 onmouseout 事件：可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的全部部分。
onfocus:當輸入字段得到焦點時。
十、Javascript建立html元素（段落）
var para=document.createElement("p"); var node=document.createTextNode("這是新段落。"); para.appendChild(node);
十一、javascript類：JavaScript 是面向對象的語言，但 JavaScript 不使用類。在 JavaScript 中，不會建立類，也不會經過類來建立對象（就像在其餘面向對象的語言中那樣）。JavaScript 基於 prototype，而不是基於類的。
1）在構造器函數內部定義對象的方法：
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; this.changeName=changeName; function changeName(name) { this.lastname=name; } }
2）JavaScript中 for...in 語句循環遍歷對象的每一個屬性。
十二、JavaScript數字：都爲64位， 不定義不一樣類型的數字。整數（不使用小數點或指數計數法）最多爲 15 位。小數的最大位數是 17，可是浮點運算並不老是 100% 準確。
1三、javascript字符串：
1）match()方法：如何使用 match() 來查找字符串中特定的字符，而且若是找到的話，則返回這個字符。
1四、javascript時間：
1）Date() 方法得到當日的日期
2）getTime() 返回從 1970 年 1 月 1 日至今的毫秒數。
3）setFullYear() 設置具體的日期。注意：表示月份的參數介於 0 到 11 之間。也就是說，若是但願把月設置爲 8 月，則參數應該是 7。
4）getDay() 和數組來顯示星期，而不只僅是數字。
5）toUTCString() 將當日的日期（根據 UTC）轉換爲字符串
1五、javascript數組：
1）concat() 方法來合併兩個數組。
2）join() 方法將數組的全部元素組成一個字符串
3）數字排序
function sortNumber(a, b) { return a - b } //arr 數字數組 arr.sort(sortNumber)
1六、javascript數值
1）random() 來返回 0 到 1 之間的隨機數。
2）round()對一個數進行四捨五入
1七、RegExp （正則表達式）：
1）test() 方法檢索字符串中的指定值。返回值是 true 或 false。
2）exec() 方法檢索字符串中的指定值。返回值是被找到的值。若是沒有發現匹配，則返回 null。
3）compile() 方法用於改變 RegExp。 既能夠改變檢索模式，也能夠添加或刪除第二個參數。
1八、Window
1）location：
location.hostname 返回 web 主機的域名；
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）
location.href 屬性返回當前頁面的 URL。
location.assign() 方法加載新的文檔。
2）navigator 對象在編寫時可不使用 window 這個前綴。注意：來自 navigator 對象的信息具備誤導性，不該該被用於檢測瀏覽器版本。
1九、消息
1)prompt:提示框常常用於提示用戶在進入頁面前輸入某個值。
2)confirm:確認框用於使用戶能夠驗證或者接受某些信息。
3)alert:警告框常常用於確保用戶能夠獲得某些信息。
20、計時事件：經過使用 JavaScript設定時間間隔，時間間隔以後來執行代碼，而不是在函數被調用後當即執行。
var t=setTimeout("javascript語句",毫秒);
clearTimeout(t);
2一、JavaScript無類型
1）函數：定義函數時，無返回類型，實現中直接返回值
2）catch:其參數無類型，直接捕獲錯誤
2二、onerror函數：將自定義（參數可變）的函數賦值給onerror,則發生錯誤時，直接調用該函數(onerror=handleErrFunc--自定義函數名)
2三、額外知識：
1）外部腳本不必定必須包含 <script> 標籤
2）在 JavaScript 中，有兩種不一樣類型的循環，for 循環和 while 循環。
3）在瀏覽器的狀態欄放入一條消息：window.status = "put your message here"
4、JqueryEasyUi
必須引用的css和js（最後放在head標籤內）：
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
jQuery 函數是 $() 函數。若是您向該函數傳遞 DOM 對象，它會返回 jQuery 對象，帶有向其添加的 jQuery 功能。jQuery 返回 jQuery 對象，與已傳遞的 DOM 對象不一樣。jQuery 對象擁有的屬性和方法，與 DOM 對象的不一樣。您不能在 jQuery 對象上使用 HTML DOM 的屬性和方法。$();裏面執行，就是onLoad就執行
加載事件爲例：
//javascript function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction; //jquery function myFunction() { $("#h01").html("Hello jQuery"); } $(document).ready(myFunction);
注：$("#h01").attr("style","color:red").html("Hello jQuery");
一、easyui-tree格式必須以下： 同7
<ul class="easyui-tree"> <li> <span>Foods</span> <ul> <li> <span>Fruits</span> <ul> <li>apple</li> <li>orange</li> </ul> </li> </ul> </li> </ul>
注：給span添加樣式，樣式結果無效。
二、easyui-accordion格式以下：
<div class="easyui-accordion" style="width:500px;height:300px;"> <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion</h3> <p>Accordion </p> </div> </div>
注：若不引用easyui-accordion,則直接使用data-options = "iconCls:'icon-ok'"失效。
對使用easyui-accordion類的div進行操做：$(#divid).accordion(select|getSelected|getPannelIndex|remove|add)
三、easyui-linkbutton格式以下：
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="JsFunc()">Title</a> <script type="text/javascript"> function JsFunc(){ } </script>
注：1）plain:當True時顯示一個普通效果（背景透明）。默認false。
2）設置按鈕圖標位置：
<div style="margin:10px 0 20px 0"> <span>Select Icon Align: </span> <select onchange="$('#button-bar a').linkbutton({iconAlign:this.value})"> <option value="left">Left</option> <option value="right">Right</option> <option value="top">Top</option> <option value="bottom">Bottom</option> </select> </div> <div id="button-bar"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a> </div>
3）設置屬性
按鈕不可用：disabled:true;
設置按鈕大小：style="width:80px";
圖釘狀態：toggle:true;
對齊：iconAlign:'top';
按鈕背景透明：在引用easyui-plain類的div下,添加plain:true
設置按鈕所屬組別：group:'g1'
四、easyui-window格式以下:
<div id="w" class="easyui-window" title="Custom Window Tools" data-options="iconCls:'icon-save',minimizable:false,tools:'#tt'" style="width:500px;height:200px;padding:10px;"> The window content. </div> <div id="tt"> <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a> //icon-edit、icon-cut、icon-help </div>
1）調用：onclick="$('#w').window('close')";//open
2）添加工具：data-options="tools:'#divId'"
3）設置爲內置窗體：data-options="inline:true"
4）設置爲模式窗體：data-options="modal:true,closed:true"
五、easyui-panel格式以下：所屬div自帶邊框
<div class="easyui-panel" style="position:relative;width:500px;height:300px;overflow:auto;"> </div>
0-1）設置默認屬性：data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"
0-2）經過按鈕操做panel:<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>//panel('close')、panel('expand',true)、panel('collapse',true)
1）fit:當True時設置該面板尺寸適合於它的父容器。默認false。
2）doSize:若是設置爲True，該面板將重繪大小，並重建佈局。默認true
3）tools:自定義工具欄，每一個工具都包含兩個屬性:iconCls、handler。
4）href:一個url，加載遠程數據並顯示在面板中。
5）loadingMessage:當加載遠程數據時，在面板中顯示一個消息。默認Loading…
6）open:當forceOpen參數設置爲true時，面板打開時繞過onBeforeOpen回調函數。
7）close:當forceClose參數設置爲true時，該面板關閉時繞過onBeforeClose回調函數。
8）destroy:當forceDestroy參數設置爲true時該面板銷燬時繞過onBeforeDestroy回調函數。
9）refresh:當href屬性設置後刷新該面板以加載遠程數據。
10）內嵌panel(nestedpanel)格式：子div設置爲easyui-layout類。
<div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',split:true" style="width:100px;padding:10px"> Left Content </div> <div data-options="region:'east'" style="width:100px;padding:10px"> Right Content </div> <div data-options="region:'center'" style="padding:10px"> Right Content </div> </div> </div>
11）加載工具按鈕及實現加載內容：
data-options=" tools:[{ iconCls:'icon-reload', handler:function(){ $('#p').panel('refresh', '_content.html'); } }] "
12）經過標籤加載工具：
<div class="easyui-panel" data-options="iconCls:'icon-save',closable:true,tools:'#tt'"> </div> <div id="tt"> <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a> </div>
六、easyui-layout： （子div:data-options="region:'north',split:true"）
1）fit:設置爲true設置layout的大小適應父容器大小
2）region：定義 layout panel 位置, 這個值是下面其中的一個: north, south, east, west, center
3）split：True 顯示分割條,經過此屬性用戶能夠改變panel的大小.注：爲region:center設置split不起做用。
4）panel、collapse、expand、remove參數都是region,而add參數是options{}
5）設置div爲layout:$('#divId').layout();
給div添加內容（在region爲center的div中）：$('#divId').layout('panel','center').append('<p>More Panel Content.</p>');
刪除div內部內容（最後一個<p>段落）：$('#cc').layout('panel','center').find('p:last').remove();
自動設置母div的size：
function setHeight(){ var c = $('#cc'); var p = c.layout('panel','center'); // get the center panel var oldHeight = p.panel('panel').outerHeight(); p.panel('resize', {height:'auto'}); var newHeight = p.panel('panel').outerHeight(); c.height(c.height() + newHeight - oldHeight); c.layout('resize'); }
6）給其內的div加上title則，該div具備摺疊功能：<div data-options="region:'south',split:true" style="height:50px;"></div> 加上title="south" ,但 region:'center'除外
7）佈局整個頁面：將body標籤設置爲easyui-layout類便可。
<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> </body>
8）div不可摺疊：collapsible:false
9）嵌套佈局：在佈局內部的再佈局。即<div class = class="easyui-layout">外佈局<div class = class="easyui-layout">嵌套佈局</div></div>
七、easyui-tree：
1）引用:<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
其中dnd:true：啓用拖拽（drag）和放置（drop）操做。
2）使用 <span> 來組合行內元素，以便經過樣式來格式化它們。
3）對樹的經常使用操做：collapseAll、 expandAll、getSelected、getChecked; 'find'、'expandTo'、'select'
$('#treeId').tree('collapseAll'); // expandAll、getSelected var node = $('# treeId').tree('find',113); $('#treeId').tree('expandTo',node.target).tree('select',node.target);
4）設置樹的複選框（層級、只顯示子葉）：cascadeCheck、onlyLeafCheck
$('#tt').tree({cascadeCheck:$(this).is(':checked')}) $('#tt').tree({onlyLeafCheck:$(this).is(':checked')})
5）編輯樹
<ul id="tt" class="easyui-tree" data-options=" url: 'tree_data1.json', method: 'get', animate: true, onClick: function(node){ $(this).tree('beginEdit',node.target); } "></ul>
6）給樹添加圖標
方法1:在要加載的json數據文件中添加（"iconCls":"icon-save"）
[{ "id":1, "text":"My Documents", "children":[{ "id":16, "text":"Actions", "children":[{ "text":"Add", "iconCls":"icon-add" },{ "text":"Remove", "iconCls":"icon-remove" },{ "text":"Save", "iconCls":"icon-save" },{ "text":"Search", "iconCls":"icon-search" }] }] }]
7）經過右擊按鈕操做樹（onContextMenu: function(e,node){}；及對應的操做$('#tt').tree('remove', node.target); // collapse、expand、appand{parent,data}）
<div class="easyui-panel" style="padding:5px"> <ul id="tt" class="easyui-tree" data-options=" url: 'tree_data1.json', method: 'get', animate: true, onContextMenu: function(e,node){ e.preventDefault(); $(this).tree('select',node.target); $('#mm').menu('show',{ left: e.pageX, top: e.pageY }); } "></ul> </div> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> </div> <script type="text/javascript"> function append(){ var node = $('#tt').tree('getSelected'); $('#tt').tree('append', { parent: (node?node.target:null), data: [{ text: 'new item1' },{ text: 'new item2' }] }); //其餘操做： //$('#tt').tree('remove', node.target); // collapse、expand } </script>
8）修改樹的顯示格式（在data-options=「formatter:function(node){//修改格式return 格式;}」）：
data-options=" url:'tree_data1.json', method:'get', animate:true, formatter:function(node){ var s = node.text; if (node.children){ s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>'; } return s; } "
9）加載過濾（loadFilter:myLoadFilter{(data, parent)}）
<div class="easyui-panel" style="padding:5px"> <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul> </div> <script> function myLoadFilter(data, parent){ var state = $.data(this, 'tree'); function setData(){ var serno = 1; var todo = []; for(var i=0; i<data.length; i++){ todo.push(data[i]); } while(todo.length){ var node = todo.shift(); if (node.id == undefined){ node.id = '_node_' + (serno++); } if (node.children){ node.state = 'closed'; node.children1 = node.children; node.children = undefined; todo = todo.concat(node.children1); } } state.tdata = data; } function find(id){ var data = state.tdata; var cc = [data]; while(cc.length){ var c = cc.shift(); for(var i=0; i<c.length; i++){ var node = c[i]; if (node.id == id){ return node; } else if (node.children1){ cc.push(node.children1); } } } return null; } setData(); var t = $(this); var opts = t.tree('options'); opts.onBeforeExpand = function(node){ var n = find(node.id); if (n.children && n.children.length){return} if (n.children1){ var filter = opts.loadFilter; opts.loadFilter = function(data){return data;}; t.tree('append',{ parent:node.target, data:n.children1 }); opts.loadFilter = filter; n.children = n.children1; } }; return data; } </script>
10）animate:true 動畫顯示；lines:true 添加網格；checkbox:true 添加複選按鈕；dnd:true 拖動和下拉
八、easyui-panel ：
九、easyui-datagrid：
1）引用*.json：<th data-options="field:'fieldName'" width="80">fieldText</th>
<table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true"> <thead> <tr> <th data-options="field:'itemid'" width="80">Item ID</th> </tr> </thead> </table>
2）顯示行號：rownumbers:true
十、easyui-tabs格式：
<div class="easyui-tabs" data-options="fit:true,border:false,plain:true"> <div title="About" </div> <div title="DataGrid" ></div> </div>
1）經過標籤加載tools,並實現添加、刪除tab的操做：
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px"> </div> <div id="tab-tools"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a> </div> <script type="text/javascript"> var index = 0; function addPanel(){ index++; $('#tt').tabs('add',{ title: 'Tab'+index, content: '<div style="padding:10px">Content'+index+'</div>', closable: true }); } function removePanel(){ var tab = $('#tt').tabs('getSelected'); if (tab){ var index = $('#tt').tabs('getTabIndex', tab); $('#tt').tabs('close', index); } } </script>
2）從下拉列表中選擇值設置Tab項的位置：
<select onchange="$('#tt').tabs({tabPosition:this.value})"> <option value="top">Top</option> </select>
3）給tab項設置圖標和文本，並限定圖標和文本的範圍
<div title="<span><img src='images/modem.png'/><br>Modem</span>" style="padding:10px"></div> <style scoped="scoped"> .tt-inner{ display:inline-block; line-height:12px; padding-top:5px; } .tt-inner img{ border:0; } </style>
4）給tab項及子tab添加工具：data-options="tools:'#p-tools'"
注：一個div不能被重複加載。所以要在tab項及子tab同時添加工具，需創建兩個div
5）tab頁加載文檔：data-options="href:'_content.html',closable:true"
6）給tab頁也用頁面：在div中添加<iframe scrolling="yes" frameborder="0" src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
7）自動調整高度：height:auto
8）在tab主界面上設置data-options="tabWidth:112"，則全部tab默認寬度大小是112；在具體子tab上設置時，以子tab上的設置爲準。
9）在tab項上click||hover，彈出下拉菜單
<div id="tt" style="width:700px;height:250px"> <div title="About" style="padding:10px"> <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p> <ul> <li>easyui is a collection of user-interface plugin based on jQuery.</li> <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li> <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li> <li>complete framework for HTML5 web page.</li> <li>easyui save your time and scales while developing your products.</li> <li>easyui is very easy but powerful.</li> </ul> </div> <div title="My Documents" style="padding:10px"> <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul> </div> <div title="Help" style="padding:10px"> This is the help content. </div> </div> <div id="mm"> <div>Welcome</div> <div>Help Contents</div> <div data-options="iconCls:'icon-search'">Search</div> <div>Dynamic Help</div> </div> <script> $(function () { var p = $('#tt').tabs().tabs('tabs')[2]; var mb = p.panel('options').tab.find('a.tabs-inner'); mb.menubutton({ menu: '#mm', iconCls: 'icon-help' }).click(function () { $('#tt').tabs('select', 2); }); }); </script>
將div（含子div）轉換爲tab，則子div就是tab項：$('#divId').tabs().tabs('tabs')[2]; //將div轉化爲tab，獲取全部tab項中的第3項。
將tab項轉換爲下拉菜單：
<script> $(function () { var p = $('#tt').tabs().tabs('tabs')[2]; var mb = p.panel('options').tab.find('a.tabs-inner'); mb.menubutton({ menu: '#mm', iconCls: 'icon-help' }).click(function () { $('#tt').tabs('select', 2); }); }); </script>
10）在tab項上hover時，選中該tab項：
<script type="text/javascript"> $(function(){ var tabs = $('#tt').tabs().tabs('tabs'); for(var i=0; i<tabs.length; i++){ tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){ $('#tt').tabs('select', e.data.index); }); } }); </script>
十一、easyui-propertygrid格式：
<table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', showGroup: true, fit: true, border: false "> </table>
十二、動態生成combo組件：
<select id="cc" style="width:150px"></select> <div id="sp"> <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div> <div style="padding:10px"> <input type="radio" name="lang" value="01"><span>Java</span><br/> <input type="radio" name="lang" value="02"><span>C#</span><br/> <input type="radio" name="lang" value="03"><span>Ruby</span><br/> <input type="radio" name="lang" value="04"><span>Basic</span><br/> <input type="radio" name="lang" value="05"><span>Fortran</span> </div> </div> <script type="text/javascript"> $(function(){ $('#cc').combo({ required:true, editable:false }); $('#sp').appendTo($('#cc').combo('panel')); $('#sp input').click(function(){ var v = $(this).val(); var s = $(this).next('span').text(); $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel'); }); }); </script>
1三、拖動和調整div的大小：class="easyui-draggable easyui-resizable"
<div id="dd" class="easyui-draggable easyui-resizable" data-options="handle:'#mytitle',minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid #ccc"> <div id="mytitle" style="background:#ddd;padding:5px;">Title</div> </div>
1四、easyloader加載日曆、對話框、提示消息、網格數據：<script type="text/javascript" src="../../easyloader.js"></script>。必須使用 using('控件如：calendar', function () ){}格式
<script type="text/javascript" src="../../easyloader.js"></script> <script type="text/javascript"> function load1() { //alert("dd"); using('calendar', function () { $('#cc').calendar({ width: 180, height: 180 }); }); } function load2(){ using(['dialog','messager'], function(){ $('#dd').dialog({ title:'Dialog', width:300, height:200 }); $.messager.show({ title:'info', msg:'dialog created' }); }); } function load3(){ using('datagrid', function(){ $('#tt').datagrid({ title:'DataGrid', width:300, height:200, fitColumns:true, columns:[[ {field:'productid',title:'Product ID',width:100}, {field:'productname',title:'Product Name',width:200} ]], data: [ {"productid":"FL-DLH-02","productname":"Persian"}, {"productid":"AV-CB-01","productname":"Amazon Parrot"} ] }); }); } </script>
1五、easyui-menu
1)頁面右擊綁定指定的菜單
<div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div data-options="iconCls:'icon-save'">Save</div> <div data-options="iconCls:'icon-print',disabled:true">Print</div> <div class="menu-sep"></div> <div>Exit</div> </div> <script> $(function(){ $(document).bind('contextmenu',function(e){ e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }); }); </script>
2）自定義菜單子項：
<div class="menu-content" style="text-align:left;padding:10px"> <div style="font-weight:bold;font-size:16px">Select your Language:</div> <ul style="margin:0;padding:0 0 0 40px"> <li><a href="javascript:void(0)">Java</a></li> <li> <span>Other</span> <input> </li> </ul> <div style="padding:10px 0 0 30px"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a> </div> </div>
3）實現按鈕點擊事件
<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;"> <div data-options="name:'new'">New</div> </div> <div id="log" class="easyui-panel" title="Event Log" style="height:250px;padding:10px"> function menuHandler(item){ $('#log').prepend('<p>Click Item: '+item.name+'</p>'); }
1六、easyui-calendar
1）經過ID獲取對象，在作操做：$('#calendarId').calendar({firstDay:value})
2）設置是否可用：在data-options中設置validator:function(date){//處理：可用返回true;不然，返回false}
<div class="easyui-calendar" style="width:250px;height:250px;" data-options=" validator: function(date){ if (date.getDay() == 1){ return true; } else { return false; } } "></div>
3）修改格式：在data-options中設置formatter:formatDay(date){return 新格式day}
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div> <script> var d1 = Math.floor((Math.random()*30)+1); var d2 = Math.floor((Math.random()*30)+1); function formatDay(date){ var m = date.getMonth()+1; var d = date.getDate(); var opts = $(this).calendar('options'); if (opts.month == m && d == d1){ return '<div class="icon-ok md">' + d + '</div>'; } else if (opts.month == m && d == d2){ return '<div class="icon-search md">' + d + '</div>'; } return d; } </script> <style scoped="scoped"> .md{ height:16px; line-height:16px; background-position:2px center; text-align:right; font-weight:bold; padding:0 2px; color:red; } </style>
1七、easyui-combobox格式以下：
<select class="easyui-combobox" name="state" style="width:200px;"> <option value="AL">Alabama</option> </select>
1）經常使用操做：$('#cmbbId').combobox('disable'); //disable\enable\getValue、setValue{value}
function setvalue(){ $.messager.prompt('SetValue','Please input the value(CO,NV,UT,etc):',function(v){ if (v){ $('#state').combobox('setValue',v); } }); }
2）修改項的顯示格式：經過設置data-options的formatter: formatItem{(row){return 文本及格式}}實現
<input class="easyui-combobox" name="language" data-options=" url: 'combobox_data1.json', method: 'get', valueField: 'id', //值 textField: 'text', //顯示 panelWidth: 350, panelHeight: 'auto', formatter: formatItem "> <script type="text/javascript"> function formatItem(row){ var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' + '<span style="color:#888">' + row.desc + '</span>'; return s; } </script>
3）經過加載json中的數據來初始化值，必須設定valueField: 'id', //值 和 textField: 'text', //顯示
$('#cmbbId').combobox('reload', 'combobox_data1.json') //加載數據 data-options="valueField:'id',textField:'text'" //制定valueField和textField
4）下拉列框中設置組別：經過設置data-options的groupField:'group'實現。其中group爲json文件中的一字段
5）選擇多項：multiple:true；高度自定義：panelHeight:'auto；selectOnNavigation：用於設置使用鍵盤導航選項時是否選中當前項，默認爲true ($('#cmbbId').combobox({selectOnNavigation:true|false}))
6）使用JSONP從遠程站點檢索數據：data-options="loader: ldFunc,mode: 'remote',valueField: 'id',textField: 'name'"
var ldFunc = function(param,success,error){ var q = param.q || ''; if (q.length <= 1){return false} $.ajax({ url: 'http://ws.geonames.org/searchJSON', dataType: 'jsonp', data: { featureClass: "P", style: "full", maxRows: 20, name_startsWith: q }, success: function(data){ var items = $.map(data.geonames, function(item){ return { id: item.geonameId, name: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName }; }); success(items); }, error: function(){ error.apply(this, arguments); } }); }
注：引用文件（html）用：href；引用網址（php）用：src；引用數據文件（json）用url。
$.ajax({url: 'http://ws.geonames.org/searchJSON');
1八、easyui-combogrid（加載並設置其顯示格式）:
<select class="easyui-combogrid" style="width:250px" data-options=" panelWidth: 500, idField: 'itemid', textField: 'productname', url: 'datagrid_data1.json', method: 'get', columns: [[ {field:'itemid',title:'Item ID',width:80}, {field:'productname',title:'Product',width:120}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:200}, {field:'status',title:'Status',width:60,align:'center'} ]], fitColumns: true "> </select>
1） 初始化值：法1：在select標籤中設置value="fieldIdValue";
法2:$('#cmbgId').combogrid('setValue', 'fieldidValue');
2）經常使用操做：$('#cmbgId').combogrid('getValue'); //disable\enable;
3）在data-options中的設置：multiple: true;//多選（最左側出現複選框）
4）經過複選框設置點擊鍵盤上下時，是否選中當前項<input type="checkbox" checked onchange="$('#cmbgId').combogrid({selectOnNavigation:$(this).is(':checked')})">
1九、easyui-combotree:
1）初始化 法1:value="idValue";法2:$('#cmbtId').combotree('setValue', 'idValue');
2）設置data-options的項：required:true//必須輸入值
3）添加複選框：在<select>標籤中 加入 multiple 便可；
4）經過複選框設置是否可迭代。
<input type="checkbox" checked onclick="$('#cmbtId').combotree({cascadeCheck:$(this).is(':checked')})">
5）經常使用操做：$('#cmbtId').combotree('getValue'); //disable\enable;
20、easyui-datebox
1）必須輸入值及對輸入的值進行驗證：
<input class="easyui-datebox" required data-options="validType:'md[\'10/11/2012\']'"></input> <script> $.extend($.fn.validatebox.defaults.rules, { md: { validator: function(value, param){ var d1 = $.fn.datebox.defaults.parser(param[0]); var d2 = $.fn.datebox.defaults.parser(value); return d2<=d1; }, message: 'The date must be less than or equals to {0}.' } }) </script>
2）多個datebox組件共享日曆：將 data-options中設置"sharedCalendar:'#calendarId'"
3）添加onSelect事件：data-options="onSelect:onSelectFunc" 具體：function onSelectFunc(date){...}
4）格式轉換及將dateBox內容轉化爲日期：formatter:myformatter,parser:myparser
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input> <script type="text/javascript"> function myformatter(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d); } function myparser(s){ if (!s) return new Date(); var ss = (s.split('-')); var y = parseInt(ss[0],10); var m = parseInt(ss[1],10); var d = parseInt(ss[2],10); if (!isNaN(y) && !isNaN(m) && !isNaN(d)){ return new Date(y,m-1,d); } else { return new Date(); } } </script>
5）在日期下面添加按鈕：
<input class="easyui-datebox" data-options="buttons:buttons"></input> <script> var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: 'MyBtn', handler: function(target){ alert('click MyBtn'); } }); </script>
2一、easyui-datetimebox：
1）是否顯示秒：showSeconds 初始化值：value
<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})"> <input id="dt" class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:200px">
2二、easyui-draggable
1）onDrag事件：data-options="onDrag:onDragFunc"
每次移動指定距離：
<div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px"> <div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;"> </div> </div> <script> function onDrag(e){ var d = e.data; d.left = repair(d.left); d.top = repair(d.top); function repair(v){ var r = parseInt(v/20)*20; if (Math.abs(v % 20) > 10){ r += v > 0 ? 20 : -20; } return r; } } </script>
限制可拖動範圍：
function onDrag(e){ var d = e.data; if (d.left < 0){d.left = 0} if (d.top < 0){d.top = 0} if (d.left + $(d.target).outerWidth() > $(d.parent).width()){ d.left = $(d.parent).width() - $(d.target).outerWidth(); } if (d.top + $(d.target).outerHeight() > $(d.parent).height()){ d.top = $(d.parent).height() - $(d.target).outerHeight(); } }
僅移動到標題可拖動：
<div class="easyui-draggable" data-options="handle:'#title'" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px"> <div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div> </div>
2三、easyui-droppable
1）div能夠拖動，並顯示拖動信息：
<div class="dragitem">Apple</div> $(function(){ $('.dragitem').draggable({ revert:true, deltaX:10, deltaY:10, proxy:function(source){ var n = $('<div class="proxy"></div>'); n.html($(source).html()).appendTo('body'); return n; } }); });
2）在data-options中設置接受的div及相關事件
data-options=" accept: '.dragitem', onDragEnter:function(e,source){ $(this).html('enter'); }, onDragLeave: function(e,source){ $(this).html('leave'); }, onDrop: function(e,source){ $(this).html($(source).html() + ' dropped'); } ">
3）代碼實現div可移動並實現進入、離開等相關事件及添加刪除樣式
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> drag me! <div id="d1" class="drag">Drag 1</div> <div id="d2" class="drag">Drag 2</div> <div id="d3" class="drag">Drag 3</div> </div> <div id="target" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> drop here! </div> <div style="clear:both"></div> <style type="text/css"> .drag{ width:100px; height:50px; padding:10px; margin:5px; border:1px solid #ccc; background:#AACCFF; } .dp{ opacity:0.5; filter:alpha(opacity=50); } .over{ background:#FBEC88; } </style> <script> $(function(){ $('.drag').draggable({ proxy:'clone', revert:true, cursor:'auto', onStartDrag:function(){ $(this).draggable('options').cursor='not-allowed'; $(this).draggable('proxy').addClass('dp'); }, onStopDrag:function(){ $(this).draggable('options').cursor='auto'; } }); $('#target').droppable({ accept:'#d1,#d3', onDragEnter:function(e,source){ $(source).draggable('options').cursor='auto'; $(source).draggable('proxy').css('border','1px solid red'); $(this).addClass('over'); }, onDragLeave:function(e,source){ $(source).draggable('options').cursor='not-allowed'; $(source).draggable('proxy').css('border','1px solid #ccc'); $(this).removeClass('over'); }, onDrop:function(e,source){ $(this).append(source) $(this).removeClass('over'); } }); }); </script>
4）添加指示器並日後移動
$(function(){ var indicator = $('<div class="indicator">>></div>').appendTo('body'); $('.drag-item').draggable({ revert:true, deltaX:0, deltaY:0 }).droppable({ onDragOver:function(e,source){ indicator.css({ display:'block', left:$(this).offset().left-10, top:$(this).offset().top+$(this).outerHeight()-5 }); }, onDragLeave:function(e,source){ indicator.hide(); }, onDrop:function(e,source){ $(source).insertAfter(this); indicator.hide(); } }); });
2四、easyui-validatebox：validType有'email'、'url'、'length[min,max]'
<input class="easyui-validatebox textbox" data-options="prompt:'Enter User Name.',required:true,validType:'length[3,10]'"> $(function(){ $('input.easyui-validatebox').validatebox({ tipOptions: { // the options to create tooltip showEvent: 'mouseenter', hideEvent: 'mouseleave', showDelay: 0, hideDelay: 0, zIndex: '', onShow: function(){ if (!$(this).hasClass('validatebox-invalid')){ if ($(this).tooltip('options').prompt){ $(this).tooltip('update', $(this).tooltip('options').prompt); } else { $(this).tooltip('tip').hide(); } } else { $(this).tooltip('tip').css({ color: '#000', borderColor: '#CC9933', backgroundColor: '#FFFFCC' }); } }, onHide: function(){ if (!$(this).tooltip('options').prompt){ $(this).tooltip('destroy'); } } } }).tooltip({ position: 'right', content: function(){ var opts = $(this).validatebox('options'); return opts.prompt; }, onShow: function(){ $(this).tooltip('tip').css({ color: '#000', borderColor: '#CC9933', backgroundColor: '#FFFFCC' }); } }); });
2五、easyui-timespinner時間微調器和easyui-numberspinner數字微調器：
1）經常使用操做：$('#tpID').timespinner('setValue', '09:45');//getValue\disable\enable
2）設置上下限：在data-options中設置"min:'08:30',max:'18:00'"
3）在data-options中處理onchange事件：onChange: function(value){$('#vv').text(value);}
4）easyui-numberspinner數字微調器初始化值：value="100"；在data-options中設置自動遞增階：increment:100
2六、easyui-searchbox：
1）在data-options中設置提示消息、菜單和對應的搜索操做：
<input class="easyui-searchbox" data-options="prompt:'Please Input Value',menu:'#mm',searcher:doSearch" style="width:300px"></input> <div id="mm"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div> <script> function doSearch(value,name){ alert('You input: ' + value+'('+name+')'); } </script>
2七、easyui-splitbutton 和 easyui-menubutton 二者前者僅將鼠標移動到下拉按鈕時彈出下拉菜單。
1）分隔符:<div class="menu-sep"></div>
2）$('#splitbtnID').splitbutton('disable')
3）對齊：<a href="#" class="easyui-menubutton" >Edit</a>
$('a.easyui-menubutton').menubutton({menuAlign: left})
2八、easyui-progressbar：顯示進度框
<div id="pgb" class="easyui-progressbar" style="width:400px;"></div> <script> $(function start(){ var value = $('#pgb').progressbar('getValue'); if (value < 100){ value += Math.floor(Math.random() * 10); $('#pgb').progressbar('setValue', value); setTimeout(arguments.callee, 200); } }); </script>
2九、easyui-numberbox：precision="2"表示精度爲2，prefix:'$'前綴，suffix:'€'後綴，groupSeparator:','組分隔符,decimalSeparator:'.'小數分隔符（$1,234,567.89），min:10最小值,max:90最大值,required:true必須輸入值
30、Message：
1）經常使用顯示消息：$.messager.show({title:'Title',msg:'Message.',timeout:0,showType:'fade'});//show、slide
2）進度消息：
function progress(){ var win = $.messager.progress({ title:'Please waiting', msg:'Loading data...' }); setTimeout(function(){ $.messager.progress('close'); },5000) }
3）$.messager.alert('Title',' message!');//能夠加第三參數：'error'、'info'、'question'、'warning'
4）交互消息：$.messager.confirm('','',func(val){});\$.messager.prompt('','',func(val){});
5）設置顯示位置：
//默認右下角 $.messager.show({ title:'My Title', msg:'The message content', showType:'show' }); //{}中添加style以下： //上左顯示 style:{ right:'', left:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } //上中顯示 style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } //上右顯示 style:{ left:'', right:0, top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } //中左顯示 style:{ left:0, right:'', bottom:'' } //中中顯示 style:{ right:'', bottom:'' } //中右顯示 style:{ left:'', right:0, bottom:'' } //下左顯示 style:{ left:0, right:'', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop } //下中顯示 style:{ right: '', top:'', bottom:-document.body.scrollTop-document.documentElement.scrollTop }
3一、easyui-slider：showTip:true添加提示；rule: [0,'|',25,'|',50,'|',75,'|']添加刻度；mode: 'v'垂直顯示，默認水平；reversed: true逆向；
1）改變提示信息：在data-options中設置tipFormatter: function(value){return value+'px';}便可。
2）若改變值觸發onChange事件：onChange: function(value){$('#ff').css('font-size', value);}">
3）轉換converter：在data-options中設置
converter:{ toPosition:function(value,size){ var opts = $(this).slider('options'); return Math.asin(value/opts.max)/(Math.PI)*2*size; }, toValue:function(pos,size){ var opts = $(this).slider('options'); return Math.sin(pos/size*Math.PI/2)*opts.max; } }, onChange:function(v){ var opts = $(this).slider('options'); var pos = opts.converter.toPosition.call(this, v, opts.width); var p = $('<div class=point></div>').appendTo('#cc'); p.css('top', v); p.css(opts.reversed?'right':'left', pos); }
3二、easyui-tooltip：
1）文本提示：<a href="#" title="tooltip message." class="easyui-tooltip">Hover me</a>
2）提示對話框（頁面）：
<div style="padding:10px 200px"> <p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog. </div> <script> $(function(){ $('#dd').tooltip({ content: $('<div></div>'), showEvent: 'click', onUpdate: function(content){ content.panel({ width: 200, border: false, title: 'Login', href: '_dialog.html' }); }, onShow: function(){ var t = $(this); t.tooltip('tip').unbind().bind('mouseenter', function(){ t.tooltip('show'); }).bind('mouseleave', function(){ t.tooltip('hide'); }); } }); }); </script>
3）提示工具欄：
<a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options=" hideEvent: 'none', content: function(){ return $('#toolbar'); }, onShow: function(){ var t = $(this); t.tooltip('tip').focus().unbind().bind('blur',function(){ t.tooltip('hide'); }); } ">Hover me</a>
4）改變提示消息彈出位置：function changePosition(pos){$('#ttId').tooltip({position: pos});}
5）標記頁數提示：$('#divId').pagination();
<div class="easyui-panel"> <div id="pg" data-options="total:114"></div> </div> <script> $(function(){ $('#pg').pagination().find('a.l-btn').tooltip({ content: function(){ var cc = $(this).find('span.l-btn-icon').attr('class').split(' '); var icon = cc[1].split('-')[1]; return icon + ' page'; } }); }); </script>
6）自定義提示信息：
$('#pp2').tooltip({ position: 'bottom', content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#fff000', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' }); }, onPosition: function(){ $(this).tooltip('tip').css('left', $(this).offset().left); $(this).tooltip('arrow').css('left', 20); } });
7）經過AJAX來顯示工具提示內容
<a href="#" class="easyui-tooltip" data-options=" content: $('<div></div>'), onShow: function(){ $(this).tooltip('arrow').css('left', 20); $(this).tooltip('tip').css('left', $(this).offset().left); }, onUpdate: function(cc){ cc.panel({ width: 500, height: 'auto', border: false, href: '_content.html' }); } ">Hove me</a>
3三、easyui-pagination格式以下：
1）<div class="easyui-pagination" data-options="total: 114,showPageList: false,showRefresh: false,displayMsg: '',layout:['list','sep','first','prev','links','next','last','sep','refresh'],,buttons:$('#buttons')"></div>
2）設置buttons的另外一方法：經過腳本
<div class="easyui-panel"> <div class="easyui-pagination" data-options="total:114,buttons:buttons"></div> </div> <script> var buttons = [{ iconCls:'icon-add', handler:function(){ alert('add'); } },{ iconCls:'icon-cut', handler:function(){ alert('cut'); } },{ iconCls:'icon-save', handler:function(){ alert('save'); } }]; </script>
3）動態設定顯示頁碼的格式：
<div class="easyui-panel"> <div id="pp" class="easyui-pagination" data-options=" total:114, layout:['first','prev','next','last'] "></div> </div> <div style="margin-top:10px"> <select onchange="setLayout(this.value)"> <option value="1">Previous Next</option> <option value="2">Manual Page Input</option> <option value="3">Numeric Links</option> <option value="4">Previous Links Next</option> <option value="5">Go To Page</option> </select> </div> <script> function setLayout(type){ var p = $('#pp'); switch(parseInt(type)){ case 1: p.pagination({layout:['first','prev','next','last']}); break; case 2: p.pagination({ layout:['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'], beforePageText:'Page', afterPageText:'of {pages}' }); break; case 3: p.pagination({layout:['links']}); break; case 4: p.pagination({layout:['first','prev','links','next','last']}); break; case 5: p.pagination({ layout:['first','prev','next','last','sep','links','sep','manual'], beforePageText:'Go Page', afterPageText:'' }); break; } } </script>
3四、form:
1）、經常使用操做：$('#formId').form('submit');//clear
$('#formId').form('load', 'form_data1.json');
$('#ff').form('load'{name:'myname',email:'mymail@gmail.com',
subject:'subject',message:'message',language:'en'});
3五、easyui-dialog：title、$('#dlgId').dialog('open');//close
1）添加工具和按鈕：在data-options中設置toolbar: '#dlg-toolbar',buttons: '#dlg-buttons'
或直接設置工具和按鈕 toolbar:[{text:' ',iconCls:' ',handle:function(){}}]
toolbar: [{ text:'Add', iconCls:'icon-add', handler:function(){ alert('add') } },'-',{ text:'Save', iconCls:'icon-save', handler:function(){ alert('save') } }], buttons: [{ text:'Ok', iconCls:'icon-ok', handler:function(){ alert('ok'); } },{ text:'Cancel', handler:function(){ alert('cancel');; } }]
3六、easyui-propertygrid：data-options="url:'pg.json',method:'get',showGroup:true,scrollbarSize:0">
1）經常使用操做：$('#pg').propertygrid({showGroup:true});//showHeader:true
2）獲取屬性改變的值：$('#pg').propertygrid('getChanges');
function getChanges(){ var s = ''; var rows = $('#pg').propertygrid('getChanges'); for(var i=0; i<rows.length; i++){ s += rows[i].name + ':' + rows[i].value + ','; } alert(s) }
3）設置組的樣式：在data-options中設置groupFormatter: groupFormatter
function groupFormatter(fvalue, rows){ return fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>'; }
4）自定義字段：在data-options中設置columns: mycolumns
var mycolumns = [[ {field:'name',title:'MyName',width:100,sortable:true}, {field:'value',title:'MyValue',width:100,resizable:false} ]];
3七、easyui-treegrid格式：showFooter:true 顯示錶尾；
<table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px" data-options=" url: 'treegrid_data1.json', method: 'get', rownumbers: true, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name'" width="220">Name</th> <th data-options="field:'size'" width="100" align="right">Size</th> <th data-options="field:'date'" width="150">Modified Date</th> </tr> </thead> </table>
1）依據腳本加載Json數據文件實現樹：
<table id="tg"></table> <script type="text/javascript"> $(function(){ $('#tg').treegrid({ title:'TreeGrid with Footer', iconCls:'icon-ok', width:700, height:250, rownumbers: true, animate:true, collapsible:true, fitColumns:true, url:'treegrid_data2.json', method: 'get', idField:'id', treeField:'name', showFooter:true, columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',title:'Begin Date',width:80}, {field:'end',title:'End Date',width:80}, {field:'progress',title:'Progress',width:120, formatter:function(value){ if (value){ var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; } } } ]] }); }) </script>
2）可編輯項及腳本代碼設置列顯示格式：在字段的data-options中設置editor:'text'//numberbox\datebox
$('#tg').treegrid('getSelected');//getChildren\getFooterRows、collapseAll、expandAll
$('#tg').treegrid('select', editingId);//beginEdit\endEdit\cancelEdit\remove\collapse\expand、expandTo
$('#tg').treegrid('append',{parent: node.id,data: [{id: idIndex}]})
$('#tg').treegrid('expandTo',21).treegrid('select',21);
<table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;height:250px" data-options=" iconCls: 'icon-ok', rownumbers: true, animate: true, collapsible: true, fitColumns: true, url: 'treegrid_data2.json', method: 'get', idField: 'id', treeField: 'name', showFooter: true "> <thead> <tr> <th data-options="field:'name',width:180,editor:'text'">Task Name</th> <th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th> <th data-options="field:'begin',width:80,editor:'datebox'">Begin Date</th> <th data-options="field:'end',width:80,editor:'datebox'">End Date</th> <th data-options="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th> </tr> </thead> </table> <script type="text/javascript"> function formatProgress(value){ if (value){ var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; } } var editingId; function edit(){ if (editingId != undefined) { alert(editingId); $('#tg').treegrid('select', editingId); return; } var row = $('#tg').treegrid('getSelected'); if (row){ editingId = row.id $('#tg').treegrid('beginEdit', editingId); } } function save(){ if (editingId != undefined){ var t = $('#tg'); t.treegrid('endEdit', editingId); editingId = undefined; var persons = 0; var rows = t.treegrid('getChildren'); for(var i=0; i<rows.length; i++){ var p = parseInt(rows[i].persons); if (!isNaN(p)){ persons += p; } } var frow = t.treegrid('getFooterRows')[0]; frow.persons = persons; t.treegrid('reloadFooter'); } } function cancel(){ if (editingId != undefined){ $('#tg').treegrid('cancelEdit', editingId); editingId = undefined; } } </script>
3）使用TreeGrid顯示覆雜的報告：
<table title="Reports using TreeGrid" class="easyui-treegrid" style="width:700px;height:250px" data-options=" url: 'treegrid_data3.json', method: 'get', rownumbers: true, showFooter: true, idField: 'id', treeField: 'region' "> <thead frozen="true"> <tr> <th field="region" width="200">Region</th> </tr> </thead> <thead> <tr> <th colspan="4">2009</th> <th colspan="4">2010</th> </tr> <tr> <th field="f1" width="60" align="right">1st qrt.</th> <th field="f2" width="60" align="right">2st qrt.</th> <th field="f3" width="60" align="right">3st qrt.</th> <th field="f4" width="60" align="right">4st qrt.</th> <th field="f5" width="60" align="right">1st qrt.</th> <th field="f6" width="60" align="right">2st qrt.</th> <th field="f7" width="60" align="right">3st qrt.</th> <th field="f8" width="60" align="right">4st qrt.</th> </tr> </thead> </table>
4）右擊樹顯示彈出菜單：在data-options中設置onContextMenu: onContextMenu{(e,row)}
function onContextMenu(e,row){ e.preventDefault(); $(this).treegrid('select', row.id); $('#mm').menu('show',{ left: e.pageX, top: e.pageY }); } var idIndex = 100; function append(){ idIndex++; var d1 = new Date(); var d2 = new Date(); d2.setMonth(d2.getMonth()+1); var node = $('#tg').treegrid('getSelected'); $('#tg').treegrid('append',{ parent: node.id, data: [{ id: idIndex, name: 'New Task'+idIndex, persons: parseInt(Math.random()*10), begin: $.fn.datebox.defaults.formatter(d1), end: $.fn.datebox.defaults.formatter(d2), progress: parseInt(Math.random()*100) }] }) }
5）標記頁數：在data-options中設置loadFilter: pagerFilter,pagination: true,pageSize: 2,pageList: [2,5,10]
其中pagerFilter實現了分頁：
function pagerFilter(data){ if ($.isArray(data)){ // is array data = { total: data.length, rows: data } } var dg = $(this); var state = dg.data('treegrid'); var opts = dg.treegrid('options'); var pager = dg.treegrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.treegrid('loadData',data); } }); if (!data.topRows){ data.topRows = []; data.childRows = []; for(var i=0; i<data.rows.length; i++){ var row = data.rows[i]; row._parentId ? data.childRows.push(row) : data.topRows.push(row); } data.total = (data.topRows.length); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = $.extend(true,[],data.topRows.slice(start, end).concat(data.childRows)); return data; }
注：$.fn.datebox.defaults.formatter(new Date())
3八、easyui-datagrid：
1）在data-options中的設置："singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'"
2）在<th>標籤中設置align:'right',halign:'center'表示全部的行中的該列右對齊、表頭居中。
3）編輯單元格：在data-options中的設置onClickCell: onClickCell{(index, field)}；在沒個表頭列中指定editor{text\{type:'numberbox',options:{precision:1}}\editor:{type:'checkbox',options:{on:'P',off:''}}};修改單元格的腳本代碼：
<script type="text/javascript"> $.extend($.fn.datagrid.methods, { editCell: function(jq,param){ return jq.each(function(){ var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields')); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field){ col.editor = null; } } $(this).datagrid('beginEdit', param.index); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('editCell', {index:index,field:field}); editIndex = index; } } </script>
4）將普通的錶轉換爲datagrid：javascript:$('#dg').datagrid()
5）添加工具欄：在data-options中的設置toolbar:toolbar1或toolbar: '#tbdiv',便可。具體toolbar1以下：
var toolbar1 = [{text:'Add',iconCls:'icon-add',handler:function(){alert('add')}}];
7）設置多選並獲取全部項：$('#dg').datagrid({singleSelect:false});//getSelections\getSelection、getPanel
function getSelections(){ var ss = []; var rows = $('#dg').datagrid('getSelections'); for(var i=0; i<rows.length; i++){ var row = rows[i]; ss.push('<span>'+row.itemid+":"+row.productid+":"+row.attr1+'</span>'); } $.messager.alert('Info', ss.join('<br/>')); }
8）設置修改數據網格的格式：在data-options中的設置rowStyler: function具體以下：
rowStyler: function(index,row){ if (row.listprice < 30){ return 'background-color:#6293BB;color:#fff;font-weight:bold;'; }
9）修改邊框：主要是設置border-right、border-bottom是否透明（1px dotted transparent）。具體以下：
<script type="text/javascript"> function changeBorder(cls){ $('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls); } </script> <style type="text/css"> .lines-both .datagrid-body td{ } .lines-no .datagrid-body td{ border-right:1px dotted transparent; border-bottom:1px dotted transparent; } .lines-right .datagrid-body td{ border-bottom:1px dotted transparent; } .lines-bottom .datagrid-body td{ border-right:1px dotted transparent; } </style>
10）設置斑馬紋striped:在data-options中的設置striped: true便可。
11）設置單元格的樣式：在標題字段中設置styler:cellStyler{（value,row,index）}。好比：
<th data-options="field:'listprice',width:80,align:'right',styler:cellStyler">List Price</th> function cellStyler(value,row,index){ if (value < 30){ return 'background-color:#ffee00;color:red;'; } }
12）點擊行時行狀態變爲編輯行：在data-options中的設置onClickRow: onClickRow{（index）}。好比：
<script type="text/javascript"> var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed.target).combobox('getText'); $('#dg').datagrid('getRows')[editIndex]['productname'] = productname; $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index){ if (editIndex != index){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); editIndex = index; } else { $('#dg').datagrid('selectRow', editIndex); } } } </script>
13）對行的經常使用操做：$('#dg').datagrid('selectRow', editIndex);//validateRow\beginEdit\endEdit\cancelEdit\deleteRow，appendRow，getRows、acceptChanges、rejectChanges、getChanges。。具體以下：
function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{status:'P'}); editIndex = $('#dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } } function removeit(){ if (editIndex == undefined){return} $('#dg').datagrid('cancelEdit', editIndex) .datagrid('deleteRow', editIndex); editIndex = undefined; } function accept(){ if (endEditing()){ $('#dg').datagrid('acceptChanges'); } } function reject(){ $('#dg').datagrid('rejectChanges'); editIndex = undefined; } function getChanges(){ var rows = $('#dg').datagrid('getChanges'); alert(rows.length+' rows are changed!'); }
14）設置單元格的格式化，並在編輯單元格式加載文本數據供選擇：formatter：，editor:{}。
<th data-options="field:'productid',width:100, formatter:function(value,row){ return row.productname; }, editor:{ type:'combobox', options:{ valueField:'productid', textField:'productname', url:'products.json', required:true } }">Product</th>
15）合併單元格：在data-options中的設置onLoadSuccess: onLoadSuccess{（data）}。mergeCells具體以下：
<script type="text/javascript"> function onLoadSuccess(data){ var merges = [{ index: 2, rowspan: 2 },{ index: 5, rowspan: 2 },{ index: 7, rowspan: 2 }]; for(var i=0; i<merges.length; i++){ $(this).datagrid('mergeCells',{ index: merges[i].index, field: 'productid', rowspan: merges[i].rowspan }); } } </script>
16）凍結的列和行：
在表頭中的data-options中設置frozen:true,而後將要凍結的列放進去。具體以下：
<thead data-options="frozen:true"> <tr> <th data-options="field:'itemid',width:100">Item ID</th> </tr> </thead> <thead> <tr> <th data-options="field:'listprice',width:90,align:'right'">List Price</th> </tr> </thead>
在表的data-options中設置onLoadSuccess: function(){
$(this).datagrid('freezeRow',0).datagrid('freezeRow',1);}
17）多字段排序：在表的data-options中設置remoteSort:false,multiSort:true；而且在要進行排序的標題頭中的data-options中設置sortable:true便可。
注：remoteSort爲false表示前端排序也就是頁面排序，這種方式下EasyUI不請求服務器，並且將DataGrid中當前頁的數據在頁面上利用js腳原本對選定的字段進行排序。
18）表尾顯示信息：在表的data-options中設置showFooter: true
19）表頭中設置組：rowspan、colspan及<tr>的邏輯
<thead>
<tr>
<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>
<th data-options="field:'productid',width:100" rowspan="2">Product</th>
<th colspan="4">Item Details</th>
</tr>
<tr>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
20）右擊表頭列彈出菜單選擇是否顯示該列：hideColumn、showColumn、getColumnFields、getColumnOption
<table id="dg"></table> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ url: 'datagrid_data1.json', method: 'get', title: 'Context Menu on DataGrid', iconCls: 'icon-save', width: 700, height: 250, fitColumns: true, singleSelect: true, columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:120}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:250}, {field:'status',title:'Status',width:60,align:'center'} ]], onHeaderContextMenu: function(e, field){ e.preventDefault(); if (!cmenu){ createColumnMenu(); } cmenu.menu('show', { left:e.pageX, top:e.pageY }); } }); }); var cmenu; function createColumnMenu(){ cmenu = $('<div/>').appendTo('body'); cmenu.menu({ onClick: function(item){ if (item.iconCls == 'icon-ok'){ $('#dg').datagrid('hideColumn', item.name); cmenu.menu('setIcon', { target: item.target, iconCls: 'icon-empty' }); } else { $('#dg').datagrid('showColumn', item.name); cmenu.menu('setIcon', { target: item.target, iconCls: 'icon-ok' }); } } }); var fields = $('#dg').datagrid('getColumnFields'); for(var i=0; i<fields.length; i++){ var field = fields[i]; var col = $('#dg').datagrid('getColumnOption', field); cmenu.menu('appendItem', { text: col.title, name: field, iconCls: 'icon-ok' }); } } </script>
22）數據網格左側顯示覆選框：添加<th data-options="field:'ck',checkbox:true"></th>便可。若設置selectOnCheck：true,checkOnSelect:ture則選擇行與複選框連動。
23）分頁頁碼：在表的data-options中設置pagination: true便可實現。
在數據網格頁中的頁碼框中添加按鈕：
<script type="text/javascript"> $(function(){ var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid pager.pagination({ buttons:[{ iconCls:'icon-search', handler:function(){ alert('search'); } },{ iconCls:'icon-add', handler:function(){ alert('add'); } },{ iconCls:'icon-edit', handler:function(){ alert('edit'); } }] }); }) </script>
設置loadFilter:pagerFilter，pagerFilter的具體代碼以下：
function getData(){ var rows = []; for(var i=1; i<=800; i++){ var amount = Math.floor(Math.random()*1000); var price = Math.floor(Math.random()*1000); rows.push({ inv: 'Inv No '+i, date: $.fn.datebox.defaults.formatter(new Date()), name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return rows; } function pagerFilter(data){ if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage:function(pageNum, pageSize){ opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); dg.datagrid('loadData',data); } }); if (!data.originalRows){ data.originalRows = (data.rows); } var start = (opts.pageNumber-1)*parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } $(function(){ $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData()); });
24）在數據網格頁碼添加複雜工具條：在表的data-options中設置toolbar:'#tb'便可實現。#tb具體以下：
<div id="tb" style="padding:5px;height:auto"> <div style="margin-bottom:5px"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a> </div> <div> Date From: <input class="easyui-datebox" style="width:80px"> To: <input class="easyui-datebox" style="width:80px"> Language: <select class="easyui-combobox" panelHeight="auto" style="width:100px"> <option value="java">Java</option> <option value="c">C</option> <option value="basic">Basic</option> <option value="perl">Perl</option> <option value="python">Python</option> </select> <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a> </div> </div>
5、Json
1）樹(tree)格式：
格式1:
[{ "id":1, "text":"My Documents", "state":"closed", "attributes":{ "p1":"Custom Attribute1", "p2":"Custom Attribute2" } "children":[{ "id":11, "text":"Photos", "state":"closed" }] }]
格式2:
{"total":7,"rows":[
{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},
{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}
],"footer":[
{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}
]}
2）網格（datagrid）格式：
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{...}
]}
帶表尾的數據格式：
{"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}
],"footer":[
{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
]}
3）屬性網格(propertygrid)格式:
{"total":7,"rows":[
{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
"type":"validatebox",
"options":{
"validType":"email"
}
}},
{"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{
"type":"checkbox",
"options":{
"on":true,
"off":false
}
}}
]}
4）easyui-combobox格式：
[{ "id":1, "text":"Java", "desc":"Write once, run anywhere" "group":"編程語言" //分紅若干組 }]
5）easyui-propertygrid格式：
{"total":7,"rows":[
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
"type":"validatebox",
"options":{
"validType":"email"
}
}}
]}
6）from格式：
{ "name":"easyui", "email":"easyui@gmail.com", "subject":"Subject Title", "message":"Message Content", "language":"de" }
- 1. 界面設計
- 2. web界面設計
- 3. WebGis設計界面
- 4. XAML界面設計
- 5. UI 界面設計
- 6. GUI界面設計
- 7. Pyqt5 界面設計
- 8. C#界面設計
- 9. MOSS界面設計
- 10. 關於ATM的emwin界面設計 剩餘界面設計
- 更多相關文章...
- • Web 創建設計 - 網站建設指南
- • 移動設備 統計 - 瀏覽器信息
- • IntelliJ IDEA代碼格式化設置
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
- 1. 界面設計
- 2. web界面設計
- 3. WebGis設計界面
- 4. XAML界面設計
- 5. UI 界面設計
- 6. GUI界面設計
- 7. Pyqt5 界面設計
- 8. C#界面設計
- 9. MOSS界面設計
- 10. 關於ATM的emwin界面設計 剩餘界面設計