简单实用的jQuery确认框和警告框插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 简单实用的jQuery确认框和警告框插件
简单实用的jQuery确认框和警告框插件
分享:

    插件介绍

    jquery-alertable是一款简单实用的jQuery确认框和警告框插件。该插件可用于替代浏览器原生的确认框、警告框和提示框。

    浏览器兼容性

    浏览器兼容性
    时间:2016-10-08
    阅读:
简要教程

jquery-alertable是一款简单实用的jQuery确认框和警告框插件。该插件可用于替代浏览器原生的确认框、警告框和提示框。

安装

可以通过npm来安装jquery-alertable插件。

npm install --save @claviska/jquery-alertable                  
                

使用方法

alerts警告框

警告框的调用方法如下:

// Basic example
$.alertable.alert('Howdy!');

// Example with action when the modal is dismissed
$.alertable.alert('Howdy!').always(function() {
    // Modal was dismissed
});            
                 
confirmations确认框

确认框的调用方法如下:

// Basic example
$.alertable.confirm('You sure?').then(function() {
    // OK was selected
});

// Example with then/always
$.alertable.confirm('You sure?').then(function() {
    // OK was selected
}, function() {
    // Cancel was selected
}).always(function() {
    // Modal was dismissed
});
                 
prompts提示框

提示框的调用方法如下:

// Basic example
$.alertable.prompt('How many?').then(function(data) {
    // Prompt was submitted
});

// Example with then/always
$.alertable.prompt('How many?').then(function(data) {
    // Prompt was submitted
}, function() {
    // Prompt was canceled
}).always(function() {
    // Modal was dismissed
});                 
                

配置参数

配置参数可以以对象的方式在第二个参数中传入:

$.alertable.alert('Howdy!', {
    optionName: optionValue,
    ...
});

$.alertable.confirm('You sure?', {
    optionName: optionValue,
    ...
});

$.alertable.prompt('How many?', {
    optionName: optionValue,
    ...
});                  
                

可用的配置参数有:

  • container:模态窗口被添加的容器,默认是body
  • html:你的信息是否包含HTML代码。默认为false
  • cancelButton:取消按钮的HTML代码。默认为:
    <button class="alertable-cancel" type="button">Cancel</button>
    
  • okButton:OK按钮的HTML代码。默认为:
    <button class="alertable-ok" type="button">OK</button>
    
  • overlay:遮罩层的HTML代码。默认为:
    <div class="alertable-overlay"></div>
    
  • prompt:提示框主体的HTML代码。在这个HTML中的所有<input>元素在提交时它们的值都会被返回。默认为:
    <input class="alertable-input" type="text" name="value">
    
  • modal:模态窗口的HTML代码。默认为:
    <form class="alertable">
        <div class="alertable-message"></div>
        <div class="alertable-prompt"></div>
        <div class="alertable-buttons"></div>
    </form>
    
  • hide:隐藏模态窗口和遮罩层的函数。可以使用this.modalthis.overlay来引用模态窗口和遮罩层。默认为:
    $(this.modal).add(this.overlay).fadeOut(100);
    
  • show:显示模态窗口和遮罩层的函数。可以使用this.modalthis.overlay来引用模态窗口和遮罩层。默认为:
    $(this.modal).add(this.overlay).fadeIn(100);
    

jquery-alertable插件的github地址为:https://github.com/claviska/jquery-alertable

网友评论