jQuery UI的簡介與特性介紹

　　　　　　　　　　　　　　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 下載

#下載位址: 

jQuery UI 使用

在網頁中使用

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

<link>
<script></script>
<script></script>

若需要對應圖示功能時,需將images資料夾放入你的專案css資料夾下: 

如圖: 

jQuery UI 實用實例

日期選擇器

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

HTML

<!--日期-->
<input>

JS

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

拖曳捲動

在任意的DOM 元素上啟用draggable 功能。透過滑鼠點擊並在視區中拖曳來移動 draggable 物件。

CSS

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

HTML

##在任意的DOM 元素上啟用resizable 功能。透過滑鼠拖曳右邊或底邊的邊框到所需的寬度或高度。 HTML 共用上個div#drag

JS

<!--拖动滚动-->
<div></div>

### #############拖曳排序######在任意的DOM 元素上啟用sortable 功能。透過滑鼠點擊並拖曳元素到清單中的一個新的位置，其它條目會自動調整。預設情況下，sortable 各個條目共享 ###draggable### 屬性。 ######HTML######

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

######JS#######

//缩放
$("#drag").resizable({
    //有动画效果
    animate: true,
    //阴影效果
    ghost: true
});

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

<!--折叠面板-->
<div>
    <h3>部分 1</h3>
    <p>abitur malesuada.</p>
    <h3>部分 2</h3>
    <p>Sed non urna.</p>
</div>

JS

//折叠面板
$("#accordion").accordion();

对话框窗口

对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。

HTML

<!--对话框-->
<div>
<p>显示本内容,可以移动,点击x可关闭</p>
</div>

JS

//对话框
$("#dialog").dialog();

带有图标的菜单

一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。

CSS

//菜单栏的宽度
.ui-menu { width: 150px; }

HTML

　　//通过添加类名 ui-icon ui-icon-disk调用图标   
• 保存
  
• 放大
  
• 缩小
　　//通过添加类名实现选项不可用状态   
• 打印...
  
•     播放     
        
  • 上一个
        
  • 停止
        
  • 播放
        
  • 下一个
      
    

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><div>加载...</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 <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/853e474eaddc7199d3c5df618b42b689-12.gif" alt="jQuery UI的簡介與特性介紹"></span></div>

jQuery UI API 文档

• Effects

• Effects Core

• Interactions

• Method Overrides

• Methods

• Selectors

• Theming

• UI Core

• Utilities

• Widgets

以上是jQuery UI的簡介與特性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！