其實jQuery UI早就在我的學習計划中，只不過因為計划安排始終處於待命狀態，最近項目要用到jQuery UI，就提前學習一下，也想能夠封裝自己的UI庫，這樣就不用老按照別人的套路走了，像使用jQuery UI的時候，連DOM結構都要按照他們寫的來，一個div里面必須包含一個h3才有用，用h2就沒用了，這樣的框架延伸性太差了吧，還是自己的東西好用！
本篇筆記為jQuery UI的使用筆記，深入到具體封裝層面的待我以后讀了源碼再來寫更深入的筆記，目前僅為快速學習，為了跟上項目。
1.如何引入
涉及到UI的框架，總是會涉及到行為和樣式，正如jQuery Mobile一樣，在使用jQuery UI時也要引入一個適用版本的jQuery.js(一般會自帶)和一個框架的js文件和一個css文件，目前我用的版本是1.11.4。
廢話不多說，如何使用，看代碼就知道了
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> </head> <body> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> //write your custome code </script> </body> </html>
網上大多數教程都是這么說的，但是作為一個強迫症患者，我還是建議把images文件夾引入進來，這樣的話在寫test程序的時候不會報錯，這樣也可以更清晰的知道哪些控件使用了哪些圖片，是如何使用的。
必要的解釋，到官網上下載了jQuery UI后是一個壓縮包，解壓開來是一個范例的程序，像我這種白痴是肯定不知道哪些文件是有用的，哪些文件是沒用的，不過打開范例程序的index.html后分別搜索<link>/<script>你會發現哪幾個文件是有用到的，至於其他幾個css文件為什么沒用到，個人猜想structure應該是基礎版的沒有主題的css，如果要開發主題就用這個css，而theme應該是已經做好了主題的css。
另外，jQuery UI的官網還提供主題的下載，下好了以后用什么方法鏈接進去好像就能起效果。說實話我個人覺得，站在學習的角度上來說，這個東西很沒意思。
還有一件很煩的事情是，jQuery UI分為四個部分：核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果庫（Effects），真心搞不清這幾個東西的區別，也懶得搞清了，還是趕緊開始寫點東西出來，比什么炒概念都要強。
2.基本使用方法
建立組件
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> //調用方法建立組件 $("#test_progressbar").progressbar(); </script> </body> </html>
效果如下
獲取參數
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> //帶參數調用方法建立組件 $("#test_progressbar").progressbar({value:20}); //獲取 document.write($("#test_progressbar").progressbar("value")); </script> </body> </html>
效果圖如下
設置參數
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> $("#test_progressbar").progressbar(); //設置 $("#test_progressbar").progressbar("value",40); </script> </body> </html>
效果圖如下
改變樣式
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> <style> .test_class{width:50%;} </style> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> $("#test_progressbar").progressbar(); //設置 $("#test_progressbar") .progressbar("value",40) .addClass("test_class"); </script> </body> </html>
使用option方法改變和獲取參數值
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> <style> .test_class{width:50%;} </style> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> $("#test_progressbar").progressbar(); //使用option方法改變參數值 $("#test_progressbar").progressbar("option","value",90); //使用option方法獲取參數值 document.write($("#test_progressbar").progressbar("option","value")); </script> </body> </html>
效果圖如下
利用option方法傳多個參數
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> <style> .test_class{width:50%;} </style> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> $("#test_progressbar").progressbar(); $("#test_progressbar").progressbar( "option", { value: 100, disabled: true }); </script> </body> </html>
效果圖如下
添加事件監聽和內部的回調函數
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet"> <style> .test_class{width:50%;} </style> </head> <body> <div id="test_progressbar"></div> <script src="js/jquery-ui-1.11.4/jquery.js"></script> <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script> <script> $("#test_progressbar").progressbar(); $("#test_progressbar").progressbar({ change: function() { alert( "The value has changed!---by callback" ); } }); $("#test_progressbar").bind( "progressbarchange", function() { alert( "The value has changed!---by bind()" ); }); $("#test_progressbar").progressbar("option","value",50); </script> </body> </html>
CSS框架 API
布局助手
.ui-helper-hidden：對元素應用 display: none。
.ui-helper-hidden-accessible：對元素應用訪問隱藏（通過頁面絕對定位）。
.ui-helper-reset：UI 元素的基本樣式重置。重置的元素比如：padding、margin、text-decoration、list-style，等等。
.ui-helper-clearfix：對父元素應用浮動包裝屬性。
.ui-helper-zfix：對 <iframe> 元素應用 iframe "fix" CSS。
小部件容器
.ui-widget：對所有小部件的外部容器應用的 Class。對小部件應用字體和字體尺寸，同時也對自表單元素應用相同的字體和 1em 的字體尺寸，以應對 Windows 瀏覽器中的繼承問題。
.ui-widget-header：對標題容器應用的 Class。對元素及其子元素的文本、鏈接、圖標應用標題容器樣式。
.ui-widget-content：對內容容器應用的 Class。對元素及其子元素的文本、鏈接、圖標應用內容容器樣式。（可應用到標題的父元素或者同級元素）
交互狀態
.ui-state-default：對可點擊按鈕元素應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable default" 容器樣式。
.ui-state-hover：當鼠標懸浮在可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable hover" 容器樣式。
.ui-state-focus：當鍵盤聚焦在可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable hover" 容器樣式。
.ui-state-active：當鼠標點擊可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable active" 容器樣式。
交互提示 Cues
.ui-state-highlight：對高亮或者選中元素應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "highlight" 容器樣式。
.ui-state-error：對錯誤消息容器元素應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "error" 容器樣式。
.ui-state-error-text：對只有無背景的錯誤文本顏色應用的 Class。可用於表單標簽，也可以對子圖標應用錯誤圖標顏色。
.ui-state-disabled：對禁用的 UI 元素應用一個暗淡的不透明度。意味着對一個已經定義樣式的元素添加額外的樣式。
.ui-priority-primary：對第一優先權的按鈕應用的 Class。應用粗體文本。
.ui-priority-secondary：對第二優先權的按鈕應用的 Class。應用正常粗細的文本，對元素應用輕微的透明度。
圖標
狀態和圖像
.ui-icon：對圖標元素應用的基本 Class。設置尺寸為 16px 方塊，隱藏內部文本，對 "content" 狀態的精靈圖像設置背景圖像。注意： .ui-icon class 將根據它的父容器得到一個不同的精靈背景圖像。例如，ui-state-default 容器內的 ui-icon 元素將根據 ui-state-default 的圖標顏色進行着色。
圖標類型
在聲明 .ui-icon class 之后，接着您可以聲明一個秒速圖標類型的 class。通常情況下，圖標 class 遵循語法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一個指向右側的三角形圖標，如下所示： .ui-icon-triangle-1-e
其他視覺效果
圓角半徑助手
.ui-corner-tl：對元素的左上角應用圓角半徑。
.ui-corner-tr：對元素的右上角應用圓角半徑。
.ui-corner-bl：對元素的左下角應用圓角半徑。
.ui-corner-br：對元素的右下角應用圓角半徑。
.ui-corner-top：對元素上邊的左右角應用圓角半徑。
.ui-corner-bottom：對元素下邊的左右角應用圓角半徑。
.ui-corner-right：對元素右邊的上下角應用圓角半徑。
.ui-corner-left：對元素左邊的上下角應用圓角半徑。
.ui-corner-all：對元素的所有四個角應用圓角半徑。
覆蓋 & 陰影
.ui-widget-overlay：對覆蓋屏幕應用 100% 寬度和高度，同時設置背景顏色/紋理和屏幕不透明度。
.ui-widget-shadow：對覆蓋應用的 Class，設置了不透明度、上偏移/左偏移，以及陰影的 "厚度"。厚度是通過對陰影所有邊設置內邊距（padding）進行應用的。偏移是通過設置上外邊距（margin）和左外邊距（margin）進行應用的（可以是正數，也可以是負數）。