diff --git a/src/mobile/README.md b/src/mobile/README.md index 9d6747e..0240465 100644 --- a/src/mobile/README.md +++ b/src/mobile/README.md @@ -1,14 +1,82 @@  -## layer mobole -layer mobile是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用。 +## layer mobile 改 +>layer mobile是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用。 -[文档与演示](http://sentsin.com/layui/layer/) +在layer mobile基础上,增加方便调用的msg、confirm、alert等方法。让layer mobile像pc端一样方便使用。 -1. 无需依赖任何库,只加载layer.m.js即可 -2. 小巧玲珑,性能卓越、柔情似水… -3. 具备无以伦比的自适应功能 -4. 灵活的皮肤自定义支撑,充分确保弹层风格多样化 -5. 丰富、科学的接口,让弹弹弹层无所不能 -## 备注 -[官网](http://sentsin.com/layui/layer/)、[有问必答](http://say.sentsin.com/home-48.html) \ No newline at end of file +>1. 无需依赖任何库,只加载layer.m.js即可 +>2. 小巧玲珑,性能卓越、柔情似水… +>3. 具备无以伦比的自适应功能 +>4. 灵活的皮肤自定义支撑,充分确保弹层风格多样化 +>5. 丰富、科学的接口,让弹弹弹层无所不能 + +## 使用方法 +本版本在原始api基础上做了一下常用方法的整理。让调用效率更高。原则是尽量和PC端layer调用方法保持一致。 + +如果需要,仍可调用原版api。具体方式请参考 [layer mobile api文档](http://layer.layui.com/mobile/api.html) + +新增方法如下: +1. layer.msg() 提示框 +``` + //msg:弹出的文字 + //end:提示框自动关闭后的回调方法 + layer(msg,end) + + //可以仅提示,不传递end + layer('你知道么?') + + //也可以同时都传递 + layer('你知道么?',function(){ + layer('不知道!'); + }); +``` +2. layer.confirm() 或 layer.cf() 询问框 +``` + layer.confirm(content,opt,yes,no) + //或 + layer.confirm(content,yes,no) + + //可以带opt,opt可以包含 按钮名字,及标题名。默认没有标题,按钮名为 ['确定', '取消'] + layer.confirm('能给我画只羊么?',{ + btn:['好的', '不会画'] + , title:'他问你' + },function(){ + //点击 好的 的回调 + },function(){ + //点击 不会画 的回调 + }); +``` +3. layer.alert() 消息框 +``` +layer.alert(content,opt,yes) +//或 +layer.alert(content,yes) +//同样opt可以带也可以不带 +//opt可以设置 按钮名 及 标题名 + +layer.alert('恒纪元到啦~!',{ + btn:'知道了' + , title: '重要通知' +},function(){ + //点击‘知道了’ 回调 +}) +``` +4. layer.btmMsg() 底部提示框 +``` +layer.btnMsg(content,end) +\\或 +layer.btnMsg(content) + +\\ content 为提示内容 +\\ end 为提示框自动关闭后 回调 +``` + +5. layer.btmConfirm 底部询问框 + + 用法参考2 layer.confirm. + + + + + \ No newline at end of file diff --git a/src/mobile/layer.js b/src/mobile/layer.js index f2c2bbf..a341d87 100644 --- a/src/mobile/layer.js +++ b/src/mobile/layer.js @@ -1,10 +1,14 @@ /*! - @Name:layer mobile v1.7 弹层组件移动版 @Author:贤心 @Site:http://layer.layui.com/mobie/ @License:LGPL - + */ + +/** + * update by XiaodongTong on 2017-6-16 15:03:09 + * Site:https://github.com/XiaodongTong/layer/tree/2.x/src/mobile + * Description:优化调用方式,让 layer-mobile 像使用PC端的 layer.js一样好用 */ ;!function(win){ @@ -218,4 +222,79 @@ win.layer = { }(); -}(window); \ No newline at end of file +}(window); + +/*------------ 增加msg、confirm、alert、btmConfirm、btmMsg-------------*/ +; (function (window, layer) { + //提示 + layer.msg = function (msg, end) { + return layer.open({ + content: msg + , skin: 'msg' + , time: 2 //2秒后自动关闭 + , anim: 'scale' + , end: end + }); + }; + //询问框 + layer.cf = layer.confirm = function (content, opt, yes, no) { + var type = typeof opt === 'function'; + if (type) { + no = yes; + yes = opt; + opt.btn = ['确定', '取消']; + opt.title = ''; + } + return layer.open({ + btn: opt.btn + , content: content + , yes: yes + , no: no + , title: opt.title ? opt.title : '' + }); + } + //信息框 + layer.alert = function (content, opt, yes) { + var type = typeof opt === 'function'; + if (type) { + yes = opt; + opt.btn = '确定'; + opt.title = ''; + } + return layer.open({ + content: content + , btn: opt.btn + , yes: yes + , title: opt.title ? opt.title: '' + }); + } + //底部提示 + layer.btmMsg = function (content,end) { + layer.open({ + content: content + , skin: 'footer' + , time: 1.5 + , shade: 'background-color: rgba(0,0,0,.3)' + , end: end + }); + }; + //底部询问框 + layer.btmConfirm = function (content, btn, yes, no) { + var type = typeof btn === 'function'; + if (type) { + no = yes; + yes = btn; + btn = ['确定', '取消']; + } + layer.open({ + content: content + , btn: btn + , skin: 'footer' + , yes: yes + , no: no + }); + } + +})(window, layer); + +