你的位置:首页 > Java教程

[Java教程]x0popup


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

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

x0popup对话框插件效果演示

在线预览    源码下载

 安装

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

1
2
npm install x0popup
bower install x0popup                 



 使用方法

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

1
2
<link rel="stylesheet" href="path/to/css/x0popup.min.css">
<script src="path/to/js/x0popup.min.js"></script>          



 初始化插件

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

1
x0p('Message', 'Hello world!');



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

1
x0p('Confirmation', 'Are you sure?', 'warning');



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

1
2
3
4
5
6
7
8
9
10
11
12
13
x0p('Enter Your Name', null, 'input',
function(button, text) {
    if(button == 'info') {
        x0p('Congratulations',
            'Your name is ' + text + '!',
            'ok', false);
    }
    if(button == 'cancel') {
        x0p('Canceled',
            'You canceled input.',
            'error', false);
    }
});



 配置参数

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

 

在线预览    源码下载