ldialog v1.0.6

#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 (字符串)

arg2 (对象)

说明：

• 内容左边引用的是字体图标，属性是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指示框方法，能够快速定位到想要出现的位置。