《jQuery网页特效设计基础教程--第8章-使用jQuery-UI插件-教案.docx》由会员分享，可在线阅读，更多相关《jQuery网页特效设计基础教程--第8章-使用jQuery-UI插件-教案.docx（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第8章使用jQuery UI插件课程名称jQuery网页特效设计基础教程项目名称使用jQuery UI插件任务名称使用jQuery UI插件课时4项目性质演示性 验证性 设计性 4综合性授课班级授课日期授课地点教学目标能力目标：1 .具备使用jQuery UI的常用插件的能力2 .具备使用jQuery UI的特效的能力知识目标：1 . 了解jQuery UI的概念、工作原理、使用方式、插件2 .掌握使用jQuery UI的常用插件的方法3 .掌握使用jQuery UI的特效的方法素质目标：1 .培养学生信息搜集能力2 .培养学生团结合作、互帮互助的能力教学内容1 .任务描述2 .任务展示与实现
2、(1)使用jQuery UI的常用插件(2)使用jQuery UI的特效(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结教学重点1. jQuery UI的常用插件的使用2. jQuery UI的特效的使用3. 编写jQuery代码教学难点1 .使用jQuery UI的常用插件教学准备1 .装有jQuery的电脑2 .教学课件PPT3 .教材：jQuery网页特效设计基础教程（慕课版）刘刚 人民邮电出版社作业设计1.使用jQuery实现许愿墙教学过程和教学内容与过程（教学内容、教学方法、组织形式、教学手段）织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（
3、打开电脑、打开 课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。蝴【课前说明】本章主要介绍了 jQuery UI的概念、jQuery UI的使用、jQuery UI的工作原理、jQuery UI的常用 插件，jQuery UI的特效等知识点。其中重点介绍了 jQuery UI的常用插件，包括折叠面板、自动完 成、按钮、日期选择器、对话框、菜单等。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。课程内容一、jQuery UI 概述jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库，它包
4、含底层用户交互、动 回、特效和可更换主题的可视控件。二、使用jQuery UI中的插件使用多个案例介绍了 jQuery UI中的插件。jQuery UI包含了许多维持状态的插件（Widget）,通 常称为jQuery UI插件，它是专门由jQuery官方维护的UI方向的插件，主要包括折叠面板 （Accordion） 自动完成（Autocomplete）、按钮（Button）、日期选择器（Datepicker）、对话框（Dialog）、 菜单（Menu）、进度条（Progressbar）、滑块（Slider）旋转器（Spinner）标签页（Tabs）、工具提 示框（Tooltip）、复选框单选按
5、钮（Checkboxradio） 组件控制组（Controlgroup） 鼠标（Mouse）、 选择菜单（Selectmenu）等。案例：本实例分别使用Button元素和类型为submit的input元素制作按钮。程序开发步骤如下。(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() $( inputf
6、type二submit, a, buttonn).button().click(function( event) event.preventDefault();)；)；button一个 button 元素/buttoninput type二submit” value=一个提交按钮”综合实例：使用jQuery实现许愿墙实VII实VII使用jQuery,并结合jQuery UI制作一个简单的许愿墙页面，运行程序，在网页中随机显示字条, 而且可以通过鼠标拖曳改变字条的位置。总结通过学习，学生能够掌握jQuery UI技术的基本概念、安装方式、jQuery UI的查用插件、jQuery评价 UI的特效使用方法。本节课主要运用案例教学法，通过对jQuery UI应用的深入理解，掌握jQuery UI应用的特点及 优势，深入探讨jQuery UI应用的编程方法，通过实例的方法加强对jQuery UI应用的掌握，达到能 够独立熟练运用jQuery UI应用来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的 质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、 创新学习的方式。