jQuery UI 入門之實用執行個體

標籤：put   host   chrome   bit   cto   放大   移動   java   複製   

　　　　　　　　　　　　　　jQuery UI 入門jQuery UI 簡介

jQuery UI 是一個建立在 jQuery JavaScript 庫上的小組件和互動庫，您可以使用它建立高度互動的 Web 應用程式。無論您是建立高度互動的 Web 應用程式還是僅僅向表單控制項添加一個日期選取器，jQuery UI 都是一個完美的選擇。jQuery UI 包含了許多維持狀態的小組件（Widget），因此，它與典型的 jQuery 外掛程式使用模式略有不同。所有的 jQuery UI 小組件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小組件（Widget）。

jQuery UI 特性簡單易用: 

繼承 jQuery 簡易使用特性，提供高度抽象介面，短期改善網站易用性。

開源免費

採用 MIT & GPL 雙協議授權，輕鬆滿足自由產品至企業產品各種授權需求。

廣泛相容

相容各主流案頭瀏覽器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。

輕便快捷

組件間相對獨立，可按需載入，避免浪費頻寬拖慢網頁開啟速度。

標準先進

支援 WAI-ARIA，通過標準 XHTML 程式碼提供漸進增強，保證低端環境可訪問性。

美觀多變

提供近 20 種預設主題，並可自訂多達 60 項可配置樣式規則，提供 24 種背景材質選擇。

開放公開

從結構規划到代碼編寫，全程開放，文檔、代碼、討論，人人均可參與。

強力支援

Google 為發布代碼提供 CDN 內容分髮網絡支援。

完整漢化

開發包內建包含中文在內的 40 多種語言套件。

缺點、不足

• 1.代碼不夠健壯：缺乏全面的測試案例，部分組件 Bugs 較多，不能達到企業級產品開發要求。
• 2.構架規劃不足：組件間 API 缺乏協調，缺乏配合使用協助。
• 3.控制項較少：相對於 Dojo、YUI、Ext JS 等成熟產品，可用控制項較少，無法滿足複雜介面功能要求。

jQuery UI 下載

: http://jqueryui.com/download/

jQuery UI 使用在網頁中使用

下載完成後需至少引入3個檔案

<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

若需要相應表徵圖功能時,需將images檔案夾放入你的項目css檔案夾下: 

: 

jQuery UI 實用執行個體日期選取器

日期選取器（Datepicker）綁定到一個標準的表單 input 欄位上。 

HTML

<!--日期--><input type="text" name="data" id="data" value="" />

JS

//日期控制項$("#data").datepicker({    //月份可改變    changeMonth: true,    //年份可改變    changeYear: true});

拖動滾動

在任意的 DOM 元素上啟用 draggable 功能。通過滑鼠點擊並在視區中拖動來移動 draggable 對象。

CSS

#drag {   width: 100px;   height: 100px;   background: red;}

HTML

<!--拖動滾動--><div id="drag"></div>

JS

//可拖拽 可拖動滾動$("#drag").draggable({    scroll: true});

縮放

在任意的 DOM 元素上啟用 resizable 功能。通過滑鼠拖拽右邊或底邊的邊框到所需的寬度或高度。

HTML 共用上個div#drag

JS

//縮放$("#drag").resizable({    //有動畫效果    animate: true,    //陰影製作效果    ghost: true});

拖動排序

在任意的 DOM 元素上啟用 sortable 功能。通過滑鼠點擊並拖拽元素到列表中的一個新的位置，其它條目會自動調整。預設情況下，sortable 各個條目共用 draggable 屬性。

HTML

<!--拖動排序--><ul id="sortable">    <li>111111111</li>    <li>2222222222</li>    <li>33333333333</li></ul>

JS

//拖動排序$("#sortable").sortable();

摺疊面板

點擊頭部展開/摺疊被分為各個邏輯部分的內容，就像標籤頁（tabs）一樣。您可以選擇性地設定當滑鼠移至上方時是否切換各部分的開啟/關閉狀態。

HTML

<!--摺疊面板--><div id="accordion">    <h3>部分 1</h3>    <p>abitur malesuada.</p>    <h3>部分 2</h3>    <p>Sed non urna.</p></div>

JS

//摺疊面板$("#accordion").accordion();

對話方塊視窗

對話方塊視窗是一個定位於視區中的覆蓋層，同時通過一個 iframe 與頁面內容分隔開（就像 select 元素）。它由一個標題列和一個內容地區組成，且可以移動，調整尺寸，預設可通過 ‘x‘ 表徵圖關閉。

HTML

<!--對話方塊--><div id="dialog" title="對話方塊"><p>顯示本內容,可以移動,點擊x可關閉</p></div>

JS

//對話方塊$("#dialog").dialog();

帶有表徵圖的菜單

一個帶有預設配置、禁用條目和嵌套菜單的菜單。由一個列錶轉化成的，添加了主題，並支援滑鼠和鍵盤互動。嘗試使用游標鍵導覽功能表。

CSS

//功能表列的寬度.ui-menu { width: 150px; }

HTML

<ul id="menu">
　　//通過添加類名 ui-icon ui-icon-disk調用表徵圖  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>儲存</a></li>  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li>  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>縮小</a></li>
　　//通過添加類名實現選項不可用狀態  <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>列印...</a></li>  <li>    <a href="#">播放</a>    <ul>      <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>上一個</a></li>      <li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li>      <li><a href="#"><span class="ui-icon ui-icon-play"></span>播放</a></li>      <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>下一個</a></li>    </ul>  </li></ul>

JS

//功能表列$( "#menu" ).menu();

預先載入進度條

等待載入過程,並完成進度條。

CSS

.ui-progressbar {    position: relative;  }  .progress-label {    position: absolute;    left: 50%;    top: 4px;    font-weight: bold;    text-shadow: 1px 1px 0 #fff;  }

HTML

//進度條初始狀態<div id="progressbar"><div class="progress-label">載入...</div></div>

JS

 $(function() {    var progressbar = $( "#progressbar" ),      progressLabel = $( ".progress-label" );     progressbar.progressbar({      value: false,      change: function() {        progressLabel.text( progressbar.progressbar( "value" ) + "%" );      },      complete: function() {        progressLabel.text( "完成！" );      }    });     function progress() {      var val = progressbar.progressbar( "value" ) || 0;       progressbar.progressbar( "value", val + 1 );       if ( val < 99 ) {        setTimeout( progress, 100 );      }    }     setTimeout( progress, 3000 );  });

jQuery UI API 文檔

• Effects
• Effects Core
• Interactions
• Method Overrides
• Methods
• Selectors
• Theming
• UI Core
• Utilities
• Widgets

官方中文版API地址: http://www.css88.com/jquery-ui-api/category/effects-core/

jQuery UI 入門之實用執行個體