1. 程式人生 > >JQuery——UI型插件

JQuery——UI型插件

JQuery——UI型插件

1 .draggable()拖曳插件,拖動被綁定的元素,當這個jQuery UI插件與元素綁定後,可以通過調用draggable()方法,實現各種拖曳元素的效果,調用格式$(selector). draggable({options})

2   options參數為方法調用時的配置對象,根據該對象可以設置各種拖曳效果,如“containment”屬性指定拖曳區域,“axis”屬性設置拖曳時的坐標方向,例如在頁面中的<div>元素中添加兩個子類<div>,通過與拖曳插件綁定,這兩個子類<div>元素只能在外層的父<div>元素中任意拖曳

3 .droppable()放置插件,

除使用draggable插件拖曳任意元素外,還可以調用droppable UI插件將拖曳後的任意元素放置在指定區域中,類似購物車效果,調用格式$(selector).droppable({options})

4 selector參數為接收拖曳元素,options為方法的配置對象,在對象中,drop函數表示當被接收的拖曳元素完全進入接收元素的容器時,觸發該函數的調用,如在頁面中,通過調用droppable插件將“產品區”中的元素拖曳至“購物車”中,同時改變“購物車”的背景色和數量值

5 .sortable()拖曳排序插件,將序列元素(例如<option>、<li>)按任意位置進行拖曳從而形成一個新的元素序列,實現拖曳排序的功能,調用格式$(selector).sortable({options})

6 selector參數為進行拖曳排序的元素,options為調用方法時的配置對象,如在頁面中,通過加載sortable插件將<ul>元素中的各個<li>表項實現拖曳排序的功能

7 .accordion()面板折疊插件,可以實現頁面中指定區域類似“手風琴”的折疊效果,即點擊標題時展開內容,再點另一標題時,關閉已展開的內容,調用格式$(selector).accordion({options}),參數selector為整個面板元素,options參數為方法對應的配置對象

8 .tabs()選項卡插件,可以將<ul>中的<li>選項定義為選項標題,在標題中,再使用<a>元素的“href”屬性設置選項標題對應的內容,調用格式$(selector).tabs({options})

9 selector參數為選項卡整體外圍元素,該元素包含選項卡標題與內容,options參數為.tabs()方法的配置對象,通過該對象還能以ajax方式加載選項卡的內容,如在頁面中,添加選項卡的標題和內容元素,並綁定tabs插件,當點擊標題時,以選項卡的方式切內容

10 .dialog()對話框插件,可以用動畫的效果彈出多種類型的對話框,實現JavaScript代碼中.alert()和.confirm()函數的功能,調用格式$(selector).dialog({options})

11 selector參數為顯示彈出對話框的元素,通常為<div>,options參數為方法的配置對象,在對象中可以設置對話框類型、“確定”、“取消”按鈕執行的代碼等,如當點擊“提交”按鈕時,如果文本框中的內容為空,則通過dialog插件彈出提示框,提示輸入內容不能為空

12 .menu()菜單工具插件,可以通過<ul>創建多級內聯或彈出式菜單,支持通過鍵盤方向鍵控制菜單滑動,允許為菜單的各個選項添加圖標,調用格式$(selector).menu({options})

13 selector參數為菜單列表中最外層<ul>元素,options為.menu()方法的配置對象,如在頁面中,通過<ul>元素內聯的方式構建一個三層結構的導航菜單,並將最外層<ul>元素通過.menu()方法綁定插件,實現導航菜單的功能

14 .spinner()微調按鈕插件,不僅能在文本框中直接輸入數值,還可以通過點擊輸入框右側的上下按鈕修改輸入框的值,還支持鍵盤的上下方向鍵改變輸入值,調用格式$(selector).spinner({options})

15 selector參數為文本輸入框元素,可選項options參數為.spinner()方法的配置對象,在該對象中,可以設置輸入的最大、最小值,獲取改變值和設置對應事件,如將頁面中的三個輸入文本框都與微調插件相綁定,當改變三個文本框值時,對應的<div>元素的背景色也將隨之發生變化

16 .tooltip()工具提示插件,可以定制元素的提示外觀,提示內容支持變量、Ajax遠程獲取,還可以自定義提示內容顯示的位置,調用格式$(selector).tooltip({options})

17 selector為需要顯示提示信息的元素,可選項參數options為.tooltip()方法的配置對象,在該對象中,可以設置提示信息的彈出、隱藏時的效果和所在位置,如將三個<a>元素與工具提示插件相綁定,當把鼠標移動在<a>元素內容時,以動畫效果彈出對應的提示圖片,移出時,圖片自動隱藏

JQuery——UI型插件