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

12.2.7-12.2.10 jQuery UI小部件(下） 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 滑块 复选框按钮组及单选按钮组 03 按钮及按钮组 02 保存含有 “jQuery UI” 小部件的页面 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 能力目标 情感目标 掌握jQuery UI小部件中滑块、按钮及按钮组、复选框按钮组及单选按钮组的使用方法。 了解如何编辑jQuery UI小部件的属性以满足网页设计需求。 能够熟练地在网页中插入并配置jQuery UI小部件。 能够解决jQuery UI小部件在网页中可能遇到的常见问题。 培养学生对网页设计中用户体验重要性的认识。 激发学生对网页设计创新的兴趣和热情。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 1.如何合理选择和使用jQuery UI小部件以优化用户体验。 2.避免jQuery UI小部件的过度使用，保持网页的简洁性和加载速度。 1.jQuery UI小部件的插入方法。 2.jQuery UI小部件的属性设置与编辑。 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 新课导入 在前一节课程中，我们一起学习了三个常用的jQuery UI小部件，分别是进度条、对话框、自动填充、本节课我们继续学习另外四个小部件 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 知识点复习 温故而知新，为师矣 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 进度条 进度条(ProgressBar)控件通过从左到右用一些方块填充矩形来表示一个操作较长的进度。 对话框 在页面开发时，经常会需要在 Web 页面上弹出一些对话框 (Dialog),如询问用户或者让用户选择。 自动填充 自动填充(Autocomplete) 通常指浏览器等软件自动跟踪用户最近键入的信息，如 Web站点地址、表单中的信息以及搜索查询等。 12.2.7 滑块 滑块 (Slider) 控件由滑块与滑动条组成。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在页面中需要显示滑块的位置定位光标。 ② 选择“插入”|“jQuery UI”|“Slider”选项。或在“插入”面板的“jQuery UI”类别 中单击 “Slider” 按钮。 ③ 在页面插入点处插入 Slider 。 12.2.7 滑块 1.插入 Slider 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.7 滑块 如果滑动条的整体长度为100, 则滑动的范围就是0～100。开发中常使用滑动条来调节声音或者颜色等。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击 Slider左上方的蓝色标签或在标签选择器上单击<input#Slider*>即可选中该 部件。 ② 在其“属性”面板中，可以进行以下属性设置。 12.2.7 滑块 2. 编辑Slider 属性 Min:滑块最小值。 Max:滑块最大值。 Step:最小值与最大值之间的步长值大小。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.7 滑块 2.编辑进度条属性 Range:如果设置为true, 则滑动条会自动创建两个滑块，一个最大、一个最小，用于设置一个 范围内值。 Value(s):设置初始时滑块的值，如果有多个滑块，则设置第一个滑块。 Animate:单击滑动区域时，滑块是否使用动画效果平滑移动到单击位置。 Orientation:通常不需要设置此选项，程序会自动识别，如果未正确识别，则可以设置为'horizontal 或'vertical'。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.8 按钮及按钮组 可以增强表单中的按钮、输入框和锚等元素，使其具有按钮显著风格，能够正确对鼠标滑动做出反应。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在页面需要显示按钮的位置定位光标。 ② 选择“插入”|“jQuery UI”|“Button/Buttonset”选项。或在“插入”面板的“jQuery UI” 类别中单击“Button/Buttonset”按钮。 ③ 在页面插入点处插入按钮或按钮组。 12.2.8 按钮及按钮组 1.插 入Button或 Buttonset 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击Button/Buttonset左上方的蓝色标签或在标签选择器上单击<input#Button*>即可选 中该部件。 ② 在 Button“属性”面板中，可以进行以下属性设置。 12.2.8 按钮及按钮组 2. 编辑Button/Buttonset属性 Label:按钮上的标签文字。 Icons:Primary:表示在标签文本左侧的图标。 Secondary: 表示在标签文本右侧的图标。 Disabled: 禁用按钮。 Text: 显示或隐藏文本。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.9 复选框按钮组及单选按钮组 使用JQuery UI的复选按钮组及单选按钮组可以美化表单中的复选按钮组及单选按钮组组件。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在页面需要显示按钮的位置定位光标。 ② 选择“插入”|“jQuery UI”|“Checkbox Buttons/Radio Buttons”选项。或在“插入” 面板的“jQuery UI”类别中单击“Checkbox Buttons/Radio Buttons” 按钮。 ③ 在页面插入点处插入复选框按钮组及单选按钮组。 12.2.9 复选框按钮组及单选按钮组 1.插入复选框按钮组或单选按钮组 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击复选框按钮组及单选按钮组左上方的蓝色标签或在标签选择器上单击相应标签选 中该部件。 ② 在其“属性”面板中，可以进行以下属性设置。 12.2.9 复选框按钮组及单选按钮组 2.编辑复选框按钮组及单选按钮组属性 Buttons: 设置按钮的个数。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 想一想 完成后该如何保存呢？ 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.10 保存含有“jQuery UI”小部件的页面 在首次保存含有“jQuery UI”小部件的页面文件时，会弹出“复制相关文件”对话框 单击“确定”按钮进行复制，否则将不能保证“jQuery  UI”小部件的正确运行。  掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.10 保存含有“jQuery UI”小部件的页面 Dreamweaver将自动复制“jQuery UI”小部件所需要的CSS 文件、JavaScript文件和相关图像文件到站点目录的jQueryAssets文件夹内。 该目录名称和位置可在站点定义时进行指定。  掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.10 保存含有“jQuery UI”小部件的页面 定义本地站点时，在“高级设置”选项卡的“jQuery”子选项卡中设置jQuery UI资源保存在网站中的位置 知识拓展 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 辩一辩 jQuery UI小部件在网页设计中的必要性与过度使用的利弊 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 考一考 1.什么是jQuery UI滑块（Slider）控件？ 【答案】jQuery UI滑块（Slider）控件由滑块与滑动条组成，使用Slider控件可以计算出滑块在滑动过程中占整个滑动条的比例。它通常用于调节声音、颜色等参数，提供一个直观的交互方式。 2.在Dreamweaver中保存含有“jQuery UI”小部件的页面时，为什么会弹出“复制相关文件”对话框？ 【答案】在Dreamweaver中保存含有“jQuery UI”小部件的页面时，会弹出“复制相关文件”对话框，是因为需要将这些小部件所需的CSS文件、JavaScript文件和相关图像文件复制到站点目录中。这是为了确保“jQuery UI”小部件能够正确运行和显示，从而提高网页的交互性和用户体验。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 jQuery UI小部件(下） 1) 滑块 2）按钮及按钮组 3）复选框按钮组及单选按钮组 插入 Slider 编辑Slider 属性 插入Button或Buttonset 编 辑Button/Buttonset属性 插入复选框按钮组或单选按钮组 编辑复选框按钮组及单选按钮组属性 4)保存含有“jQuery UI”小部件的页面 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$