《Dreamweaver CC网页设计与制作教程》课件——第10章 jQuery UI和表单.pptVIP

第10章

jQueryUI和表单

10.1案例1：在网页中使用jQueryUI小部件★【案例目的】在网页中使用jQueryUI小部件。★【核心知识】jQueryUI小部件的插入和编辑。10.1.1小部件（Widgets）★小部件（Widgets）有功能齐全的UI控件，使桌面应用程序也具备Web应用程序一样丰富的功能。所有的小部件（Widgets）提供了一个核心，带有定制行为的大量扩展以及完整的主题支持。在DreamweaverCC中jQueryUI提供的小部件★折叠面板（Accordion）、面板（Tabs）、日期选择器（Datepicker）、进度条（Progressbar）、对话框（Dialog）、自动完成（Autocomplete）、滑块（Slider）、按钮（Button）、按钮组（Buttonset）、复选框（CheckboxButtons）和单选按钮（RadioButtons）。两种插入jQueryWidget方法

★将光标置于页面中要插入Widget的位置，选择“插入”→“jQueryUI”，然后选择要插入的Widget。★使用“窗口”菜单的“插入”面板，Widget存在于“插入”面板的“jQueryUI”部分中。10.1.2插入面板Tabs★面板Tabs是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点，即可了解站点上提供的内容。★新建一个网页文档，将其保存为Contact.html。插入jQueryUI的Tabs，如图10-4所示。10.1.3插入折叠面板（Accordion）★插入jQueryUI的Accordion，在属性面板中设置其选项名称及其属性10.1.4插入日期选择器（Datepicker）★插入日期选择器（Datepicker），如下图所示。在属性面板中可以设置显示日期的格式，用于显示日期的语言等内容。10.1.5插入对话框（Dialog）★在【设计】视图，插入jQueryUI的对话框（Dialog），如图10-9所示。在Dialog中可以设置其属性。□AutoOpen：初始化之后，是否立即显示对话框，默认为true。□Modal：是否模式对话框，默认为false。10.2案例2：制作报名表★【案例目的】插入各种表单对象制作表单。★【核心知识】掌握各种表单对象的使用方法。10.2.1创建表单两种创建表单方法：★在文档中将光标置于插入点，执行“插入”→“表单”→“表单”命令。★在“插入”面板的“表单”类别中，选择。10.2.2向表单中插入对象★DWCC表单包含文本、按钮、电邮、密码、电话、日期、时间等各种标准对象。插入表单的三种方法★将光标置于表单内，选择“插入”→“表单”→表单对象；★单击“插入”面板中的“表单”选项中表单对象按钮；★按住表单对象按钮拖入插入点，释放按钮。10.3表单验证

★填写HTML表单(Form)并将数据提交到服务器之前，一般情况下要在客户端浏览器中验证表单中填写的数据是否符合规范，然后再提交给服务器端脚本，这样做可以减少服务器端脚本执行的时间开销，提高服务器和网络性能。10.3.1通过修改属性验证表单★如果是必填字段，可以修改表单元素的属性Required以验证表单，在属性面板上勾选Required即可。★如果是固定格式内容，可以在Titel中输入需要显示的相关提示信息，在文本框“Pattern”内输入对照表单检查的元素值的正则表达式。10.3.2通过行为验证表单★在DreamweaverCC中，使用“检查表单”行为可以为表单中各元素设置有效性规则。因为“检查表单”行为是用Javascript客户端小程序进行验证的，几乎所有的浏览器都支持，用这种方法验证表单具有一定的普遍性。10.4上机实训★项目：制作心理测试表单□内容要求：制作一个心理测试表单。□技术要求：（1）插入表单，插入内容及表单选项，如图10-22所示。（2）设置表单选项的属性，并保存文件。图10-1使用jQueryUI制作的网页图10-10制作注册表单