ldi

ldialog

LDialog is a simple dialog.

Showing:

Popularity

Downloads/wk

1

GitHub Stars

7

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.min.css文件
<link rel="stylesheet" href="ldialog.min.css"/>
  • 引入jquery以及ldialog.js文件:
<script src="../js/jquery.min.js"></script>
<script src="../js/ldialog.min.js"></script>

调用蒙版的两种方式

  1. 实例化一个蒙版,并初始化,例如:
var dialog = new LDialog("test2", {footer: false}, {btn: {sure: "btn-info"}});
dialog.init();
  1. 直接调用具体的方法:
LDialog.msg("删除成功!", {iconData: "ld-roundcheck", iconColor: "green", iconSize: "30px"});

LDialog.alert("123123123123123");

LDialog参数说明

new LDialog(arg1, arg2, arg3)可以传入(选填)三个参数:

arg1 (字符串)

参数名数据类型默认值描述备注
arg1Stringnull重写蒙版显示内容可以是纯文本,也可以是html代码

arg2 (对象)

参数名数据类型默认值描述备注
bgString""定义蒙版背景颜色,默认为白色背景
btnObj{ }定义按钮组可定义两个按钮,对应的参数是:sure和cancel
sure定义确定按钮样式,值既可以引用已写好的class,也可以为按钮的颜色值;若只需要其中某一个按钮,只定义一个即可例如:sure: "l-btn-default" 或者 sure: "red"
cancel定义取消按钮样式,用法和sure相同例如:cancel: "l-btn-default" 或者 cancel: "#eeeeee"
cancelTitleString"取消"重写蒙版底部取消按钮显示文字
sureTitleString“确定”重写蒙版底部确定按钮显示文字
enterAniString"fadeIn"定义蒙版进入动画可自定义引入animate.css动画库的动画class,插件预加载了常用的几种动画
fontColorString""定义蒙版字体颜色
footerbooleantrue定义蒙版底部按钮组框架是否显示
globalClosebooleanfalse定义蒙版是否全局关闭点击蒙版以外区域关闭蒙版
headerbooleantrue定义蒙版标题模块是否显示
iconbooleantrue定义蒙版内容块图标是否显示
iconColorStringnull定义内容块左边图标大小
iconDataStringnull定义图标源若arg3参数也定义此参数,以arg2参数定义为准
iconSizeStringnull定义内容块左边图标大小
minHeightString"50px"定义蒙版最低高度
movebooleantrue定义蒙版是否支持拖拽
moveTypeNumber1定义蒙版拖拽方式,可选1或者21代表经典方式,2代表黑框方式
moveOutbooleanfalse定义蒙版是否可以拖拽出显示区域默认不可以
onCancelfunctionnull点击取消按钮的回调函数
onClosefunctionnull点击关闭按钮的回调函数
onGClosefunctionnull点击全局关闭回调函数
onIsNull(posi,i)functiontrueinput输入框回调函数,参数posi为当前input的选择器,i代表此input的序号,函数默认返回true
onSure(data)functionnull点击确定按钮的回调函数,可选data参数,获得所有蒙版input输入框的中的值,以数组形式展现
onSureBeforefunctionnull点击确定按钮前执行的回调函数和onSure相比,此函数执行时动画效果还未执行
onTimeOutfunctionnull倒计时完毕后的回调函数
opacityNumber0.5定义蒙版透明度
outlinebooleanfalse定义是否显示outline效果类似facebook蒙版效果,常用于操作成功的提示信息
radiusStrig"2px"定义蒙版的圆角
shadowString""定义蒙版阴影
subtitleStringnull定义副标题内容
timeOutNumber-1定义蒙版显示多长时间后消失默认使用-1代表不消失
titleString"初始化标题"定义蒙版标题若arg3参数也定义此参数,以arg2参数定义为准
verCenterbooleantrue定义蒙版是否居中显示默认居中,当不居中时,默认距顶部40px
widthString"450px"定义蒙版宽度
inputArray[ ]定义输入框组可配置多个输入框组,参数如下:
verCenter默认:false输入框组居中显示,设置为真时,leftInfo参数不可用
value默认:""输入框组设定value值
placeH默认:""默认input显示内容
maxlength默认:""输入最多长度字符数
type默认:"text"设置输入类型,例如:text,textarea,date, email...
notNull默认:false设置是否为空
leftInfo默认:""设置input左边文字

说明:

arg3(对象、字符串)

已经预定义了几组类型的蒙版显示效果,分别是:

info、 success 、error 、 confirm 、 input 、 bim、 custom

当使用时,直接赋值给arg3参数相应的字符串即可。

具体形式如下:

    {
          info: {
            title: "信息",
            btn: {
              sure: "l-btn-info",
              cancel: "l-btn-default"
            },
            iconData: "ld-info"
          },
          success: {
            title: "成功",
            btn: {
              sure: "l-btn-success",
              cancel: "l-btn-default"
            },
            iconData: "ld-roundcheck",
            iconColor: "#56BD9D"
          },
          error: {
            title: "错误",
            btn: {
              sure: "l-btn-error",
              cancel: "l-btn-default"
            },
            iconData: "ld-roundclose",
            iconColor: "#c9302c"
          },
          confirm: {
            title: "提示",
            btn: {
              sure: "l-btn-warning",
              cancel: "l-btn-default"
            },
            iconData: "ld-question",
            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

方法介绍(最常使用)

  • 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倒计时回调函数

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指示框方法,能够快速定位到想要出现的位置。
  • Version 1.0.6 :移除grunt,使用webpack进行构建。移除字体文件,使用iconfont图标。

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial