你的位置:首页 > 软件开发 > Java > x0popup

x0popup

发布时间:2016-07-20 10:00:10
x0popup是一款用于替代原生警告框、消息框和确认框的纯js插件。通过该js插件可以制作出非常炫酷的警告框、消息框和确认框效果。它的特点还有:轻量级,压缩后的版本小于4kb。纯js,无外部依赖库。扁平化风格设计。允许用户自定义主题。在线预览 源码下载 ...

x0popup

x0popup是一款用于替代原生警告框、消息框和确认框的纯js插件。通过该js插件可以制作出非常炫酷的警告框、消息框和确认框效果。它的特点还有:

  • 轻量级,压缩后的版本小于4kb。
  • 纯js,无外部依赖库。
  • 扁平化风格设计。
  • 允许用户自定义主题。

x0popup

在线预览    源码下载

 安装

可以通过npm或bower来安装该对话框插件。

1

 使用方法

在页面中引入x0popup.min.css和x0popup.min.js文件。

1
 初始化插件

要制作一个简单的弹出消息框,可以使用下面的代码:

1

要制作一个确认对话框,可以使用下面的代码:

1

要制作一个消息提示框,可以使用下面的代码:

1

 配置参数

x0popup插件的配置参数如下:

参数类型默认值描述
titlestring'Message'提示框的标题。
textstringnull提示框的文本。
themestring'default'提示框的主题,目前只有一种主题,你可以在'css/x0popup.default.css'文件中编写自己的主题。
overlaybooltrue是否显示遮罩层。
widthstring'90%'提示框的宽度。
heightstring'50%'提示框的高度。
maxWidthstring'450px'提示框的最大宽度。
maxHeightstring'200px'提示框的最大高度。
typestring'text'类型:text, input, ok, warning, info, error。
iconstringnull图标:ok, warning, info, error, custom。
iconURLstringnull当icon类型为cusotm时,使用该参数来指定图标的url。
inputTypestringnull输入框类型:text, password。
inputValuestringnull输入框的默认值。
inputPlaceholderstringnull输入框的占位文本。
inputColorstringnull输入框的文本颜色。
inputValidatorfunctionnull参数: button。返回一条提示错误的信息。cancel按钮不会触发这个函数
showCancelButtonboolnull是否显示cancel按钮。
buttonsarraynull按钮数组。
autoCloseintegernull对话框在指定的时间之后自动关闭。
htmlboolfalse如果设置为false,html代码在置入对话框之前将被编码。
animationbooltrue是否显示动画。
animationTypestring'pop'动画类型:pop, slideUp, slideDown, fadeIn。
overlayAnimationbooltrueSet it to false will help if you want to show several popups with overlay continuously.
callbackfunctionnull回调函数。
 按钮

按钮的可取值有:ok, warning, info, error, cancel, timeout。除了timeout会自动触发,其它的由用户来触发。

单个按钮的结构如下:

参数类型默认值描述
typestringnull可取值: ok, warning, info, error, cancel。
textstringnull如果设置为null,按钮上的文本将被设置为默认值。
showLoadingboolnull如果设置为true,在按钮被点击时,对话框会显示一个loading动画,而不是直接关闭。

x0popup对话框插件的github地址为:https://github.com/gao-sun/x0popup

 

原标题:x0popup

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录