12.2.1-12.2.3 jQuery UI小部件(上）（课件）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

12.2.1-12.2.3 jQuery UI小部件(上） 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 折叠面板 日期选择器 03 选项卡 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 能力目标 情感目标 掌握jQuery UI小部件（折叠面板、选项卡、日期选择器）的基本概念。 理解jQuery UI小部件的组成部分，包括结构、样式和行为。 能够利用Dreamweaver插入jQuery UI小部件（折叠面板、选项卡、日期选择器）。 能够设置和编辑jQuery UI小部件的属性，以满足网页设计的需要。 培养学生的创新思维和审美能力，通过jQuery UI小部件的使用提升网页的交互性和用户体验。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 1.jQuery UI小部件的结构、样式和行为的区分与理解。 2.折叠面板、选项卡面板的编辑操作。 1.jQuery UI小部件的基本概念与种类。 2.折叠面板、选项卡、日期选择器的插入方法。 3.折叠面板、选项卡、日期选择器的属性设置。 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 新课导入 jQuery UI小部件是以 DHTML 和 JavaScript等语言编写的小型 Web 应用程序，可以在网页内插入和执行。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2 jQuery UI小部件 jQuery UI小部件 jQuery UI小部件(如折叠式、选项卡、日期选择器、滑块以及自动完成功能)将桌面体验带到了Web之上。例如，选项卡可用于在桌面应用程序中复制对话框的选项卡功能。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2 jQuery UI小部件 利用 Dreamweaver 制作网页时，插入 jQuery UI小部件的方法如下。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 步骤一 确保将光标定位在页面中要插入jQuery UI小部件的位置。 步骤二 选择“插入”I“jQuery UI”选项，然后选择要插入的jQuery UI小部件。如果使用 “插入”面板，则jQuery UI小部件存在于“插入”面板的“jQuery UI”部分中。 步骤三 在选择jQuery UI小部件时，其属性显示在“属性”面板中。 12.2 jQuery UI小部件 用来控制jQuery UI小部件如何响应用户启动事件的 JavaScript。 用来定义jQuery UI小部结构组成的HTML代码块 用来指定jQuery UI小部件外观的CSS。 行为 样式 结构 “jQueryUI” 小部件由以下几部分组成 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2 jQuery UI小部件 jQuery UI框架中的每个小部件都与唯一的CSS 和 JavaScript文件相关联。CSS 文件中包 含设置小部件样式所需的全部信息，而JavaScript文件则赋予了小部件功能。当Dreamweaver 界 面中插入小部件时，Dreamweaver 会自动将这些文件链接到页面，以便微件中包含该页面的功 能和样式。与给定小部件相关联的 CSS 和 JavaScript文件根据该小部件命名，在已保存的页面 中插入小部件时，Dreamweaver会在站点中创建一个jQueryAssets目录，并将相应的JavaScript 和 CSS 文件保存到其中。 知识拓展 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.1 折叠面板 折 叠(Accordion) 面板是一组面板，用来将内容存储到紧凑的空间中。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.1 折叠面板 单击面板上的标签来隐藏或显示存储在可折叠面板中的内容。当访 问者选择不同的选项卡时，折叠微件的面板会相 应地展开或收缩。在折叠微件中，每次只能有一个内容面板处于打开且可见的状态。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 选择“插入” |“jQuery UI”|“Accordion” 选项，或在“插入”面板的“jQuery UI小部件” 类别中单击“Accordion” 按钮。 ② 对于插入到网束中Accordion面板、单面左上角的蓝色区域即表示选择了该Accordion面板，进行编辑操作。 12.2.1 折叠面板 1.插入Accordion 面板 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在“文档”窗口中选择一个Accordion 面板。 ② 在其“属性”面板中，可设置以下属性。 12.2.1 折叠面板 2. 设置Accordion面板属性 面板：单击“面板”旁边的“+”按钮或“-”按钮可添加或删除折叠面板；通过“在列表中向上移动 面板”按钮▲和“在列表中向下移动面板”按钮▼对页面中的面板的顺序进行排列。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.1 折叠面板 2. 设置Accordion面板属性 Disabled:是否禁止折叠。 Collapsible:是否允许折叠活动部分。 Animate:设置缓动效果显示/隐藏面板。 Active:默认显示的第一个面板。 Event:触发事件。 Height Style:折叠式及其面板的高度。 Icons:指定要用于面板标题的图标及要用于活动面板标题的图标。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击出现在该选项 卡右侧的眼睛图标。 ② 在“文档”窗口中将光标定位在部件名称上可重命名选项卡标题，在内容部分编辑折 叠面板要显示的内容。 12.2.1 折叠面板 3. 编辑Accordion 面板 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.2 选项卡 选项卡 (Tabs) 是一组面板，用来将内容存储到紧凑的空间中。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.2 选项卡 选择面板上的标签可隐藏或显示存储在选项卡式面板中的内 容，选择不同的选项卡面板会相应地打在给定时间内选顶 卡式面板中只有一内容面板处于打开状态，选项卡“新闻”处于打开状态，而其他的选项卡 面板均处于关闭状态。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 选择“插入”|“jQuery UI”|“Tabs”选项，或在“插入”面板的“jQuery UI小部件” 类别中单击 “Tabs” 按钮。 ② 对于插入到网页中的选项卡面板，单击左上角的蓝色区域即表示选择了该jQuery UI 小部件选项卡面板，可进行编辑操作。 12.2.2 选项卡 1.插入选项卡面板 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在“文档”窗口中单击选项卡左上角的蓝色区域选中该jQuery UI小部件选项卡面板。 ② 在其“属性”面板中，可设置以下属性。 12.2.2 选项卡 2. 设置选项卡面板属性 面板：单击“添加面板”按钮+或“删除面板”按钮一。通过“在列表中向上移动面板”按 和“在 列表中向下移动面板”按钮，可对页面中的 jQuery UI小部件选项卡进行左右排序。 Active:默认情况下打开的面板。 Hide:选项卡隐藏的动画效果。 Show: 选项卡显示的动画效果。 Orientation:选项卡的方向 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 将鼠标定位在选项卡标题所在区域即可对该标题进行编辑操作。 ② 对于插入到页面中选项卡面板所对应的内容，光标移动到相应的选项卡时，会出现眼 睛图标，单击该图标即可将此面板激活显示。 ③ 面板内容中所插入的内容与普通网页内容操作无异，如插入文本、图像、表格等。 12.2.2 选项卡 3.编辑选项卡面板 对于插入到网页中的选项卡面板，单击左上角的蓝色区域即表示选择了该小部件，可以进 行编辑操作。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.3 日期选择器 日期选择器在默认情况下，会在日期输入文本框获得焦点时打开日历面板，并在失去焦点或选择日期时自动关闭。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在页面中需要输入日期的位置定位光标。 ②选择“插入“|”jQuery UI小部件“|”jQuery UI小部件菜单栏“选项。或在“插入”面板的“jQuery UI” 类别中单击 “Datepicker” 按钮。 ③ 在页面插入点位置插入日期选择器。 12.2.3 日期选择器 1.插入日期选择器 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击日期选择器左上方的蓝色标签或在标签选择器上单击<input#Datepicker*>即可选 中该部件。 ② 在其“属性”面板中，可以进行以下属性设置。 12.2.3 日期选择器 2. 编辑日期选择器属性 Date Format:设置日期字符串的显示格式，默认为mm/dd/yy。 区域设置：用于显示日期的语言。 按钮图像：用于显示日历的按钮。 Change Month:使月份可编辑。 Change Year:使年份可编辑 内联：放置内联日期选择器替代打开窗口。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.3 日期选择器 2. 编辑日期选择器属性 Show Button Panei:打开按钮面板。 Min Date:设置一个最小的可选日期。可以是Date 对象，或者是数字(从今天算起，如+7),或者 有效的字符串('y'代表年，'m '代表月，'w'代表周，'d代表日，如'+1m+7d')。 Max Date:设置一个最大的可选日期。可以是Date 对象，或者是数字(从今天算起，如+7),或者 有效的字符串('y'代表年，'m'代表月，'w '代表周，'d代表日，如'+1m+7d')。 Number Of Months:要显示的月数。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 jQuery UI小部件(上） 1) 折叠面板 2）选项卡 3）日期选择器 插入Accordion 面板 设置Accordion面板属性 编辑Accordion 面板 插入选项卡面板 设置选项卡面板属性 编辑选项卡面板 插入日期面板 设置日期面板属性 编辑日期面板 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$