jQuery UI 外掛程式 使用說明

2021-08-31 10:38:19 字數 2444 閱讀 1179

所有效果說明:

基本的滑鼠互動:

拖拽(drag and dropping)、排序(sorting)、選擇(selecting)、縮放(resizing)

各種互動效果:

手風琴式的摺疊選單(accordions)、日曆(date pickers)、對話方塊(dialogs)、滑動條(sliders)、**排序(table sorters)、頁籤(tabs)

放大鏡效果(magnifier)、陰影效果(shadow)

第一部分:滑鼠互動

1.1 draggables:拖拽

所需檔案:

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

用法:檔案載入後,可以拖拽class = "block"的層

$(document).ready(function());

draggable(options)可以跟很多選項

選項說明:

選項例項:

1.2 droppables

所需要檔案,drag drop

ui.mouse.js

ui.draggable.js

ui.draggable.ext.js

ui.droppable.js

ui.droppable.ext.js

用法:$(document).ready(function());

$(".drop").droppable(

});});

選項說明:

選項例項:

1.3 sortables 排序

所需要的檔案

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.sortable.js

用法:$(document).ready(function());

});dimensions文件

選項說明:

選項例項:

1.4 selectables 選擇

所需要的檔案

jquery.dimensions.js

ui.mouse.js

ui.draggable.js

ui.droppable.js

ui.selectable.js

用法:$(document).ready(function());

選項說明:

選項例項:

1.5 resizables改變大小

所需要的檔案 ,此例子需要幾個css檔案

jquery.dimensions.js

ui.mouse.js

ui.resizable.js

用法:$(document).ready(function());

css檔案:

選項說明:

選項例項:

第二部分:互動效果

2.1 accordion 摺疊選單

所需要的檔案:

ui.accordion.js

jquery.dimensions.js

用法:$(document).ready(function());

css檔案:

選項說明:

選項例項:

2.2 dialogs 對話方塊

所需要的檔案:

jquery.dimensions.js

ui.dialog.js

ui.resizable.js

ui.mouse.js

ui.draggable.js

用法:$(document).ready(function());

css檔案:

選項說明:

選項例項:

2.3 sliders 滑動條

所需要的檔案

jquery.dimensions.js

ui.mouse.js

ui.slider.js

用法:$(document).ready(function());

css檔案:

選項說明:

選項例項:

2.4 tablesorter**排序

所需要的檔案

ui.tablesorter.js

用法:$(document).ready(function());

});css檔案:

選項說明:

選項例項:

2.5 tabs頁籤(對ie支援不是很好)

所需要的檔案

ui.tabs.js

用法:$(document).ready(function());

css檔案:

選項說明:

選項例項:

tabs ext

第三部分:效果

3.1 shadow 陰影

例項3.2 magnifier 放大

例項

myFocus外掛程式的使用說明。

step 1.在html的標籤內引入相關檔案 step 2.建立myfocus標準的html結構,並填充你的內容 img標籤的屬性說明 step 3.在step1 之後的任意乙個位置呼叫 建議在head標籤結束前呼叫 你可以簡單的呼叫 只設定它的盒子id,其它引數全部預設設定 或詳細一點的引數呼叫 ...

jQuery UI 常用外掛程式

jquery 外掛程式位址 常用外掛程式 1.jquery validate 表單驗證。2.jquery file upload 檔案上傳。3.jtable 4.jquery jqgrid jqueryui 常用外掛程式 2.button 按鈕,各種各樣的按鈕。3.datepicker 日曆,選擇日...

jQuery UI外掛程式對比

昨天的博文中簡單的整理了一下 jquery 的 ui 外掛程式,在這裡我將對這幾款外掛程式的優缺點及適用範圍進行一下簡單的說明,希望通過交流我們可以共同的進步,有不足的地方請大家予以指正但不要吐槽。1.jquery ui 這個是 jquery 官方的 ui 外掛程式,相容性好,更新速度快,永遠能夠跟...