移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。
特性
- 支持常见的 alert、confirm、toast、notice 四种类型弹窗
- 可选择使用 IOS 或者 Material Design 风格的弹窗
- 可自定义按钮的文字、样式、回调函数，支持多个按钮
- 多个弹窗状态改变回调函数
- 同时支持 jQuery 和 Zepto 库
- 可扩展性强
新增
- 弹窗可选 IOS 或者 Material Design 风格
- 可自定义多个按钮
- 按钮排版样式，并排或者堆叠
- notice 弹窗的位置，居中或者底部
截图
示例
查看效果，扫二维码或者移步→：demo示例
使用说明
1、引入 CSS 文件
<
link
rel
=
"stylesheet"
href
=
"../css/dialog.css"
>
|
2、引入 JS 文件
<
script
src
=
"../lib/zepto.min.js"
></
script
>
<
script
src
=
"../js/dialog.js"
></
script
>
|
3、HTML 结构
<
button
id
=
"btn-01"
>显示弹窗</
button
>
|
4、实例化
$(document).on(
'click'
,
'#btn-01'
,
function
() {
var
dialog1 = $(document).dialog({
content:
'Dialog 移动端弹窗插件的自定义提示内容'
,
});
});
|
参数
| 参数 | 默认值 | 说明 |
|---|---|---|
| type | ‘alert’ | 弹窗的类型。alert: 确定; confirm: 确定/取消; toast: 状态提示; notice: 提示信息 |
| style | ‘default’ | alert 与 confirm 弹窗的风格。 default: 根据访问设备平台; ios: ios 风格; android: MD design 风格 |
| titleShow | true | 是否显示标题 |
| titleText | ‘提示’ | 标题文字 |
| closeBtnShow | false | 是否显示关闭按钮 |
| content | ” | 弹窗提示内容, 值可以是 HTML 内容 |
| contentScroll | true | alert 与 confirm 弹窗提示内容是否限制最大高度, 使其可以滚动 |
| dialogClass | ” | 弹窗自定义 class |
| autoClose | 0 | 弹窗自动关闭的延迟时间(毫秒)。 0: 不自动关闭; 大于0: 自动关闭弹窗的延迟时间 |
| overlayShow | true | 是否显示遮罩层 |
| overlayClose | false | 是否可以点击遮罩层关闭弹窗 |
| buttonStyle | ‘side’ | 按钮排版样式。side: 并排; stacked: 堆叠 |
| buttonTextConfirm | ‘确定’ | 确定按钮文字 |
| buttonTextCancel | ‘取消’ | 取消按钮文字 |
| buttonClassConfirm | ” | 确定按钮自定义 class |
| buttonClassCancel | ” | 取消按钮自定义 class |
| buttons | [] | confirm 弹窗自定义按钮组, 会覆盖”确定”与”取消”按钮; 单个 button 对象可设置 name [ 名称 ]、class [ 自定义class ]、callback [ 点击执行的函数 ] |
| infoIcon | ” | toast 与 notice 弹窗的提示图标, 值为图标的路径。不设置=不显示 |
| infoText | ” | toast 与 notice 弹窗的提示文字, 会覆盖 content 的设置 |
| position | ‘center’ | notice 弹窗的位置, center: 居中; bottom: 底部 |
回调函数
| 函数 | 默认值 | 说明 |
|---|---|---|
| onClickConfirmBtn | function(){} | 点击“确定”按钮的回调函数 |
| onClickCancelBtn | function(){} | 点击“取消”按钮的回调函数 |
| onClickCloseBtn | function(){} | 点击“关闭”按钮的回调函数 |
| onBeforeShow | function(){} | 弹窗显示前的回调函数 |
| onShow | function(){} | 弹窗显示后的回调函数 |
| onBeforeClosed | function(){} | 弹窗关闭前的回调函数 |
| onClosed | function(){} | 弹窗关闭后的回调函数 |
方法
| 方法 | 说明 |
|---|---|
| obj.close | 关闭对话框。 用法：dialogObj.close() |
| obj.update | 更改 toast 和 notice 类型弹窗内容 ( 图标以及提示文字 ) 可传入参数： content: 弹窗内容, 可以是HTML infoIcon: 弹窗提示图标 infoText: 弹窗提示文字 autoClose: 自动关闭的延迟时间 onBeforeClosed: 关闭前回调函数 onClosed: 关闭后回调函数 |
目录结构
.
├─dist
# 项目发布资源目录, Grunt 生成
│ ├─css
# 项目 CSS 文件
│ ├─demos
# 项目示例页面
│ ├─images
# 项目 image 文件
│ ├─js
# 项目 JS 文件
│ │ ├─dialog.js
# 弹窗 JS
│ │ ├─dialog.min.js
# 弹窗最小版本 JS
│ │ └─example.js
# 示例 JS
│ └─lib
# 公共 JS 文件
│
├─src
# 实际进行开发的目录
│ ├─css
# 项目 CSS 文件, 由 Grunt 生成
│ ├─demos
# 项目示例页面
│ ├─images
# 项目 image 文件
│ ├─js
# 项目 JS 文件
│ │ ├─dialog.js
# 弹窗主要 JS
│ │ ├─example.js
# 示例 JS
│ │ ├─ripple.js
# 点击水波纹效果 JS
│ │ └─tapEvent.js
# 点击事件 JS
│ ├─lib
# 公共 JS 文件
│ ├─scss
# 项目相关 SCSS 文件
│ └─templates
# 初始静态 DMEO 资源目录
│
├─Gruntfile.js
# Grunt任务配置
├─_config.json
# Grunt配置所需信息
└─package.json
# 项目信息以及依赖
|
Grunt 使用方法
1、安装 Grunt
npm install
|
2、在本地运行项目
grunt serve
|