LDialog Plugin
LDialog Plugin 介绍
此插件基于jquery开发，能够适用于所有的弹出对话，弹出，确认，tip，msg提示框等。支持主流浏览器。
How to install
-
npm
npm install --save-dev ldialog -
bower
bower install --save-dev ldialog
How to use
- 在头部引入
ldialog.css或者压缩过的ldialog.min.css文件,同时将fonts字体图标文件放置在css同级目录中。
<link rel="stylesheet" href="../css/ldialog.css"/>
- 引入jquery以及ldialog.js文件：
<script src="../js/jquery.min.js"></script>
<script src="../js/ldialog.js"></script>
当在监听事件中需要弹出对话框或蒙版时，实例化一个蒙版，并初始化,例如：
var dialog = new LDialog("test2", {footer: false}, {btn: {sure: "btn-info"}});
dialog.init();
LDialog参数说明
new LDialog（arg1, arg2, arg3）可以传入（选填）三个参数：
arg1 (字符串)
| 参数名 | 数据类型 | 默认值 | 描述 | 备注 |
|---|---|---|---|---|
| arg1 | String | null | 重写蒙版显示内容 | 可以是纯文本，也可以是html代码 |
arg2 (对象)
| 参数名 | 数据类型 | 默认值 | 描述 | 备注 |
|---|---|---|---|---|
| bg | String | "" | 定义蒙版背景颜色，默认为白色背景 | |
| btn | Obj | { } | 定义按钮组 | 可定义两个按钮，对应的参数是：sure和cancel |
| sure | 定义确定按钮样式，值既可以引用已写好的class，也可以为按钮的颜色值；若只需要其中某一个按钮，只定义一个即可 | 例如：sure: "l-btn-default" 或者 sure: "red" | ||
| cancel | 定义取消按钮样式，用法和sure相同 | 例如：cancel: "l-btn-default" 或者 cancel: "#eeeeee" | ||
| cancelTitle | String | "取消" | 重写蒙版底部取消按钮显示文字 | |
| sureTitle | String | “确定” | 重写蒙版底部确定按钮显示文字 | |
| enterAni | String | "fadeIn" | 定义蒙版进入动画 | 可自定义引入animate.css动画库的动画class，插件预加载了常用的几种动画 |
| fontColor | String | "" | 定义蒙版字体颜色 | |
| footer | boolean | true | 定义蒙版底部按钮组框架是否显示 | |
| globalClose | boolean | false | 定义蒙版是否全局关闭 | 点击蒙版以外区域关闭蒙版 |
| header | boolean | true | 定义蒙版标题模块是否显示 | |
| icon | boolean | true | 定义蒙版内容块图标是否显示 | |
| iconColor | String | null | 定义内容块左边图标大小 | |
| iconData | String | null | 定义图标源 | 若arg3参数也定义此参数，以arg2参数定义为准 |
| iconSize | String | null | 定义内容块左边图标大小 | |
| minHeight | String | "50px" | 定义蒙版最低高度 | |
| move | boolean | true | 定义蒙版是否支持拖拽 | |
| moveType | Number | 1 | 定义蒙版拖拽方式，可选1或者2 | 1代表经典方式，2代表黑框方式 |
| moveOut | boolean | false | 定义蒙版是否可以拖拽出显示区域 | 默认不可以 |
| onCancel | function | null | 点击取消按钮的回调函数 | |
| onClose | function | null | 点击关闭按钮的回调函数 | |
| onGClose | function | null | 点击全局关闭回调函数 | |
| onIsNull(posi,i) | function | true | input输入框回调函数,参数posi为当前input的选择器，i代表此input的序号，函数默认返回true | |
| onSure(data) | function | null | 点击确定按钮的回调函数,可选data参数，获得所有蒙版input输入框的中的值，以数组形式展现 | |
| onSureBefore | function | null | 点击确定按钮前执行的回调函数 | 和onSure相比，此函数执行时动画效果还未执行 |
| onTimeOut | function | null | 倒计时完毕后的回调函数 | |
| opacity | Number | 0.5 | 定义蒙版透明度 | |
| outline | boolean | false | 定义是否显示outline效果 | 类似facebook蒙版效果,常用于操作成功的提示信息 |
| radius | Strig | "2px" | 定义蒙版的圆角 | |
| shadow | String | "" | 定义蒙版阴影 | |
| subtitle | String | null | 定义副标题内容 | |
| timeOut | Number | -1 | 定义蒙版显示多长时间后消失 | 默认使用-1代表不消失 |
| title | String | "初始化标题" | 定义蒙版标题 | 若arg3参数也定义此参数，以arg2参数定义为准 |
| verCenter | boolean | true | 定义蒙版是否居中显示 | 默认居中，当不居中时，默认距顶部40px |
| width | String | "450px" | 定义蒙版宽度 | |
| input | Array | [ ] | 定义输入框组 | 可配置多个输入框组，参数如下： |
| verCenter | 默认：false | 输入框组居中显示，设置为真时，leftInfo参数不可用 | ||
| value | 默认："" | 输入框组设定value值 | ||
| placeH | 默认："" | 默认input显示内容 | ||
| maxlength | 默认："" | 输入最多长度字符数 | ||
| type | 默认："text" | 设置输入类型，例如：text，textarea，date， email... | ||
| notNull | 默认：false | 设置是否为空 | ||
| leftInfo | 默认："" | 设置input左边文字 |
说明：
-
内容左边引用的是字体图标，属性是iconData，插件默认引用了52个常用的字体图标，下面有预览入口，用法如图：
进入查看图片：传送门
arg3(对象、字符串)
已经预定义了几组类型的蒙版显示效果，分别是：
info、 success 、error 、 confirm 、 input 、 bim、 custom
当使用时，直接赋值给arg3参数相应的字符串即可。
具体形式如下：
var popType = {
info: {
title: "信息",
btn: {
sure: "l-btn-info",
cancel: "l-btn-default"
},
iconData: ""
},
success: {
title: "成功",
btn: {
sure: "l-btn-success",
cancel: "l-btn-default"
},
iconData: "",
iconColor: "#56BD9D"
},
error: {
title: "错误",
btn: {
sure: "l-btn-error",
cancel: "l-btn-default"
},
iconData: "",
iconColor: "#c9302c"
},
confirm: {
title: "提示",
btn: {
sure: "l-btn-warning",
cancel: "l-btn-default"
},
iconData: "",
iconColor: "#F0AD4E"
},
input: {
title: "输入",
btn: {
sure: "l-btn-primary",
cancel: "l-btn-default"
}
},
bim: {
title: "提示",
btn: {
sure: "l-btn-bim",
cancel: "l-btn-default"
}
},
custom: {
title: "初始化标题",
btn: {
sure: "l-btn-primary",
cancel: "l-btn-default"
}
}
};
按钮组预定了6组：
l-btn-default 、 l-btn-primary 、 l-btn-error 、 l-btn-success 、 l-btn-info、 l-btn-warning
样式可在底部demo页面中查看
方法介绍（最常使用）
- LDialog.prompt(value, con, fun)
弹出类似系统的prompt对话框，默认含有一个input输入框。
value：必填，显示的文字，可以为空。
con： 选填，配置样式，可使用插件arg2的参数
fun： 选填，确认按钮的回调函数，用来获得数据，处理数据
example：
var con = {
input: [{
type: "textarea"
}],
width: "400px",
onIsNull: function(position, i) {
if(position.val() === "") {
position.focus();
LDialog.tips("请输入正确的值,",position, {posi: 2});
return false;
}
return true;
}
};
LDialog.prompt("", con, function(v) {
if(v[0] !== "") {
LDialog.closeAllTips();
console.log(v);
}
});
- LDialog.alert(value, con, fun)
example:
LDialog.alert("123123123123123");
LDialog.alert("123123123123123", function() {
console.log("点击确定按钮了！");
});
和p rompt方法使用相同，但是alert只有确定按钮，没有input输入框。
- LDialog.confirm(value, con, fun)
example:
LDialog.confirm(value, {iconData: ""}, function() {
LDialog.msg("删除成功！", {iconData: "", iconColor: "green", iconSize: "30px"});
});
和prompt方法使用相同，但是confirm没有input输入框。
- LDialog.msg(value, con, fun)
value：必填，显示的文字，可以为空。
con： 选填，配置样式，可使用插件arg2的参数
fun： 选填，倒计时过后的回调函数，用来阻断函数执行。
example:
LDialog.msg("删除成功！", {iconData: ""}, function() {
console.log(123);
});
- LDialog.tip(value, con, fun)
和msg方法使用相同，但样式不同。
- LDialog.tips(value, selector, con)
value：必填，显示的文字，可以为空。
selector： 必填，显示tips出现的位置，可以为任意jquery的选择器。
con： 选填，用来配置tips显示效果，具体参数如下：
posi: 2, //默认显示在选择器的右边位置，可定义分别对应的位置： 1：上， 2： 右， 3： 下， 4： 左
bg: "#000", //定义tips背景色，默认为黑色
color: "#fff", //定义tips文字颜色，默认为白色
maxWidth: "150", //定义tips最大宽度，默认为150px
timeOut: 2000, //定义tips多少秒后消失。
tipsClose: $.noop //定义tips倒计时回调函数
Live Demo
插件demo：传送门
字体图标： 传送门
版本
- Version 1.0.0 ：完成蒙版基础功能。
- Version 1.0.1 ：增加蒙版居中、全局关闭、自定义进入动画、outline功能。
- Version 1.0.2 ：增加对sea.js的支持。
- Version 1.0.3 ：增加蒙版实时居中，增加蒙版多种拖拽方式的功能。
- Version 1.0.4 ：增加了tip，confirm，msg，prompt，的插件方法，能够快速创建蒙版，并执行回调。
- Version 1.0.5 ：修改了一些bug，增加tips指示框方法，能够快速定位到想要出现的位置。