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);
jquery-alertable插件的github地址为:https://github.com/claviska/jquery-alertable