blz-model
blz-model
jQuery 插件
blz
blz组件主要为一些共用方法,封装于jQuery上，接口如下
- $.blz.emptyFn // 空函数，目前主要用于传参上的赋值。
- $.blz.isAndroid // 判断当前移动设备是否为安卓，返回值为布尔值。
- $.blz.checkTransition // 检测支持当前设备对transition属性的支持情况，并返回一个支持的前缀（如-webkit-,-moz-,-o-）,以减少代码的书写量。
- $.blz.requestAnimationFrame // 对原生requestAnimationFrame方法的向后兼容处理，感觉移动端并无多大用处，如果必须考虑低版本系统的兼容，可考虑！
- $.blz.initWebGl // 为获取3d绘图环境canvas.getContext('webgl')的兼容性写法。
blz-lazy-load
图片懒加载，主要目的在于减少服务器压力，减少页面加载时间，方法封装于jQuery上
开启懒加载
$(selector).blzLazyLoad(elems,scale,fn)- elems // 参数为selector滚动时要监测的是否出现在视口（目前视口只针对screen而言）的元素集合，如document.images,$(selector2)一些类数组的元素集合
- scale // 一个比例参数，取值为整数，默认为1，例如scale=2;则在判断elems元素中某一元素进入视野时会将屏幕的高度放大两倍进行判断（进入视口的判断只支持纵向不支持横向）
- fn // 代表一个函数参数，在不传入fn的情况下，会默认为传入的elems参数为一个img元素集合，并默认为都含有data-src属性，当元素进入视口时会把data-src值赋予该图片的src值，并当所有元素都赋值完毕时，则关闭懒加载；当fn被传参时，会取代当元素进入视野时的默认做法，该函数会被传入一个参数elem,即此时elems参数中进入视口的元素；
关闭懒加载
$(selector).blzOffLazyLoad();demo
https://chanelnumberfive.github.io/blz-model/model/lazy-load/demo.html
blz-move
基于视口的平移，移动区域默认为视口，不支持自定义滑块移动区域，
移动
$(selector).blzMove(option)
option={
translateX:0,
translateY:0
}
- translateX,translateY分别为元素对应的css值不支持百分比；由于getBoundingClientRect()在低版本ios上（ios 7 8）不会考虑translate值带来的影响，因此不建议初始化样式时对要平移元素应用translate属性
关闭移动
$(selector).blzOffMove()demo
https://chanelnumberfive.github.io/blz-model/model/move/demo.html
blz-cartoon
css3动画的开关，并没有实现动画，动画还得用css3去实现！
开启开关
$(selectArea).blzCartoon(option);
option={
cartoonClass:'animation'
}
- selectArea为激活的开关区域，比如输入document,那么位于document元素下的所有带有data-xxxx(xxx为对应的API名称，详情见下文)的元素具有开关动画的功能
- cartoonClass为激活目标动画时要添加的类名，默认值为animation
html代码结构
<button type="button" data-blz-cartoon="#cartoon-1 on">动画1</button> <button type="button" data-blz-cartoon="#cartoon-2 off">动画2</button> <button type="button" data-blz-cartoon="#cartoon-1">移除动画1</button> <button type="button" data-blz-cartoon="#cartoon-2">移除动画2</button><div id="cartoon-1"> <div class="slide-up"></div> </div> <div id="cartoon-2"> <div class="slide-down"></div> </div>
- 带有data-blz-cartoon="#cartoon-1 on"属性的button按钮,被点击时，就会给#cartoon-1元素，添加animation类名（或者你自定义的类名）；此时位于其下的带有相应动画类名的元素就会执行对应的动画(这些css3动画，必须事先写好，blz-cartoon.js只是实现了一个开关，即为目标元素添加animation类名或移除animation类名);被添加animation类名的元素会发布animation事件，支持冒泡！
- 同理带有data-blz-cartoon="#cartoon-1 off"属性的按钮，被点击时，就会移除#cartoon-1元素的animation类名，一些由添加animation类名产生的动画也会随之消失；此时#cartoon-1元素会发布offAimation事件，支持冒泡！
- 带有data-blz-cartoon="#cartoon-1"的元素被点击时，则会开启动画时则关闭动画，关闭动画时则开启动画
- 点击任何带有data-blz-cartoon区域以外的元素都会关闭已开启的动画，开启另一个动画，也会关闭另外一个已开启的动画
- 对于开关动画时发布的自定义事件，也可采用css3动画自带的标准事件animationstart,animationend详细地址
关闭开关
$(selectArea).blzOffCartoon();
demo
https://chanelnumberfive.github.io/blz-model/model/cartoon/demo.html
blz-agreement
工作中老是遇到一行蓝色的文字协议条款，点击时要求弹出浮层让用户关闭浮层时还停留在原页面，为了复用便把此功能封装成了jQuery插件
开启协议（有点别扭。。。）
<div data-blz-agreement="url-1 url-2 url-3">恋爱保险协议大学名录</div>
$(selectorArea).blzGetAgreement();
- slelectArea 表示一个选择区域，开启协议后，点击位于selectorArea区域下的元素时，如果被点击的元素带有data-blz-agreement属性，则会向body元素append一个弹层，并读取data-blz-agreement中的url数据依次赋予javascript对象Image的实例，这些实例全部加载完毕后最终会添加到一个事先准备好的#blz-agreement-wrapper盒中
关闭协议
$(selectorArea).blzOffGetAgreement();demo
https://chanelnumberfive.github.io/blz-model/model/agreement/demo.html
blz-dialog
对话框,前期使用weui的样式库，看见其有一套不错的对话框样式，但就是死活没找到与之配套的js文件，.........自己写！
开启弹窗
$.weui.alert({
title:'你好',
article:'我是对话框alert',
sureCallback:function(){
// 点击确定按钮时的回调
}
});
$.weui.confirm({
title:'你好',
article:'我是对话框confirm',
cancelText:'取消',
sureText:'确定',
sureHref:'javascript:void(0);',
cancelHref:'javascript:void(0);',
cancelCallback:function(){
// 点击取消按钮时的回调
},
sureCallback:function(){
// 点击确定按钮时的回调
}
});
$.weui.warn({
title:'你好',
article:'我是对话框warn'
});
$.weui.tip('你好我是对话框tip');
$.weui.loading('你好，我是loading');
$.weui.loading(selector,'你好，我是partLoading');
demo
https://chanelnumberfive.github.io/blz-model/model/dialog/demo.html
blz-scrollto
在做项目时遇到一个滚动至顶部的按钮，直接调用document.body.scrollTop=0,这画面太美，有点不敢看！然后结合requestAniamtionFrame写出一个滚动较为缓慢的动画
开启滚动
$(scrollElem).blzScrollto({
displacement:0,
time:300,
scrollMethod:'scrollTop',
callback:function(){}
});
- displacement // 参数代表scrollElem要滚动的位移，既然是位移，那就是相对运动，你不能输入个0，指望着浏览器回滚到顶部，得输入要滚动的距离
- time // 参数time代表scrollElem滚动持续的时间，单位ms默认为300ms
- scrollMethod // 参数表示滚动对象是垂直滚动还是水平滚动（scrollLeft）
- callback // 参数callback代表滚动结束时执行的回调函数
demo
https://chanelnumberfive.github.io/blz-model/model/scrollto/demo.html
blz-validate
写了老长时间的javascript头一次写表单插件，正则真头疼，火星语吗？
开启保单验证
$(document.forms[0]).blzValidate({
agreementSelector:'.mf-agreement',
verificationCodeSelector:'.mf-send',
checkElemSelector:'.mf-input:not([disabled])',
warnClass:'warn',
parentSelector:'.mf-item',
scrollSelector:document.body,
autoValidate:true,
getVerificationCode:$.blz.emptyFn,
canSubmit:$.blz.emptyFn,
onError:onError,
onRight:onRight,
validateRule:validateRule,
count:60,
submitSelector:'[type="submit"]',
getVerificationCodeTip:$.blz.emptyFn,
onNoAgreement:function(){
$.weui.tip('亲不同意协议
将无法提交表单哦！');
},
scrollCallback:$.blz.emptyFn,
onSubmitError:onSubmitError
});
- agreementSelector //这个参数表示对应的一些协议的选择器（诸如：我同意此条款，我已阅读同意此条款）
- verificationCodeSelector // 获取验证码对应的按钮的选择器
- checkElemSelector // 要进行验证的元素的选择器
- warnClass // 代表验证非法时，对目标元素的父元素（含有parentSelector中存储的选择器）添加这个类名，当然这只是默认做法，可以自定义onError,onRight函数去处理验证非法时和和合法时，如何跟用户友好交互
- parentSelector // 验证不合法时，目标元素的父元素含有的选择器
- scrollSelector // 当不合法元素不在视野内时，调用该表单所在的父元素滚动至视野的选择器
- autoValidate // 当验证非法时，是否开启自动验证去验证用户的行为
- getVerificationCode // 点击获取验证码按钮时执行的事件处理程序
- canSubmit // 额外的验证条件，决定表单提交时是否可以提交表单
- onError,onRight // 验证合法和非法时执行的事件处理程序
-
validateRule // 验证规则其结构如下
var validateRule={ any:[[1,100]], name:[[2,15],'[\u4e00-\u9fa5]{1,}(·?)[\u4e00-\u9fa5]{1,}$'], id:[[15,18],false,function(val){ var Validator = new IDValidator(); return Validator.isValid(val)&&getAge({ year:val.slice(6,10), month:val.slice(10,12), date:val.slice(12,14) })>0; }] };- id 表示其验证类型为id(即为身份证验证),其值为一个数组，第一个参数表示其length应大于15小于18，第二个参数为一个正则表达式验证其值是否符合此正则，第三个参数为一个自定义函数，返回值为一个布尔值，真则表示合法
- count // 表示验证码发送后，应该等待多久才能再次点击获取验证码
- submitSelector // 提交表单提交按钮的选择器
- getVerificationCodeTip // 表示点击获取验证码按钮时，而此时手机号填写非法时执行的事件处理程序
- onNoAgreement // 表示用户不同意条款时执行的事件处理程序
- scrollCallback // 对应于scrollSelector滚动结束后执行的回调
- onSubmitError // 代表用户提交表单时，检测到非法输入执行的事件处理程序
可以通过jQuery访问form（假如你用form元素开启了验证）元素上的data-blz-validate获取所有配置，以对配置进行更改
关闭blz-validate
$(selector).blzValidateOver()demo
https://chanelnumberfive.github.io/blz-model/model/validate/demo.html