项目作者: minesaner

项目描述 :
jQuery 的 alert 和 confirm 插件
高级语言: JavaScript
项目地址: git://github.com/minesaner/jquery-alert-confirm.git
创建时间: 2016-06-16T07:57:19Z
项目社区:https://github.com/minesaner/jquery-alert-confirm

开源协议:MIT License

下载


jquery-alert-confirm

提供提示与确认功能的 jQuery 插件。

构建源码

使用 git clone 代码到本地

  1. git clone git@github.com:minesaner/jquery-alert-confirm.git

进入文件夹执行

  1. npm install

然后执行 webpack 命令

  1. node_modules/.bin/webpack webpackwebpack 已全局安装)

执行完毕后会在 ./build 目录下生成 alert-confirm.min.js

API

$.alert(content|options)$.confirm(content|options)

content - 弹出的提示文字

options - 配置对象

header - 提示标题
content - 消息内容
confirmButtonText - 确定按钮的文字
cancelButtonText - 取消按钮的文字
confirm([e]) - 确定后的回调函数
cancel([e]) - 取消后的回调函数(alert 不需要)

在回掉函数中调用 e.preventDefault() 阻止弹框消失

示例

  1. $.alert('alert 内容');
  2. $.confirm('confirm 内容');
  3. $.confirm({
  4. header: 'header',
  5. content: 'content',
  6. cancel: function (e) {
  7. console.log('cancel');
  8. e.preventDefault();
  9. },
  10. confirm: function (e) {
  11. console.log('confirm');
  12. }
  13. })

$(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'

示例

HTML 结构

  1. <div class="ms-alert">
  2. <div class="ms-alert-body">
  3. <div class="ms-alert-header">header</div>
  4. <div class="ms-alert-content">content</div>
  5. <div class="ms-alert-buttons">
  6. <div class="ms-alert-button confirm">confirm text</div>
  7. <div class="ms-alert-button cancel">cancel text</div>
  8. </div>
  9. </div>
  10. </div>

  1. <div class="ms-alert">
  2. <div class="ms-alert-body">
  3. <div class="ms-alert-header">header</div>
  4. <div class="ms-alert-content">content</div>
  5. <div class="ms-alert-buttons">
  6. <div class="ms-alert-button confirm">confirm text</div>
  7. </div>
  8. </div>
  9. </div>

js

  1. $('.ms-alert').alertconfirm();
  2. $('.ms-alert').on('show.ms.alert', function (e) {
  3. console.log('show');
  4. });
  5. $('.ms-alert').alertconfirm('show');

License

MIT (http://www.opensource.org/licenses/mit-license.php)