前端学习笔记之第三方插件

时间 2019-12-14

标签前端学习笔记第三方插件繁體版

原文原文链接

主要内容：jQuery UI, 其余插件，***封装自定义插件

学任何行东西步骤：css

　　1.上官网/百度知道：查是是什么html

　　2.上官网看DEMOjquery

　　3.上官网看手册：数组

1.jQuery UI:

什么是：jQuery官方出的，基于jQuery实现的，比jQuery跟简化的UI组件和函数库浏览器

UI:用户界面dom

UI组件:由HTML,CSS,组成的实现一个专门功能的UI程序和效果的包。好比：下拉菜单，弹出对话框手风琴...ide

　　为何：避免重复开发，实现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:

　　　　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 }

前端学习笔记之 第三方插件

主要内容：jQuery UI, 其余插件，***封装自定义插件

1.jQuery UI:

第一部分 效果：对jQuery中原有的动画API进行加强

第二部分：交互组件：为页面现有的元素添加特殊交互行为

1.draggable() 让一个元素可拖拽

2. .selectable() 让一个列表中的li可选择

3. .sortable() 让一个列表中的li可从新排列位置

第三部分：部件：拥有完成样式和行为的一个独立功能

1.Accordion:手风琴：

2. autocomplete 自动完成

3.button 让各类按钮变成统一的按钮样式

4.datepicker 日历部件：

5.dialog:对话框：

6.Menu菜单:

7.进度条

8.slider

9.spinner

10.tabs:标签页

2.其余插件：

1.日期插件：layDate 不依赖于jQuery

2.表单验证：jquery.validator 依赖于jquery

3.瀑布流：masonry

3.***封装自定义插件：

前端学习笔记之第三方插件

第一部分效果：对jQuery中原有的动画API进行加强

　1.Accordion:手风琴：

　2. autocomplete 自动完成

　3.button 让各类按钮变成统一的按钮样式

　4.datepicker 日历部件：

　5.dialog:对话框：

　6.Menu菜单:

　7.进度条

　8.slider

　9.spinner

　10.tabs:标签页

　　1.日期插件：layDate 不依赖于jQuery

　　2.表单验证：jquery.validator 依赖于jquery

　　3.瀑布流：masonry