基本的滑鼠互動：
拖拽(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)可以跟很多選項
選項說明：http://docs.jquery.com/ui/draggables/draggable#options
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html
1.3 sortables 排序
所需要的檔案
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法：$(document).ready(function());
});dimensions文件http://jquery.com/plugins/project/dimensions
選項說明：http://docs.jquery.com/ui/sortables/sortable#options
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html
1.4 selectables 選擇
所需要的檔案
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法：$(document).ready(function());
選項說明：http://docs.jquery.com/ui/selectables/selectable#options
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html
1.5 resizables改變大小
所需要的檔案 ，此例子需要幾個css檔案
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法：$(document).ready(function());
css檔案：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
選項說明：http://docs.jquery.com/ui/resizables/resizable#options
選項例項：http://dev.jquery.com/view/trunk ... s/ui.resizable.html
第二部分：互動效果
2.1 accordion 摺疊選單
所需要的檔案:
ui.accordion.js
jquery.dimensions.js
用法：$(document).ready(function());
css檔案：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
選項說明：http://docs.jquery.com/ui/accordion/accordion#options
選項例項：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1
2.2 dialogs 對話方塊
所需要的檔案：
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js
用法：$(document).ready(function());
css檔案：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
選項說明：http://docs.jquery.com/ui/dialog/dialog#options
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html
2.3 sliders 滑動條
所需要的檔案
jquery.dimensions.js
ui.mouse.js
ui.slider.js
用法：$(document).ready(function());
css檔案：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
選項說明：http://docs.jquery.com/ui/slider/slider#options
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html
2.4 tablesorter**排序
所需要的檔案
ui.tablesorter.js
用法：$(document).ready(function());
});css檔案：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
選項說明：http://docs.jquery.com/plugins/tablesorter/tablesorter#options
選項例項：http://tablesorter.com/docs/#demo
2.5 tabs頁籤(對ie支援不是很好)
所需要的檔案
ui.tabs.js
用法：$(document).ready(function());
css檔案：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
選項說明：http://docs.jquery.com/ui/tabs/tabs#initialoptions
選項例項：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
第三部分：效果
3.1 shadow 陰影
例項http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
3.2 magnifier 放大
例項http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html
各種效果的jquery ui 介面 介紹
基本的滑鼠 互動 拖拽 drag and dropping 排序 sorting 選擇 selecting 縮放 resizing 各種互動效果 手風琴式的摺疊選單 accordions 日曆 date pickers 對話方塊 dialogs 滑動條 sliders 排序 table sorter...
各種效果的jquery ui 介面 介紹
基本的滑鼠互動 拖拽 drag and dropping 排序 sorting 選擇 selecting 縮放 resizing 各種互動效果 手風琴式的摺疊選單 accordions 日曆 date pickers 對話方塊 dialogs 滑動條 sliders 排序 table sorters...
jQuery UI效果函式演示
最近在看jquery ui的庫，以前沒怎麼系統學過jquery ui庫函式的效果，js說到底是一門函式式程式語言，靠一點點的搭建來完成整個框架，現將效果函式的用法列表如下，具體的實現可以去看庫函式。addclass 當動畫樣式改變時，為匹配的元素集合內的每個元素新增指定的class。div clic...