jQuery和Ajax实战教程（第2版）课件 第7章-jQuery插件

第7章jQuery插件扩展jQuery功能的利器插件开发交互增强效率提升jQuery插件生态系统插件下载地址/插件本质一个或多个JS文件使用方法①引入jQuery核心库②引入插件JS文件丰富的第三方插件生态jQueryUI-官方插件jQuery基金会维护的官方插件实现复杂的交互效果，只需1行代码draggable拖拽元素droppable拖放元素resizable缩放元素selectable框选元素sortable排序元素官方网站/下载即用支持选择性下载所需功能draggable拖拽功能核心功能基本语法$("#element").draggable();约束运动axis:"x"|"y"容器限制containment:".container"事件监听start拖拽开始drag拖拽中stop拖拽结束代码示例//简单拖拽$("#draggable").draggable();//限制垂直拖拽$("#draggable").draggable({axis:"y"});//限制水平拖拽$("#draggable2").draggable({axis:"x"});//容器限制$("p").draggable({containment:".stage"});//事件监听$("#draggable").draggable({start:function(){console.log("开始拖拽");},drag:function(){console.log("拖拽中...");},stop:function(){console.log("拖拽结束");}});resizable缩放功能核心功能基本语法$("#element").resizable();动画效果animate:true限制区域containment:"#container"尺寸限制maxHeight最大高度maxWidth最大宽度minHeight最小高度minWidth最小宽度代码示例//简单缩放$("#resizable").resizable();//动画效果$("#resizable").resizable({animate:true});//限制缩放区域$("#resizable").resizable({containment:"#container"});//尺寸限制$("#resizable").resizable({maxHeight:250,maxWidth:350,minHeight:150,minWidth:200});//宽度限制200~350//高度限制150~250sortable排序功能核心功能基本语法$("#element").sortable();连接列表connectWith:".className"网格显示CSS浮动布局+统一尺寸功能特点拖拽排序跨列表自动重排代码示例//简单排序$("#sortable").sortable();//连接列表$("#sortable1,#sortable2").sortable({connectWith:".xx"}).disableSelection();//网格布局CSS#sortableli{float:left;width:200px;height:200px;}//HTML结构<ulid="sortable"><li>序号1</li><li>序号2</li><li>序号3</li></ul>selectable选择功能核心功能基本语法$("#element").selectable();选择方式鼠标点击单选条目Ctrl+点击多选条目拖拽框选批量选择代码示例//基本选择功能$("#selectable").selectable();//HTML结构<ulid="selectable"><li>项目1</li><li>项目2</li><li>项目3</li><li>项目4</li><li>项目5</li><li>项目6</li><li>项目7</li></ul>实战案例：拖拽相册案例特点31张图片水平排列中间图片尺寸最大底部拖拽条切换图片大图始终居中显示核心技术点动态创建节点jQueryeach()拖拽事件draggabledrag动画效果animate()防止堆积stop(true,true)jQueryEasie-动画缓动核心功能调节动画节奏多种缓动效果渐慢至快/渐快至慢贝塞尔曲线控制可视化调整速度曲线常用参数easeInQuad渐快easeInQuart渐快加强easeInOutBack回弹贝塞尔曲线可视化工具http://jaukia.github.io/easie/拖动圆圈调整曲线形态，自动生成代码常用jQuery插件jQueryValidate强大的表单验证功能，支持自定义规则FancyBox灯箱效果插件，支持图片浏览和弹出框SlickSlider响应式轮播插件，多种滑动效果DataTables高级表格插件，支持分页搜索排序Masonry瀑布流布局库，优化空间利用Chosen下拉框增强，支持搜索和多选Moment.js日期时间处理库，丰富的API进行解析、验证和操作使用建议按需选择根据项目需求选择合适插件关注维护状态选择活跃维护的插件性能优化避免加载过多不必要的插件社区支持查看文档和社区活跃度快速开发利用插件提升开发效率插件生态展示jQuery的强大功能本章要点核心知识点jQuery插件扩展了jQuery功能第三方插件使jQuery更好用，提升开发效率jQueryUI提供丰富的交互功能draggable、resizable、sortable、selectable等核心方法jQueryEasie优化动画效果贝塞尔曲线控制动画节奏，提升用户体验