jquery ui是什麼
1、總結
一句話總結：jQuery UI [1] 是以 jQuery 爲基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。咱們能夠直接用它來構建具備很好交互性的web應用程序。全部插件測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。
官網：jQuery UI
http://jqueryui.com/javascript
jQuery UI 是創建在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。不管您是建立高度交互的 Web 應用程序仍是僅僅向窗體控件添加一個日期選擇器，jQuery UI 都是一個完美的選擇。css
jQuery UI 包含了許多維持狀態的小部件（Widget），所以，它與典型的 jQuery 插件使用模式略有不一樣。全部的 jQuery UI 小部件（Widget）使用相同的模式，因此，只要您學會使用其中一個，您就知道如何使用其餘的小部件（Widget）。html
一、jQuery UI 與 jquery 的主要區別是什麼？
(1) jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
(2) jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等。
(3) jQuery自己注重於後臺，沒有漂亮的界面，而jQuery UI則補充了前者的不足，他提供了華麗的展現界面，令人更容易接受。既有強大的後臺，又有華麗的前臺。jQuery UI是jQuery插件，只不過專指由jQuery官方維護的UI方向的插件。java
二、手機開發適合使用jquery麼？
實際上是適合的jquery
不建議開發者使用Jquery，仔細分析Jquery的源腳本你會發現它建立了一個長期存在的jquery對象，這樣可能使得內存被不少無用的東西佔用。並且若是客戶端未開啓緩存，客戶端每一次瀏覽頁面都會下載jquery.js文件。要知道，jquery庫即便壓縮了也佔了近100KB資源：若是用作移動應用，在國內，按移動的流量計費標準來看，下載一個jquery庫，就要花1￥。
做爲開發者，應該爲客戶着想，別浪費客戶資源。因此更應該學習javascript底層技術，這樣才能最大限度的作到不浪費資源。web
2、jQuery UI基本使用方法
其實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）進行應用的（能夠是正數，也能夠是負數）。