mirror of https://github.com/layui/layer
优化调用方式，增加若干方便调用的方法
XiaodongTong
parent
51c0b8c0c3
commit
283ff14415
|
|
@ -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)
|
||||
>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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -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);
|
||||
}(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);
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue