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