#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指示框方法，能够快速定位到想要出现的位置。