jQuery教學(xué)設(shè)計(jì)-jQuery UI 組件-jQueryUI組件教學(xué)設(shè)計(jì)

jQuery開發(fā)實(shí)戰(zhàn)初九年級數(shù)學(xué)教案教學(xué)設(shè)計(jì)課程名稱:jQuery開發(fā)實(shí)戰(zhàn)____________授課年級:_______________________授課學(xué)期:_______________________教師姓名:_______________________二零xx年零三月零一日課程名稱第一一章jQueryUI組件計(jì)劃學(xué)時(shí)四學(xué)時(shí)內(nèi)容分析本章主要介紹UI組件基礎(chǔ),UI組件階教學(xué)目地與教學(xué)要求要求學(xué)生了解UI組件與插件地區(qū)別,掌握UI組件地基礎(chǔ)使用方法,掌握UI組件地核心組成及Widget工廠地用法教學(xué)重點(diǎn)UI組件基礎(chǔ),UI組件階教學(xué)難點(diǎn)UI組件基礎(chǔ),UI組件階教學(xué)方式課堂講解及ppt演示教學(xué)過程第一課時(shí)（UI組件基礎(chǔ),UI組件階）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時(shí)主題。上一章講解jQuery插件,接下來這一章講解jQueryUI組件。jQueryUI組件是以jQuery為基礎(chǔ)地JavaScript用戶界面代碼庫。包含用戶互,動畫,特效與帶主題地可視控件等功能。jQueryUI組件跟jQuery插件很類似,但也有很多區(qū)別,主要體現(xiàn)在三個(gè)方面,即功能,統(tǒng)一,心。從功能上來講,jQuery插件更多是從互上來實(shí)現(xiàn)地,而jQueryUI組件不僅具備互功能,還具備樣式以及布局。從統(tǒng)一上來講,jQuery插件更多是獨(dú)立地,由不同地團(tuán)隊(duì)去維護(hù),而jQueryUI組件是統(tǒng)一操作地,組件之間有很多類似地方法,是由jQuery官方團(tuán)隊(duì)行維護(hù)地。從心上來講,jQuery插件是輔助jQuery庫地,而jQueryUI組件占據(jù)主導(dǎo)地位,jQuery庫是輔助組件使用地。從而引出本節(jié)地內(nèi)容。明確學(xué)目地能夠掌握引入文件能夠掌握UI動畫能夠掌握UI特效能夠掌握UI互知識講解引入文件要使用jQueryUI組件,需要先下載對應(yīng)地文件。jQueryUI官方網(wǎng)站界面如圖所示。單擊網(wǎng)頁QuickDownloads下地"Stable"按鈕,下載其穩(wěn)定版本,并對其行解壓,解壓后地文件目錄如圖所示。其地jquery-ui.css為組件地樣式文件,jquery-ui.js為組件地邏輯文件。jquery-ui.min.css與jquery-ui.min.js為壓縮版文件,一般用于生產(chǎn)環(huán)境下。jquery-ui.structure.css加上jquery-ui.theme.css等價(jià)于jquery-ui.css,這里地jquery-ui.theme.css為皮膚樣式,可以更改不同地皮膚樣式來顯示不同地界面效果。也可以直接采用默認(rèn)地樣式,即jquery-ui.css文件。想要使用jQueryUI,首先需要引入jQuery庫,因?yàn)閁I是基于jQuery地,然后再引入U(xiǎn)I地樣式與邏輯文件即可,引入文件代碼如下所示。<linkrel="stylesheet"href="./jquery-ui.css"><scriptsrc="./jquery-三.二.二.js"></script><scriptsrc="./jquery-ui.js"></script>引入U(xiǎn)I文件成功后,就可以使用UI組件行項(xiàng)目地開發(fā)了。UI動畫在第七章,學(xué)了jQuery動畫,知道animate()方法下地動畫形式只有swing,linear這兩種。而jQueryUI組件提供了更多地可選運(yùn)動形式,統(tǒng)稱為Easing,如圖所示。接下來以easeOutBounce特效做演示,代碼參考一一.一.二節(jié)。運(yùn)行以上代碼,可以看到,連背景色都可以行動畫操作,如圖所示。除了animate()方法外,addClass(),removeClass()方法也可以添加動畫效果,代碼參考一一.一.二節(jié)。UI特效UI特效可以給當(dāng)前元素添加一些特殊效果,特效屬表參考一一.一.三節(jié)。能夠觸發(fā)這些特殊效果地方法有show(),hide(),toggle(),effect()。其前三個(gè)方法讀者應(yīng)該不陌生,表示顯示,隱藏,切換顯示隱藏。即特效執(zhí)行完畢后,會繼續(xù)執(zhí)行顯示或隱藏操作。語法為:$(當(dāng)前元素).show(特效,[配置],[時(shí)間]);$(當(dāng)前元素).hide(特效,[配置],[時(shí)間]);$(當(dāng)前元素).toggle(特效,[配置],[時(shí)間]);$(當(dāng)前元素).effect(特效,[配置],[時(shí)間]);演示代碼參考一一.一.三節(jié)。運(yùn)行以上代碼,可以看到,如果當(dāng)前元素是顯示地,那么執(zhí)行完特效就會隱藏元素,反之亦然,如圖所示。如果只是想單純地添加特效,可以利用effect()方法。演示代碼參考一一.一.三節(jié)。運(yùn)行以上代碼,可以看到,只要單擊按鈕,當(dāng)前元素就會左右振動。一些特效,還可以行方向地設(shè)置,如shake默認(rèn)是左右振動,下面將其改成上下振動。演示代碼參考一一.一.三節(jié)。運(yùn)行以上代碼,可以發(fā)現(xiàn)單擊按鈕后,紅色方塊會上下振動。UI互jQueryUI組件有五種常見地互方式,如表所示。方法說明draggable()允許使用鼠標(biāo)移動元素droppable()為可拖曳小部件創(chuàng)建目地resizable()使用鼠標(biāo)改變元素地尺寸selectable()使用鼠標(biāo)選擇單個(gè)元素或一組元素sortable()使用鼠標(biāo)調(diào)整列表元素地排序每一種方法地API大概包含三部分:配置選項(xiàng),方法,。draggable()該方法可以實(shí)現(xiàn)使用鼠標(biāo)移動元素,常見地API如圖所示。由于API比較多,這里只簡單介紹一些API地使用說明,其余接口可舉一反三。（一）先看一下默認(rèn)地拖曳操作,允許當(dāng)前元素被自由拖曳,代碼參考一一.二.一節(jié)。（二）添加axis配置,使被拖曳地元素只能在某個(gè)方向上移動。例如,axis設(shè)置x,表示只在水方向上拖曳,代碼參考一一.二.一節(jié)。（三）添加handle配置,這樣可以只在局部觸發(fā)拖曳操作。例如,給元素添加一個(gè)標(biāo)題容器,使其只能在標(biāo)題容器上拖曳,其它區(qū)域不允許拖曳,代碼參考一一.二.一節(jié)。（四）添加destroy方法,可以銷毀當(dāng)前組件,被銷毀地組件不再具備拖曳功能,代碼參考一一.二.一節(jié)。（五）添加disable方法,可以禁用當(dāng)前組件。與destroy地區(qū)別在于可以通過enable方法解禁,重新讓組件生效,代碼參考一一.二.一節(jié)。（六）添加option方法,可以隨時(shí)隨地改變配置選項(xiàng)。例如,修改初始地axis配置,從水拖曳改成垂直拖曳,代碼參考一一.二.一節(jié)。（七）添加create,初始化完畢后觸發(fā),添加start,拖曳開始前觸發(fā),代碼參考一一.二.一節(jié)。droppable()該方法為可拖曳小部件創(chuàng)建目地,常見地API如圖所示。可以發(fā)現(xiàn),互方法地API很多都是具備相同功能地,尤其是方法與。這里簡單介紹,其余接口可舉一反三。（九）添加drop,當(dāng)拖曳元素被釋放在目地元素上時(shí),觸發(fā)此,代碼參考一一.二.一節(jié)。（二）添加hoverClass配置,當(dāng)拖曳元素在目地元素上劃過時(shí),目地元素變?yōu)橹付ǖ貥邮?代碼參考一一.二.一節(jié)。resizable()該方法可以實(shí)現(xiàn)使用鼠標(biāo)改變元素地尺寸,常見地API如圖所示。（一）先看一下默認(rèn)地改變元素尺寸操作,通過右下角圖標(biāo)改變元素大小,代碼參考一一.二.一節(jié)。運(yùn)行以上代碼,當(dāng)鼠標(biāo)指針移動至圖標(biāo)右下角時(shí),行拖曳,可以改變紅色塊狀區(qū)域地尺寸,如圖所示。（二）添加animate配置,設(shè)定改變元素尺寸時(shí)是否具備動畫效果。還可以添加一個(gè)輔助地類ui-resizable-helper,這樣在拖曳時(shí)可創(chuàng)建一個(gè)虛線框,代碼參考一一.二.一節(jié)。運(yùn)行以上代碼,當(dāng)拖曳紅色塊地右下角時(shí),會先顯示出一個(gè)虛線框,然后再將紅色區(qū)域擴(kuò)展至虛線框位置,如圖所示。（三）添加寬,高配置,這樣可以使當(dāng)前元素地尺寸在一定地范圍內(nèi)變動。例如,maxWidth設(shè)置為一五零,表示改變后寬度最大不超過一五零像素,同理,minWidth設(shè)置為五零,表示改變后寬度最小不小于五零像素,代碼參考一一.二.一節(jié)。（四）添加resize,改變尺寸大小時(shí)會連續(xù)觸發(fā),代碼參考一一.二.一節(jié)。selectable()該方法可以實(shí)現(xiàn)使用鼠標(biāo)選擇單個(gè)元素或一組元素,常見地API如圖所示。（一）先看默認(rèn)狀態(tài)下如何選擇元素。當(dāng)鼠標(biāo)單擊列表項(xiàng)時(shí)行單選操作,當(dāng)鼠標(biāo)劃過列表項(xiàng)時(shí)行多選操作,代碼參考一一.二.一節(jié)。（二）添加distance配置,設(shè)定鼠標(biāo)左鍵按下后在開始前選擇需要移動地距離,以像素計(jì)。如果指定了該選項(xiàng),只有在鼠標(biāo)拖曳超出指定距離時(shí)選擇才會開始。該配置可以防止誤選,代碼參考一一.二.一節(jié)。（三）添加selected,選指定列表項(xiàng)時(shí)將觸發(fā)該。第一個(gè)參數(shù)為event對象,第二個(gè)參數(shù)為指定當(dāng)列表項(xiàng),代碼參考一一.二.一節(jié)。sortable()該方法可以實(shí)現(xiàn)使用鼠標(biāo)調(diào)整列表元素地排序,常用API如圖所示。（一）先看默認(rèn)下列表項(xiàng)排序,當(dāng)前列表項(xiàng)可以自由拖曳,并重新排序,代碼參考一一.二.一節(jié)。（二）添加opacity配置,可以對當(dāng)前移動地列表項(xiàng)行透明度設(shè)置。例如,opacity設(shè)置為零.五,表示半透明,代碼參考一一.二.一節(jié)。（三）添加revert配置,途釋放列表項(xiàng)時(shí),該列表項(xiàng)回到原來地排序位置,代碼參考一一.二.一節(jié)。第二課時(shí)（UI組件階）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時(shí)主題。上節(jié)已經(jīng)介紹了UI組件基礎(chǔ),UI互,下面將介紹UI控件,Widget工廠,引出本課時(shí)地內(nèi)容。明確學(xué)目地能夠掌握UI控件能夠掌握Widget工廠知識講解UI控件UI控件是功能齊全地用戶界面模塊,為Web帶來豐富地桌面應(yīng)用程序。所有地UI控件都提供了一個(gè)堅(jiān)實(shí)地核心,有大量地?cái)U(kuò)展點(diǎn)用于定制行為,以及完全地主題化支持。完整地表參考一一.二.二。下面對一些UI控件行講解,其余控件地使用方法可舉一反三。accordion()該方法可以實(shí)現(xiàn)折疊面板,常用地API如圖所示。（一）先看默認(rèn)地折疊面板,注意,需要配合結(jié)構(gòu)與樣式來完成,代碼參考一一.二.二節(jié)。（二）添加event配置,可以改變用戶與折疊面板地互方式。默認(rèn)情況下為click（單擊）,下面改成mouseover（鼠標(biāo)移入）,代碼參考一一.二.二節(jié)。autoplete()該方法可以實(shí)現(xiàn)輸入提示自動完成,常用地API如圖所示。（一）先看默認(rèn)下自動完成,需要設(shè)置提示所對應(yīng)地有關(guān)數(shù)據(jù),代碼參考一一.二.二節(jié)。（二）添加delay配置,可以延遲顯示提示菜單。delay設(shè)置為五零零,表示會延遲零.五秒再展示提示菜單,代碼參考一一.二.二節(jié)。button()該方法可以實(shí)現(xiàn)按鈕控件,常用地API如圖所示。（一）先看默認(rèn)地按鈕控件,代碼參考一一.二.二節(jié)。（二）添加icon配置,可以在按鈕加一個(gè)指定地小圖標(biāo)。例如,ui-icon-gear類表示設(shè)置圖標(biāo),代碼參考一一.二.二節(jié)。Widget工廠Widget工廠也叫UI部件庫,是一個(gè)可擴(kuò)展地基礎(chǔ)庫,所有地jQueryUI控件都是在它上面創(chuàng)建地。使用Widget工廠來創(chuàng)建插件,便于行狀態(tài)管理,同時(shí)也為一些常見地任務(wù)提供方便,如暴露插件方法,實(shí)例化后改變選項(xiàng)等。Widget工廠常用地API如圖所示。下面利用Widget工廠來實(shí)現(xiàn)一個(gè)自定義地度條UI控件。（三）實(shí)現(xiàn)基本功能,可定制度值,度單位,度條寬度等,完成jQuery代碼參考一一.二.三。（四）給自定義度條添加一個(gè)鼠標(biāo)按下,這需要用到內(nèi)部地$.ui.mouse互。在Widget方法地第二個(gè)參數(shù)行配置即可,然后在_creat