jQuery UI、其他插件、封装自定义插件

jQueryUI

什么是:jQuery官方出的,基于jQuery实现的比jQuery更简化的UI组件和函数库。

何时:如果觉得jQuery依然不够简化时

UI: User Interface 用户界面,包括: 内容HTML, 样式CSS, 行为JS

UI库: 使用HTML/CSS/JS组成的实现一个专门功能的UI程序和效果的包,比如下拉菜单、弹出对话框、手风琴

jQueryUI是基于jQuery封装的,进一步简化的UI组件库

为什么: 避免重复开发,实现HTML,CSS,JS的代码重用

如何:

下载jQueryUI

在网页中先引入jQuery.js,再引入jQueryUI.js

三大部分

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

1. 为.add/remove/toggleClass添加动画(speed)

1
.add/remove/toggleClass("类名",speed)

2. 为.show/hide/toggle添加了更多的特效

1
.show/hide/toggle("特效名",speed)

3. 让animate支持颜色动画

我是图片
我是图片

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

侵入性: 组件根据自身的需要, 动态向原有元素上添加所需的class或自定义扩展属性。

问题: 如果发现侵入,但样式依然没变

解决:

1. 可能没有引入jqueryui的css

2.可能侵入的样式需要自行实现

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

1
2
3
HTML:div.box>hn.ui-dialog-titlebar+p
CSS: 不用
JS: $(".box").draggable();

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

1
2
3
HTML: ul>li*n
CSS: .ui-selected{...}定义选中的li样式
js: $("ul").selectable();

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

1
2
3
HTML:ul>li*n
CSS: 不需要
js: $("ul").sortable();

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

强调: 用部件,都要先引入jquery-ui.css

1、.accordion手风琴

1
2
3
html:父元素>(标题hn+内容div/p)*n
CSS: 不用
js: $("父元素").accordion();

2、 .autocomplete 自动完成

1
2
3
4
5
html: input文本框
css:不用
js: 1. 定义备选词数组
2. 对input文本框调用.autocomplete()
$(...).autocomplete({source: 数组})
1
2
var dishList=["鱼香肉丝","京酱肉丝","番茄炒鸡蛋","香椿鸡蛋","松鼠桂鱼"];
$("input").autocomplete({source:dishList});

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

1
2
html: a , input type="button" , button
js: $(...).button();

4. datepicker日历部件:

1
2
3
4
5
html: input文本框
css:
js: $(...).datepicker({
dateFormat:"yy年mm月dd日"
});

H5: 也有日期组件: input type=”date” 但是无法修改样式

5、dialog: 对话框:

1
2
3
html: 对话框容器[title=标题]>内容
其中title属性会自动成为对话框标题
js: $(...).dialog(); //让找到的元素变成对话框的样子

默认隐藏: $(…).dialog({autoOpen:false})

打开: $(…).dialog(“open”)

关闭s: $(…).dialog(“close”)

模态对话框: 一旦打开对话框,则禁止操作网页其他元素

$(…).dialog({autoOpen:false,modal: true })

我是图片

6、Menu菜单:

1
2
3
4
HTML: ul>li>ul>li....
CSS: .ui-menu{width: xxxpx}
js: $("ul").menu();
如果某个li不可用,就添加class="ui-state-disabled"

7、 进度条:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   html: <divid="my-pb"><div id="my-label"></div></div>
css: 为进度条div和标签div设置定位
js: 初始化进度条:
$progressbar.progressbar({
value:false, //进度值,也可以取0,
change:function(){//当进度条的value被改变时
$(this).progressbar("value")//获取当前进度值
//修改label的内容为进度条当前value
//获取当前进度条的value:
},
complete:function(){//当进度条进度为100%时
//改label
}
})
修改进度条进度:
$progressbar.progressbar("value",值)

8、sider

9、spinner递增递减

10、Tabs 标签页 boot中有

1
2
3
4
5
6
html:divid="my-tabs"
ul
li>a href="#divId"
divid="divId" 内容
CSS:不用
JS: $(“容器div”).tabs();

我是图片

11、tooltip工具提示: html中的title boot中有

1
2
3
HTML :为元素添加title属性<ANY title>
CSS:
JS: $(document).tooltip()

二、第三方插件

使用前也必须去官网下载,并用link和script将css和js文件加载到页面

1. 日历: laydate 不依赖于jQuery

1
2
3
 HTML: <inputid="#id"
CSS:
JS: laydate({elem:"#id", format:"YYYY年MM月DD日"})

2. 表单验证: jquery.validate 基于jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
HTML: 普通表单
CSS: 自定义验证未通过时的样式
input.error{ 定义出错的输入框的样式}
label.error{ 定义错误提示的label元素的样式}

JS:
$(...).validate({
rules:{//保存对每个输入框的验证规则
//如果一个输入框只有一个验证规则时
name1: "规则名",//必填
//如果一个输入框被多个规则约束
name2:{
"规则名":值,
... : ...,
}
},
messages:{//保存每个验证规则对象的错误提示
name1: "错误提示",
//如果一个输入框被多个规则约束
name2:{
"规则名":"错误提示",
... : ...,
}
}
})

规则: 看jquery.validate.js的326行

required: true 必填

min/maxlength:值 最小/最大长度

rangelength:[min,max], 长度的范围

min/max:值 最小/最大值

range: [min,max]取值的范围

格式验证: email, url, date

强调: 格式验证时,不加required,如果为空,则不验证

两元素内容相等:equalTo: “#id”

添加自定义验证规则:

1
2
3
4
5
6
7
8
9
10
jQuery.validator.addMethod(“规则名”,fn,”错误提示”)
jQuery.validator.addMethod(
"规则名",
function(val){//val会自动获得当前元素的内容
其中: fn的参数value可自动获得要验证的输入值
如果验证通过,返回true,否则返回false
returnval是否验证通过
},
"错误提示"
)

3. 瀑布流masonry彩砖墙

1
2
3
HTML: 容器div#container>div*n
CSS:
JS: $(...).masonry();

三、添加jQuery全局函数: 封装自定义插件

何时:只要发现网页中一个效果或功能需要在多个网站中重用时

如何:2种

1.添加jQuery全局函数

鄙视:
1
2
3
4
5
6
$.each(数组/集合,function(i){...})->函数名(“参数列表”)
直接定义在$构造函数对象上
对任意数组或类数组对象均可用
$(...).each(function(i){...})->变量.API();
仅定义在jQuery查询结果对象的原型对象中
只能被jQuery查询结果对象使用

我是图片

jQuery函数分两种:

1. jQuery全局函数: 直接定义在jQuery构造函数上的,所有对象都可使用的函数

2. jQuery实例函数: 定义在jQuery.fn原型对象上,只有jQuery的查询结果对象才能使用。

如果觉得jQuery函数不够用: 可扩展自定义函数

如果仅希望jQuery查询结果使用,就定义在jQuery.fn上

如果希望jQuery查询结果以及所有数组,类数组对象都能使用,就定义在jQuery构造函数上

2.封装jQuery部件 3步

1.定义css样式

2.位指定元素侵入class

3.为元素绑定事件

我是图片

文章作者: Coio
文章链接: http://yoursite.com/2018/07/04/jQuery UI、其他插件、封装自定义插件/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶