1、第8章使用jQuery UI插件課程名稱jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程項(xiàng)目名稱使用jQuery UI插件任務(wù)名稱使用jQuery UI插件課時(shí)4項(xiàng)目性質(zhì)演示性 驗(yàn)證性 設(shè)計(jì)性 4綜合性授課班級(jí)授課日期授課地點(diǎn)教學(xué)目標(biāo)能力目標(biāo)：.具備使用jQuery UI的常用插件的能力.具備使用jQuery UI的特效的能力知識(shí)目標(biāo)：. 了解jQuery UI的概念、工作原理、使用方式、插件.掌握使用jQuery UI的常用插件的方法.掌握使用jQuery UI的特效的方法素質(zhì)目標(biāo)：.培養(yǎng)學(xué)生信息搜集能力.培養(yǎng)學(xué)生團(tuán)結(jié)合作、互幫互助的能力教學(xué)內(nèi)容.任務(wù)描述.任務(wù)展示與實(shí)現(xiàn)(1)使用jQuery UI的常用插

2、件(2)使用jQuery UI的特效(2)學(xué)生動(dòng)手操作.教師講解本任務(wù)涉及的知識(shí)點(diǎn).任務(wù)小結(jié)教學(xué)重點(diǎn)jQuery UI的常用插件的使用jQuery UI的特效的使用編寫(xiě)jQuery代碼教學(xué)難點(diǎn)1 .使用jQuery UI的常用插件教學(xué)準(zhǔn)備.裝有jQuery的電腦.教學(xué)課件PPT.教材：jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版）劉剛 人民郵電出版社作業(yè)設(shè)計(jì)1.使用jQuery實(shí)現(xiàn)許愿墻教學(xué)過(guò)程和教學(xué)內(nèi)容與過(guò)程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）織做好課前“5分鐘”教學(xué)管理（多媒體、實(shí)訓(xùn)室），做好上課前的各項(xiàng)準(zhǔn)備工作（打開(kāi)電腦、打開(kāi) 課件、打開(kāi)軟件、打開(kāi)U盤(pán)中的素材位置、打開(kāi)授課計(jì)劃、教案等

3、），吸引學(xué)生注意力。蝴【課前說(shuō)明】本章主要介紹了 jQuery UI的概念、jQuery UI的使用、jQuery UI的工作原理、jQuery UI的常用 插件，jQuery UI的特效等知識(shí)點(diǎn)。其中重點(diǎn)介紹了 jQuery UI的常用插件，包括折疊面板、自動(dòng)完 成、按鈕、日期選擇器、對(duì)話框、菜單等?！灸康摹渴箤W(xué)生從了解本單元的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評(píng)方式等方面明確學(xué)習(xí)本單元知識(shí)的要求和目 標(biāo)。課程內(nèi)容一、jQuery UI 概述jQuery UI是以jQuery為基礎(chǔ)的開(kāi)源JavaScript網(wǎng)頁(yè)用戶界面代碼庫(kù)，它包含底層用戶交互、動(dòng) 回、特效和可更換主題的可視控件。二、使用jQuery

4、UI中的插件使用多個(gè)案例介紹了 jQuery UI中的插件。jQuery UI包含了許多維持狀態(tài)的插件（Widget）,通 常稱為jQuery UI插件，它是專(zhuān)門(mén)由jQuery官方維護(hù)的UI方向的插件，主要包括折疊面板 （Accordion） 自動(dòng)完成（Autocomplete）、按鈕（Button）、日期選擇器（Datepicker）、對(duì)話框（Dialog）、 菜單（Menu）、進(jìn)度條（Progressbar）、滑塊（Slider）旋轉(zhuǎn)器（Spinner）標(biāo)簽頁(yè)（Tabs）、工具提 示框（Tooltip）、復(fù)選框單選按鈕（Checkboxradio） 組件控制組（Controlgroup）

5、鼠標(biāo)（Mouse）、 選擇菜單（Selectmenu）等。案例：本實(shí)例分別使用Button元素和類(lèi)型為submit的input元素制作按鈕。程序開(kāi)發(fā)步驟如下。(1)新建一個(gè)index.html文件，將其放到8-3文件夾中。(2)將 jQuery UI 文件夾 jquery-ui-1.12.1 .custom 復(fù)制到 8-3 文件夾中。(3)使用Dreamweaver打開(kāi)index.html文件，在index.html文件中編寫(xiě)如下代碼：按鈕(Button)的使用V/title,$(function() $( inputftype二submit, a, buttonn).button().cli

6、ck(function( event) event.preventDefault();)；)；button一個(gè) button 元素/buttoninput type二submit” value=一個(gè)提交按鈕”綜合實(shí)例：使用jQuery實(shí)現(xiàn)許愿墻實(shí)VII實(shí)VII使用jQuery,并結(jié)合jQuery UI制作一個(gè)簡(jiǎn)單的許愿墻頁(yè)面，運(yùn)行程序，在網(wǎng)頁(yè)中隨機(jī)顯示字條, 而且可以通過(guò)鼠標(biāo)拖曳改變字條的位置。總結(jié)通過(guò)學(xué)習(xí)，學(xué)生能夠掌握jQuery UI技術(shù)的基本概念、安裝方式、jQuery UI的查用插件、jQuery評(píng)價(jià) UI的特效使用方法。本節(jié)課主要運(yùn)用案例教學(xué)法，通過(guò)對(duì)jQuery UI應(yīng)用的深入理解，掌握jQuery UI應(yīng)用的特點(diǎn)及 優(yōu)勢(shì)，深入探討jQuery UI應(yīng)用的編程方法，通過(guò)實(shí)例的方法加強(qiáng)對(duì)jQuery UI應(yīng)用的掌握，達(dá)到能 夠獨(dú)立