简单实用的jQuery确认框和警告框插件-鸾鸟资源网

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

发布2023-08-09 浏览8746次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！。

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.modal和this.overlay来引用模态窗口和遮罩层。默认为：
```
$(this.modal).add(this.overlay).fadeOut(100);
```
show：显示模态窗口和遮罩层的函数。可以使用this.modal和this.overlay来引用模态窗口和遮罩层。默认为：
```
$(this.modal).add(this.overlay).fadeIn(100);
```