jQuery網(wǎng)頁特效設計基礎教程-第8章-使用jQuery-UI插件-教案

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

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

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

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

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

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