JQuery——UI型插件

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

東源網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站成立于2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

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

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

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

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

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

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

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

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

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

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

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

13 selector參數(shù)為菜單列表中最外層<ul>元素，options為.menu()方法的配置對象,如在頁面中，通過<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個三層結(jié)構(gòu)的導航菜單，并將最外層<ul>元素通過.menu()方法綁定插件，實現(xiàn)導航菜單的功能

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

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

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

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

文章題目：JQuery——UI型插件
分享網(wǎng)址：http://muchs.cn/article0/jpesoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、ChatGPT、網(wǎng)站導航、網(wǎng)站營銷、網(wǎng)站制作、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容