理论第十二章理论幻灯片.pptVIP

$(function(){ var setting={changeMonth:true, //显示选择月份的下拉列表 changeYear:true,//显示选择年份的下拉列表 showWeek:true,//显示日期对应的星期 showButtonPanel:true,//显示关闭按钮面板 closeText:关闭,//设置关闭按钮的文本 yearRange:2000:2014,//设置年份的范围 dateFormat:yy-mm-dd,//设置显示在文本框中的日期格式 showAnim:slideDown//设置显示或隐藏日期选择窗口的方式。可以设置的方式有：show、slideDown、fadeIn }; $( #datepicker ).datepicker(setting); //文本框和日历插件绑定 }); Date: input type=text id=datepicker 12.2 jQuery UI插件 总结 调用自动补全插件的autocomplete()方法，实现当在文本框中输入某个字符时，在该方法参数中指定的数据集合中，寻找匹配的数据，并将找到的数据自动显示在文本框下的功能。 jQzoom是图片放大插件，调用此插件中的jqzoom()方法，在小图片的右边将所选择的区域进行放大显示，从而实现逼真的放大效果。 Validate插件封装了常用的验证规则，通过此插件可以简化表单验证工作。如果内置验证规则不能满足要求，则可以利用addMethod()方法自定义验证规则。 draggable(拖拽)插件能拖动请求的对象，调用插件的draggable()方法，可以使DOM元素跟随鼠标进行移动。 调用折叠面板插件的accordion()方法，可以实现页面中指定区域的折叠效果。 调用datepicker(日历)插件的datepicker()方法，可以将文本框绑定日历面板，供用户选择日期。 Title Here Data 1 Bla bla bla bla bla bla bla bla bla Bla bla bla Data 2 Bla bla bla bla bla bla bla bla bla Bla bla bla Bla bla bla bla bla bla bla bla bla Bla bla bla Data 4 Bla bla bla bla bla bla bla bla Bla bla bla Data 3 Conclusion .. Bla bla bla bla bla bla bla bla bla Bla bla bla Bla bla bla bla bla bla bla bla bla Bla bla bla Bla bla bla bla bla bla bla bla bla Bla bla bla 谢谢观看 End * 第十二章 jQuery 插件 回顾 制作普通下拉菜单和下拉级联菜单要使用到jQuery的滑入滑出方法，即slideDown()和slideUp()，以此实现下级菜单的显示和隐藏。 横向伸缩菜单的原理：设定每个菜单项的鼠标悬停和离开事件，在鼠标悬停事件中向左边加宽这一菜单的宽度，将无法看到的菜单内容显示出来，当鼠标离开时重新将菜单的宽度设置为初始值，给用户一种菜单收缩的感觉。 TreeView和菜单导航一样，主要需要将html中的div标签和ulli标签配合使用，再利用jQuery实现动态效果。在制作TreeView视图时，主要涉及到的jQuery方法有find()、prependTo()、addClass()、removeClass()、slideDown()和slideUp()等。 理论内容 jQuery插件概述 自动补全插件AutoComplete 图片放大镜插件 jQzoom 图片灯箱插件NotesForLightBox 验证插件Validate jQuery UI插件 插件（plugin）即扩展（extension），是一种遵循一定规范的应用程序接口编写的可重用的程序。jQuery的易扩展性吸引了全球众多的开发者共同编写jQuery插件。jQuery插件是以jQuery的核心代码为基础，编写出符合一定规范的应用程序，并将程序进行打包，调用时，仅需要包含该打包后的js文件即可。jQuery插件的官方网址是，在该网站可以按分类下载需要的插件及文档。 12.1 jQuery插件概述 自动补全插件AutoComplete 项目中有时会使用到自动补全查询，类似于baidu搜索框、淘宝商品搜索功能，输入汉字或字母，则以该汉字或字母开头的相关条目会显示出来供用户选择，