移动端弹窗插件第二版,包括常见的 alert、confirm、toast、notice 四种类型弹窗,支持 jQuery 和 Zepto 库。
特性支持常见的 alert、confirm、toast、notice 四种类型弹窗
可选择使用 IOS 或者 Material Design 风格的弹窗
可自定义按钮的文字、样式、回调函数,支持多个按钮
多个弹窗状态改变回调函数
同时支持 jQuery 和 Zepto 库
可扩展性强
新增弹窗可选 IOS 或者 Material Design 风格
可自定义多个按钮
按钮排版样式,并排或者堆叠
notice 弹窗的位置,居中或者底部
截图查看效果,扫二维码或者移步→:demo示例
1、引入 CSS 文件
2、引入 JS 文件
3、HTML 结构
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89742.html
摘要:基于开发的插件包含仿照原生样式来源一些想法刚开始的时候想要用现成的弹窗组件来着但是查找一圈没有发现比较合适项目的所以才自己开发了一个包含四种并且可以单个引入的组件开发实际上比较简单有兴趣的可以看下源码实现步骤很清晰关于样式的问题是直接从魅 wc-messagebox 基于 vue 2.0 开发的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...
摘要:一简单的使用主要用于需要动态渲染的组件,或者类似于提示组件注意创建的是一个组件构造器,而不是一个具体的组件实例属于的全局,在实际业务开发中我们很少使用,因为相比常用的写法使用步骤要更加繁琐一些。 最近在重构公司的项目,有些组件想要封装的更灵活,例如toast、loading、messageBox等弹窗组件,模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件; mint-UI的t...
摘要:之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示即与客户端有交互遇到不少的坑总结一下问题图片上传功能使用工具百度的暂时遇到的坑删除图片实际上并没有完全删除需要自己在源码上添加详情看的提问上传的图片旋转角度有问题比 之前实习做的一个移动端的页面 需要的功能有图片上传 点击客户端的返回按钮 有提示(即与客户端有交互) 遇到不少的坑 总结一下问题 1.图片上传功能 ...
摘要:尤其是遇到二次确认等场景因此,打算从头整理移动弹窗的基础知识,以弹窗体系为切入点,从定义出发,对移动弹窗进行分类,然后分别分析每一类弹窗的应用场景,以及在使用过程中需要注意的点。 摘要: 最为常见的【弹窗】反而是最捉摸不定的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到二次确认等场景…… 因此,打算从头整理移动弹窗的基础知识,以iOS弹窗体系为切入点,从...
摘要:确定和取消弹框,按确定返回,按取消或者关闭按钮返回。官方浏览器名返回所使用浏览器的名称。对象有一个属性,表示对象中的记录数。属性描述屏幕的宽度屏幕的高度窗口可以使用的屏幕的宽度窗口可以使用的屏幕的高度对象见温故系列 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:BOM JavaScript-BOM BO...
阅读 969·2021-09-26 10:15
阅读 2030·2021-09-24 10:37
阅读 2556·2019-08-30 13:46
阅读 2611·2019-08-30 11:16
阅读 2394·2019-08-29 10:56
阅读 2578·2019-08-26 12:24
阅读 3456·2019-08-23 18:26
阅读 2643·2019-08-23 15:43