网页设计实例教程课件第10章JQuery基础知识.ppt

图10-2页面事件综合使用 【实例解说】 该实例中， 在$(document).ready()方法内，同时为三个事件绑定了方法： $(#txtEmail).blur()是当输入框txtEmail失去焦点时产生的事件，执行其中的方法，进行邮件格式的验证。在输入框中输入完成后，单击页面空白区域或“清空”按钮，都可以使得输入框产生blur事件。 $(#txtEmail).focus()是当输入框txtEmail获得焦点时产生的事件，绑定方法的作用是清空错误提示。输入框获得焦点可以是由于鼠标单击引起的，也可以是按Tab键或上下键使得输入焦点顺序切换引起的。 $(#clearBtn).click()是当单击“清空”按钮时产生的事件，绑定方法的作用是清空邮件输入框的内容。 10.4 JQuery应用实例 10.4.1 自动补全表单字段 10.4.2 创建可折叠菜单 10.4.3 创建更漂亮的对话框 10.4.4 实现条纹表格 10.4.1 自动补全表单字段 在图10-1设置的基础上，再做如下配置： （1）下载jquery-ui.js，存入scripts目录。 JQuery-UI官方网站：/，或使用以下网址下载： /ajax/libs/jqueryui/1/jquery-ui.js （2）新建css目录，下载jquery-ui.css，存放入css目录。到JQuery-UI的官方网站下载或使用以下网址下载： /ajax/libs/jqueryui/1/themes/base/jquery-ui.css （3）新建html文件，引入JQuery、jquery-ui.js、jquery-ui.css文件。 图10-3 自动完成字段环境设置 10.4.1 自动补全表单字段 link href=css/jquery-ui.css rel=Stylesheet / script src=scripts/jquery-1.7.2.js“ type=text/javascript/script script src=scripts/jquery-ui.js“ type=text/javascript/script script type=text/javascript$(function () {var provList = 河北省*山西省*辽宁省*吉林省*黑龙江省*江苏省*浙江省*安徽省*福建省*江西省*山东省*河南省*湖北省*湖南省*广东省*海南省*四川省*贵州省*云南省*陕西省*甘肃省*青海省*台湾省*内蒙古自治区*广西壮族自治区*宁夏回族自治区*新疆维吾尔自治区*西藏自治区*香港特别行政区*澳门特别行政区;$(#searchField).autocomplete({source: provList.split(*)});});/script div class=ui-widgetinput id=searchField / /div 图10-4 自动补全字段的实现 10.4.2 创建可折叠菜单 在这种菜单中，当打开一个部分时，其他部分会自动关闭。与选项卡界面相似，他也是一种常用的设计元素。 link href=css/jquery-ui.css rel=Stylesheet / script src=scripts/jquery-1.7.2.js type=text/javascript/script script src=scripts/jquery-ui.js type=text/javascript/script style type=text/css#theMenu { width: 400px; }ul li a.menuLink { display: block; padding-left: 30px; } /style script type=text/javascript$(document).ready(function () {$(#theMenu).accordion({animated: false,autoHeight: false,header: .menuLink});});/script 图10-5 可折叠菜单的实现 10.4.2 创建可折叠菜单 【实例解说】 accordion()方法需要设置几个选项即可。对其选项解释如下： animated：如果希望显示菜单项是具有动画效果，那么把这个选项设置为所需的效果名称（例如：”slide”或”easeslide”）。 autoHeight：迫使可折叠区域总是具有固定的高度（基于所需的最大区域）。 header：JQuery如何识别每个菜单组的标题？在这里所有菜单标题的样式都是”menuLink