Fork me on GitHub 盒子
盒子
文章目录
  1. 介绍(已停止维护,不建议使用,仅供参考)
  2. CORE&API
    1. jmui
    2. jmuiForZepto
  3. 部分组件文档
    1. addrPicker
    2. countDown
    3. dropElement
    4. iscroll
    5. md5
    6. preLoad
    7. qrcode

jmui

介绍(已停止维护,不建议使用,仅供参考)

一款目标为代码简单、易用、齐全,处理部分移动端bug,涵盖机型广,大大减少开发交互型组件的工作量的移动端框架。

CORE&API

jmui

js模块,jmui基础工具函数集合

语法:jmui.方法名

参数名称 参数类型 参数说明
vision String 版本号
timestamp Long 时间戳
方法名 使用说明
lazyLoad 图片懒加载,返回Booleantrue表示全部加载完成,false表示没有全部加载完成
Demo实例:请狠狠戳我
requestAnimationFrame 对于现代浏览器使用requestAnimationFrame代替setTimeOut
Demo实例:请狠狠戳我
tween 将缓动曲线集合添加至Math.Tween
Demo实例:请狠狠戳我
pageLock 锁定页面
pageUnlock 解锁页面
getUrlString 获取Url参数值
语法:jmui.getUrlString(name)
参数类型:{String}
setCookie 将值存入cookie
语法:jmui.setCookie(c_name,value,expiredays)
参数说明:名称,键值,存在周期(可选)
参数类型:{String}
getCookie 从cookie中取值
语法:jmui.getCookie(c_name)
参数类型:{String}
getBrowserInfo 获取浏览器UA 判断环境,返回object,{object}.in环境={boolean}
参数:inIos、inWx、inApp、inJdApp、inJrApp、inWyApp
addJrBanner 添加金融Banner,可进行金融APP下载
语法:jmui.addJrBanner(imgSrc,id,saveDays)
参数说明:bannerUrl,下载id(默认70),存在周期(默认1天)
参数类型:{String}、{Int}、{Int}
formatTime 时间格式化
语法:jmui.formatTime(time,'yyyy-MM-dd HH:mm:ss')
参数说明:时间戳,输入格式
参数类型:{Long}、{String}
注:yyyy表示年,MM表示月,dd表示日,HH表示小时,mm表示分,ss表示秒(参数名不允许更改,格式可自定义)
createDiv 创建DIV,返回Object
语法:jmui.createDiv(className,innerHTML)
参数说明:标签class名,html内容
参数类型:{String}
fixTips 固定提示,返回Object
语法:jmui.fixTips({text:"固定提示框",pos:"top",autoClose:false})
参数说明:html内容,位置,自动隐藏
参数类型:{String}、{top/mid}、{Boolean}
validate 验证器集合,返回Boolean
语法:jmui.validate.方法名(值)
方法:
checkTel(value) 验证手机号
checkEmail(value) 验证邮箱地址
checkPicture(value) 验证图片格式
checkRar(value) 验证压缩格式
checkIDCard(value) 验证身份证
checkQQ(value) 验证QQ号
checkPassWord(value) 验证密码 字母开头,长度在6~20之间,只能包含字母、数字和下划线
checkCreditCard(value) 验证信用卡
checkBankCard(value) 验证银联卡
checkVisaCard(value) 验证Visa卡
checkMasterCard(value) 验证万事达卡
checkLoginName(value) 验证登录名
checkTrueName(value) 验证真实姓名 考虑到外国人名 xx·XXX
checkChinese(value) 验证中文

jmuiForZepto

语法:$("选择器").方法名

方法名 使用说明
createAppDownload 将一个标签按钮转化为可检测安装与否的下载链接
语法:$("选择器").addJrBanner(id,appSrc)
参数说明:下载id(默认70),app链接(默认'jdmobild://')
参数类型:{Int}、{String}
createBackTop 将元素变为回到顶部按钮
语法:$("选择器").createBackTop(type)
参数说明:scroll平滑滚动、static瞬间制定
参数类型:{String}
useNineKeyboard input调用九宫键盘 兼容Android IOS
语法:$("选择器").useNineKeyboard()
setOnlyRead input设置为已读
语法:$("选择器").setOnlyRead()

部分组件文档

完整组件列表戳这里:http://mcchen.club/project/jmui/demo/index.html

addrPicker

js模块,地址选择器

语法:new AddrPicker({config});

参数名称 参数类型 参数说明
selecteBtn Object 必选,触发选择按钮
addrPickerBox Object 必选,地址选择的容器
moveBox Object 必选,可滑动区域容器
moveObj Object 必选,可滑动的对象
addrInput Object 必选,输入内容区域
lineHeight Int 必选,每个滚动项高度
btnSure Object 必选,确定按钮
btnCancel Object 必选,取消按钮
sureFn Function 可选,确定回调函数
cancelFn Function 可选,取消回调函数
ajaxUrl String 可选,数据Url
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new addrPicker({
selecteBtn: $("#btnChooseAddr"),
addrPickerBox: $("#addrPicker"),
moveBox: $(".picker-item"),
moveObj: $(".picker-ul"),
btnSure: $("#pickerSure"),
btnCancel: $("#pickerCancel"),
addrInput: $("#addrInput"),
lineHeight: 40,
ajaxUrl: {"province": "../data/provinces.json", "city": "../data/citys.json", "area": "../data/areas.json"},
sureFn: function(id,text) {
$("#addrProvince").val(id[0] + "," + text[0])
$("#addrCity").val(id[1] + "," + text[1])
$("#addrArea").val(id[2] + "," + text[2])
}
});

Demo实例:请狠狠戳我

countDown

js模块,倒计时插件

语法:new CountDown({config});

参数名称 参数类型 参数说明
$day Object 必选,显示天的对象
$hour Object 必选,显示小时的对象
$min Object 必选,显示分的对象
$second Object 可选,显示秒的对象
totalSecond Int 必选,倒计时总时间
timeCent Int 可选,倒计时单位
endFn Function 可选,结束回调函数
1
2
3
4
5
6
7
8
9
10
new CountDown({
$day: $(".day"),
$hour: $(".hour"),
$min: $(".min"),
$second: $(".second"),
totalSecond: 10,
endFn: function () {
alert("终于等到你,还好我没放弃---------然并卵");
}
});

Demo实例:请狠狠戳我

dropElement

js模块,元素飘落插件

语法:new DropElement({config});

参数名称 参数类型 参数说明
sizeArr Array 必选,掉落元素的尺寸数组(二维)
count Int 可选,同时出现的最大数量
during Int 可选,完成一次掉落的周期
splitTime Int 可选,每个元素出现的时间间隔
width Int 可选,可掉落的区域宽度
loop Boolean 可选,是否循环掉落
1
2
3
4
5
6
7
new DropElement({
sizeArr: [[10, 24], [13, 15], [16, 19], [12, 14], [10, 15]],
count: 15,
during: 3000,
splitTime: 300,
loop: true
});

Demo实例:请狠狠戳我

iscroll

js模块,web最流畅的滚动插件

语法:new IScroll("#wrapper", {config});

参数请点这里:https://github.com/cubiq/iscroll/

1
new IScroll("#wrapper", {mouseWheel: true, probeType: 3});

Demo实例:请狠狠戳我

md5

js模块,MD5转换插件

语法:new MD5({config});

参数名称 参数类型 参数说明
$btn Object 必选,转换触发按钮
str String 必选,需要转换的字符串
endFn Function 可选,转换完成回调函数
1
2
3
4
5
6
7
new MD5({
$btn:$(".jmui-md5-btnTransform"),
str:$(".jmui-md5-str").text(),
endFn: function (str) {
$(".jmui-md5-str").text(str);
}
})

Demo实例:请狠狠戳我

preLoad

js模块,预加载插件

语法:new PreLoad({config});

参数名称 参数类型 参数说明
tasks Array 必选,存放预加载资源Url的数组
finishedFn Function 必选,完成加载的回调函数
prefix String 可选,输出的前缀
1
2
3
4
5
6
7
8
9
10
new PreLoad({
tasks:[
"1.png",
"2.png",
"3.png"
],
finishedFn:function(total){
console.log("已经加载完成了,共加载"+total+"个资源");
}
});

Demo实例:请狠狠戳我

qrcode

js模块,二维码插件

语法:new QRCode(object,{config});

参数名称 参数类型 参数说明
object Object 必填,二维码的容器
text * 必选,二维码内容(支持 url 文本 电子邮件 短消息 电话 vCard 地理位置 二级制压缩文件)
width Int 可选,二维码宽度
height Int 可选,二维码高度
colorDark String 可选,二维码颜色
colorLight Int 可选,二维码底色
correctLevel 可选,二维码容错等级

参数请点这里:https://github.com/davidshimjs/qrcodejs

1
2
3
4
5
6
7
new QRCode(document.getElementById("qrcode"), {
text: "http://jr.jd.com?" + Math.random(),
width: 61,
height: 61,
colorDark: "#000000",
colorLight: "#ffffff"
});

Demo实例:请狠狠戳我


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen