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

12.2.4-12.2.6 jQuery UI小部件(中） 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 进度条 自动填充 03 对话框 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 能力目标 情感目标 掌握jQuery UI小部件（进度条、对话框、自动填充）的基本概念。 理解jQuery UI小部件的组成部分，包括结构、样式和行为。 能够利用Dreamweaver插入jQuery UI小部件（进度条、对话框、自动填充）。 能够设置和编辑jQuery UI小部件的属性，以满足网页设计的需要。 培养学生的团队协作能力，在学习过程中相互交流，共同促进 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 1.jQuery UI小部件的结构、样式和行为的区分与理解。 2.进度条、对话框、自动填充面板的编辑操作。 1.jQuery UI小部件的基本概念与种类。 2.进度条、对话框、自动填充的插入方法。 3.进度条、对话框、自动填充的属性设置。 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 新课导入 在前一节课程中，我们一起学习了三个常用的jQuery UI小部件，分别是折叠面板、选项卡、日期选择器。本节课我们继续学习另外三个小部件 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 知识点复习 温故而知新，为师矣 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 折叠面板 折 叠(Accordion) 面板是一组面板，用来将内容存储到紧凑的空间中。单击面板上的标签来隐藏或显示存储在可折叠面板中的内容。 选项卡 选项卡 (Tabs) 是一组面板，用来将内容存储到紧凑的空间中。 日期选择器 在默认情况下，日期输入文本框获得页面焦点的时候，日期选 择器组件会在一个覆盖层中打开日历选择面板。 12.2.4 进度条 进度条(ProgressBar)控件通过从左到右用一些方块填充矩形来表示一个操作较长的进度。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在页面需要显示进度条的位置定位光标。 ② 选择“插入”|“jQuery UI”|“ProgressBar”选项。或在“插入”面板的“jQuery UI”类比中单击“ProgressBar”按钮。 ③ 在页面插入点处插入进度条。 12.2.4 进度条 1.插入进度条 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.4 进度条 在默认情况下，进度条一般是水平的，但是可以通过将fillDirection选项设置为向北或向南， 来将它设置为垂直的 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击进度条左上方的蓝色标签或在标签选择器上单击<input#Progressbar*>即可选中该部件。 ② 在其“属性”面板中，可以进行以下属性设置。 12.2.4 进度条 2.编辑进度条属性 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.4 进度条 2.编辑进度条属性 Value:用数字表示当前位置，默认为0。 Max:进度条最大值。 Disabled:禁用进度条。 Animated:使 用GIF 文件来显示进度。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.4 进度条 在HTML中，progress元素用于定义一个正在完成的进度条，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。 meter元素用于表示指定范围内的数值。 知识拓展 最低浏览器版本支持：IE 不支持、Chrome 8 控件内容：当浏览器不支持此控件时，将显示控件里的内容，支持此控件的浏览器不会展示控件的内容。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.5 对话框 在页面开发时，经常会需要在 Web 页面上弹出一些对话框 (Dialog),如询问用户或者让用户选择。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 在页面中定位光标。 ② 选择“插入” |“jQuery UI”|“Dialog”选项。或在“插入” 面板的“jQuery UI”类别中单击“Dialog” 按钮口 Dialoe ③ 在页面插入点位置插入Dialog对话框。 12.2.5 对话框 1. 插入对话框 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击对话框左上方的蓝色标签或在标签选择器上单击<input#Dialog*>即可选中该 部件。 ② 在其“属性”面板中，可以进行以下属性设置。 12.2.5 对话框 2. 编辑对话框属性 Title: 设置对话框的标题。 Position: 用来设置对话框的位置，一个字符串，允许的值为'center' 、'left' 、'right' 、'top' 、'bottom'。此属性的默认值即为'center',表示对话框居中。 Width/Height: 宽度，默认300;高度，默认为'auto'。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.5 对话框 2. 编辑对话框属性 Min Width/Min Height: 最小宽度，默认150/最小高度，默认150。 Max Width/Max Height: 最大宽度/最大高度。 Auto Open: 使用GIF 文件来显示进度。 Draggable: 可以使用标题栏拖动对话框。 Modal: 显示对话框时禁用页面上的其他元素。 Close On Escape: 用 Esc 键关闭对话框。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.5 对话框 2. 编辑对话框属性 Resizable: 用户可以调整对话框的大小。 Hide: 隐藏时的动画。 Show: 显示时的动画。 Trigger Button: 触发对话框显示的按钮。 Trigger Event: 触发对话框显示的事件。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.5 对话框 对话框可以设置标题和提示信息，也可在其中添加按钮以实现跳转和提交等功能。 3.编辑对话框内容 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ①在其“属性”面板的“Title” 文本框中设置对话框的标题。 ②将光标定位在对话框的内容区中，输入对话框提示文字。 ③如有需要可插入表格、图片、按钮。 12.2.5 对话框 3.编辑对话框内容 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 12.2.6 自动填充 自动填充(Autocomplete) 通常指浏览器等软件自动跟踪用户最近键入的信息，如 Web站点地址、表单中的信息以及搜索查询等。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ①在页面需要用户输入文本的位置定位光标。 ②选择“插入” |“jQuery UI”|“Autocomplete”选项。或在“插入”面板的“jQuery UI” 类别中单击“Autocomplete” 按钮。 ③在页面插入点处插入自动填充控件 12.2.6 自动填充 1. 插入自动填充 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 ① 单击Autocomplete左上方的蓝色标签或在标签选择器上单击<input#Autocomplete*>即 可选中该部件。 ② 在其“属性”面板中，可以进行以下属性设置。 12.2.6 自动填充 2.编辑 Autocomplete 属性 Source: 为指定智能提示下拉列表中的数据来源。 Min Length: 在显示自动完成建议之前要输入的最少字符数。 Delay: 在显示自动完成建议之前击键后延迟时间(以毫秒为单位)。 Append To: 指定菜单必须追加到的元素(选择器/标签名称)。 Auto Focus: 焦点自动设置为第一个项目。 Position: 指定对齐方式。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 辩一辩 jQuery UI小部件中进度条与对话框在提升用户体验方面的价值对比。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 考一考 1.jQuery UI进度条的主要功能是什么？ jQuery UI进度条的主要功能是通过从左到右用一些方块填充矩形来表示一个操作较长的进度。 2.在Dreamweaver中，如何插入并编辑一个jQuery UI对话框的标题和位置？ 在Dreamweaver中，可以通过选择“插入”|“jQuery UI”|“Dialog”选项或在“插入”面板的“jQuery UI”类别中单击“Dialog”按钮来插入一个对话框。然后，单击对话框左上方的蓝色标签或在标签选择器上单击<input#Dialog*>选中该部件，在其“属性”面板中的“Title”文本框中设置对话框的标题，使用“Position”属性来设置对话框的位置。 3.jQuery UI自动填充控件的“Source”属性有什么作用？ jQuery UI自动填充控件的“Source”属性用于指定智能提示下拉列表中的数据来源。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 jQuery UI小部件(中） 1) 进度条 2）对话框 3）自动填充 插入进度条 编辑进度条属性 插入对话框 编辑对话框属性 编辑对话框内容 插入自动填充 编辑Autocomplete 属性 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$