前端学习笔记之 第三方插件
主要内容：jQuery UI, 其他插件，***封装自定义插件
学任何行东西步骤：
1.上官网/百度知道：查是是什么
2.上官网看DEMO
3.上官网看手册：
1.jQuery UI:
什么是：jQuery官方出的，基于jQuery实现的，比jQuery跟简化的UI组件和函数库
UI:用户界面
UI组件:由HTML,CSS,组成的实现一个专门功能的UI程序和效果的包。比如：下拉菜单，弹出对话框手风琴...
为什么：避免重复开发，实现HTML,CSS和JS的代码重用
何时：如果觉得jQuery依然不够简化
如何:
1.先引入jquery.js
2.下载/CDN：jquery-UI.js
三大部分：
第一部分 效果：对jQuery中原有的动画API进行增强
1.为.add/remove/toggleClass添加动画(speed)
.add/remove.toggleClass("类名",speed)
2.为show/hide.toggle添加了更好的特效
.show/hide/toggle("特效名",speed)
3.让animate支持颜色动画
第二部分：交互组件：为页面现有的元素添加特殊交互行为
侵入性：组件根据自身的需要，动态向原有元素上添加所需的class或自定义扩展属性。
问题：如果发现入侵，但样式依然没变
解决：1.可能没有引入jquery UI的css
2.可能侵入的样式需要自行实现
1.draggable() 让一个元素可拖拽
HTML:div.box>hn.ui-dialog-titlebar+p
CSS:不用
JS: $(".box").draggable();
2. .selectable() 让一个列表中的li可选择
HTML:.ui>li*n
CSS:.ui-selected{...}定义选中的li样式
js:$("ui").selected();
3. .sortable() 让一个列表中的li可重新排列位置
HTML: ui>li*n
CSS:不需要
js:$("ui").sortable();
第三部分：部件：拥有完成样式和行为的一个独立功能
强调：用部件，都要先引入jquery-ui.css
关于色调和主题：官网->Themes->Gallery->选择颜色主题->dowload
1.Accordion:手风琴：
如何：HTML：父元素>(标题hn+内容 div/p)*n
CSS:不用
js:$("父元素").accordion();
boot中有
2. autocomplete 自动完成
html:input文本框
css:
js:2步：1.定义备选词数组
2.对input文本框调用.autocomplete()
$(...)autocomplete({source：数组})
3.button 让各种按钮变成统一的按钮样式
html:a inout type="butoon", button
js:$(...).button();
boot中有
4.datepicker 日历部件：
html:input 文本框
css：
js:$(...).datepicker({
dateFormat:"yyyy年mm月dd日"
});
H5:也有日期组件 ：input type = "date"
5.dialog:对话框：
html:对话框容器[titile=标题]>内容
其中title属性会自动变成为对话框标题
js:$(...).dialog({autoOpen:false})
打开：$(...).dialog("open")
关闭：$(...).dialog("close")
模态对话框：一旦打开对话框，则禁止操作网页其他元素
$(...).dialog({autoOpen:false,modal:true})
boot中有
6.Menu菜单:
HTML:ui>li>ul>li...
CSS:.ui-menu{width:xxxpx}
js:$("ui").menu();
如果某个li不可用，就添加class="ui-state-disabled"
boot中有
7.进度条
html:进度条div>标签 div
css:为进度条div和标签div设置定位
js：初始化进度条：
$progressbar.progressbar({
value:false|0,
change:function(){//当进度条的value被改变时
//修改label的内容为进度条当前的value
//获取当前进度条的value:
},
complete:function(){//当进度条进度100%
//改 label
}
})
修改进度条进度：
$progressbar.progressbar("value",值)
boot中有
8.slider
9.spinner
10.tabs:标签页
HTML:
容器 div
ul>li>a href="#id"
内容页：div#d*n
CSS:
js:$("容器div").tabs();
boot中有
2.其他插件：
使用前也必须去官网下载，并用link和script将css和js文件加载到页面
1.日期插件：layDate 不依赖于jQuery
HTML:
<input 文本框 id="#id" class="laydate-icon">
CSS：
js:laydate({
elem:"#id",
format:"YYYY年MM月DD日"
})
2.表单验证：jquery.validator 依赖于jquery
HTML：普通表单
CSS:自定义验证为通过的样式
定义输入框出错时的样式：input.error{...}
定义错误提示标签的样式：label.error{...}
js:$("form").validate({
rules:{//保存对每个输入框的验证规则
//如果一个输入框只有一个验证规则时：
name1:"required",//必填
//如果一个输入框被多个规则约束
name2:{
规则1：值，
规则2：值，
}
message:{//保存每个验证规则对象的错误提示
name1:"错误提示"，
//如果一个输入框被多个规则约束
name2:{
规则1："错误提示"，
规则2："错误提示"，
}
}
}，
})
强调：格式验证，通常不验证空值
如果必填，必须加required
添加自定义规则：
jQuery.validator.addMethod("规则名"，fn,msg)
其中：fn的参数value可自动获得要验证的输入值
如果验证通过，返回true，否则返回false
3.瀑布流：masonry
html:容器 div>大小不同的div
js:$("容器div").masonry();
瀑布流的实现思路：
1.计算页面的宽度，然后计算出页面的宽度可放数据块的列数。
2.将各个数据块的高度尺寸计入数组中。
3.用绝对定位先将页面的第一行填满，因为第一行的top位置都一样的，然后用数组记录每一行的总高度)。
4.继续用绝对定位将其他数据块定位在最短的一列之后然后更新该列的高度。
5.当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）
6.滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。
1 <!doctype html> 2 <html> 3 <head> 4 <title> </title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <div id="container"> 9 //设置多个高度不相同，宽度相同的块元素 10 </div> 11 <script src ="引入jquery代码"></script> 12 <script> 13 $("elem").css("background",function(){//随机生成颜色 14 var r = Math.floor(Math.random()*256); 15 var g = Math.floor(Math.random()*256); 16 var b = Math.floor(Math.random()*256); 17 return "rgb("+r+","+g+","+b+")"; 18 }) 19 $("#container").masonry(); 20 </script> 21 </body> 22 </html>
3.***封装自定义插件：
何时：只要发现网页中一个效果或功能需要在多个网站中重用时
如何：2种
1.添加jQury全局函数：
$(...).each vs $.each
1.存储：$(...).each 保存在jQury.fn原型对象中
$each 直接保存在构造函数上
2.调用：
$(...).each只能被jQuery查询结果对象调用
$.each 可被任意类型(jQuery对象及其他类数组或数组对象)调用
2.封装jQuery部件：
3步：
1.定义css样式:
2.为指定的元素侵入class
3.为元素绑定事件
1 //通过jqurey封装自己的插件 2 3 if(!window.jQuery) //判断用户是否引入jQuery库文件 4 throw new Error("自定义部件依赖于jQuery库") 5 //为jQuery.fn原型对象天机实例方法 6 jQuery.fn.myAccordion=function(){//this->$(容器) 7 //侵入 8 //为容器侵入class accordion 9 this.assClass("accordion"); 10 //为偶数位置的子元素侵入class content fade 11 .next().addClass("content fade"); 12 //为第一个title侵入class in 13 this.children(".content:first").addClass("in"); 14 //事件绑定 15 this.children(".title").click(function(){ 16 //this->title 17 $(this).next().toggleClass("in") 18 .siblings(".content").removeClass("in"); 19 }) 20 21 }
