jQuery 的 alert 和 confirm 插件
提供提示与确认功能的 jQuery
插件。
使用 git clone 代码到本地
git clone git@github.com:minesaner/jquery-alert-confirm.git
进入文件夹执行
npm install
然后执行 webpack 命令
node_modules/.bin/webpack 或 webpack(webpack 已全局安装)
执行完毕后会在 ./build
目录下生成 alert-confirm.min.js
$.alert(content|options)
,$.confirm(content|options)
content
- 弹出的提示文字
options
- 配置对象
header
- 提示标题content
- 消息内容confirmButtonText
- 确定按钮的文字cancelButtonText
- 取消按钮的文字confirm([e])
- 确定后的回调函数cancel([e])
- 取消后的回调函数(alert 不需要)在回掉函数中调用
e.preventDefault()
阻止弹框消失
$.alert('alert 内容');
$.confirm('confirm 内容');
$.confirm({
header: 'header',
content: 'content',
cancel: function (e) {
console.log('cancel');
e.preventDefault();
},
confirm: function (e) {
console.log('confirm');
}
})
$(selector).alertconfirm([options|methodName])
options
- 配置对象
showFunction()
- 显示弹窗调用的方法hideFunction()
- 隐藏弹窗调用的方法方法中的
this
指向jQuery
的选择对象
methodName
- 方法名称
'show'
- 显示'hide'
- 隐藏
$(selector).on(eventName)
eventName
- 可绑定的事件'show.ms.alert'
'shown.ms.alert'
'hide.ms.alert'
'hidden.ms.alert'
'confirm.ms.alert'
'cancel.ms.alert'
<div class="ms-alert">
<div class="ms-alert-body">
<div class="ms-alert-header">header</div>
<div class="ms-alert-content">content</div>
<div class="ms-alert-buttons">
<div class="ms-alert-button confirm">confirm text</div>
<div class="ms-alert-button cancel">cancel text</div>
</div>
</div>
</div>
或
<div class="ms-alert">
<div class="ms-alert-body">
<div class="ms-alert-header">header</div>
<div class="ms-alert-content">content</div>
<div class="ms-alert-buttons">
<div class="ms-alert-button confirm">confirm text</div>
</div>
</div>
</div>
$('.ms-alert').alertconfirm();
$('.ms-alert').on('show.ms.alert', function (e) {
console.log('show');
});
$('.ms-alert').alertconfirm('show');