首页 > 代码库 > JQ 4
JQ 4
1. jQuery UI
2. 第三方插件: 日期，验证，照片墙
3. ***封装自定义插件
1. jQuery UI
autocomplete 自动完成:
为什么: 减少输入
如何: html : <input />
js: 2件事:
1. 数组: 保存所有备选词
2. $(...).autocomplete({source: 数组})
button 将a, input, button都转为统一的样式 -boot中也有
为什么: 统一样式
如何: $(...).button();
datapicker: 日期选择:
html: 普通的input文本框
js: $(...).datepicker()
dialog: 对话框 - boot中有
为什么: 普通的alert,confirm,prompt 样式不可修改,且兼容性问题
何时: 今后，在页面中只要弹窗就用dialog
如何: html: 容器元素包含提示内容
容器元素的title属性作为对话框的标题
js: $(容器元素).dialog(); //让元素变成对话框的样子
$(容器元素).dialog({autoOpen:false}); //默认隐藏
$(容器元素).dialog("open"); //弹出对话框
tabs: -boot中有
html : div
>ul>li>a href="http://www.mamicode.com/#div"
+div id="..." *n
js: $(父容器).tabs();
tooltip: 工具提示: ——boot中有
何时: 只要提示用户按钮或输入项的意义时
其实就是title属性
为什么: 不同浏览器的title显示样式不一样
如何: $(document).tooltip(); //对整个页面统一tooltip的样式
2. 第三方插件: 日期, 验证, 照片墙
日期: layDate 不依赖于jquery
引入css: "laydate/skins/default/laydate.css"
html: <input class="laydate-icon"/>
js:
跟换主题: laydate.skin("dahong或molv")
2种调用:
1. 在input的单击事件中调用: laydate();
2. 在页面加载后调用: laydate({elem: "#input的id"})
验证: jquery.validator
js: $(表单).validate({
rules:{
name1: "required", //name1的内容必填
name2: {
规则名:值,
规则名:值,
}
},
messages:{
name1: "name1验证失败",
name2:{
规则名:"name2的规则1验证失败",
规则名:"name2的规则1验证失败",
}
}
})
规则名: jquery.validate.js的327行
添加自定义验证规则: 其实就是为jquery.valicator添加一个验证函
数
jQuery.validator.addMethod(规则名,fn,msg)
fn:function(val){//自动获得要验证的元素内容
return 验证结果
}
自定义的规则，遇到空val，直接返回true，不做验证
1. 第三方插件: masonry
2. ***封装自定义插件
1. masonry: 彩砖墙
html: <div class="container">
<div class="block"> *n
js: $(".container").masonry();
2. ***封装自定义插件:
2种:
1. 扩展jQuery全局函数:
jQuery全局对象: window.jQuery 或 window.$
jQuery全局函数: 在jQuery对象内添加的函数
vs ES的全局函数: 在window下添加的函数
如何: jQuery.方法名=function(){...}
$.方法名(); 可以调用
$().方法名(); X
鄙视: $.each() vs $(...).each(function(){...})
$.each()是jQuery的全局函数,不需要任何查找结果就可直接调用
保存在: 直接保存在jQuery对象上
$(...).each()是jQuery的实例函数,必须要在查找结果上才能调用
保存在: jQuery查询结果集合的原型对象中
何时: 只要复用一个基于jQuery的函数时，就将函数添加到jQuery全局对象中。
2. 封装自定义部件:
1. myAccordion插件
在使用jQuery已经实现功能和样式的基础上:
//制作插件
1. 所需的所有样式，放入专门的css文件中
2. 所需的js，放入专门的js文件中:
1. 判断是否先引入jQuery
2. 为jQuery添加实例方法
为元素侵入class和行为
//制作完成
如何: 1. 引入自定义插件的css
2. 引入jQuery
3. 引入自定义插件的js
4. 按照插件要求，编写html内容
5. 在自定义脚本中直接找到父元素，调用插件函数
JQ 4