zDialog
移动端弹出框插件
- 基于zepto.js;
- 可以与zepto的扩展库touch.js配合;
- resource中的图片文件就一张二维码图片，仅仅用于扫描
- styles/demo.css文件仅仅是页面布局CSS
- 就200多行代码，对于不符合使用项目的部分，可随意修改
- 下图是这个弹框的款式
移动端展示
Demo http://pwstrick.github.io/zDialog
开始使用 zDialog
使用zDialog最简单的办法是查阅我提供的简易例子，请浏览index.html的内容
载入zDialog
引入CSS文件和zepto库文件，还有zDialog类文件
<link rel="stylesheet" href="styles/zDialog.css" />
<script src="scripts/zepto/zepto.js"></script>
<script src="scripts/zDialog.js"></script>初始化一个zDialog
var dialog = zDialog.getzDialog();上面这种方式是模拟一个单例来初始化，也可以
var islider = new zDialog();zDialog默认模版
模版是可以自定义的，配合CSS，如果自定义了的话，就得在容器配置中重新配置各个参数。 总共有5个参数，分别对应各个位置，最外层位置、主题位置、阴影位置、消息信息位置和按钮位置
<aside class="zdialog">
<div class="zdialog-layer"></div>
<div class="zdialog-content">
<div class="zdialog-message">提示信息</div>
<button type="button" class="btn btn-primary">确定</button>
<button type="button" class="btn">取消</button>
</div>
</aside>下面是zDialog详细的选项配置列表
| 选项 | 类型 | 默认值 | 说明 |
| 容器配置 | |||
| container | {string} | '.zdialog' | 最外部的选择器 |
| contentContainer | {string} | '.zdialog-content' | 主题部分的选择器 |
| messageContainer | {string} | '.zdialog-message' | 消息信息的选择器 |
| buttonContainer | {string} | '.zdialog-content' | 按钮列表的选择器 默认值和contentContainer一样 默认的按钮就是主题部分的直接子元素 |
| layerContainer | {string} | '.zdialog-layer' | 阴影背景的选择器 |
| 内容配置 | |||
| content | {string} | 消息内容，可以输入html标签 | |
| template | {string} | 见前文 | 模版内容 |
| 外观配置 | |||
| left | {string} {number} | '5%' | 消息主体向左浮动距离 |
| right | {string} {number} | '5%' | 消息主体向右浮动距离 |
| top | {string} {number} | null | 消息主体向上浮动距离 |
| fixed | {boolean} | false | 消息主体浮动类型设置为：position:fixed |
| 按钮配置 | |||
| ok | {boolean} {function} | false | 确定按钮 可设置回调函数，false就是不显示 默认触发事件后会关闭框 如果是回调函数返回的是false， 就会阻止关闭 |
| okValue | {string} | '确定' | 按钮文字 |
| okCSS | {string} | 'btn btn-primary' | 按钮的样式 |
| cancel | {boolean} {function} | false | 取消按钮 可设置回调函数，false就是不显示 默认触发事件后会关闭框 如果是回调函数返回的是false， 就会阻止关闭 |
| cancelValue | {string} | '取消' | 按钮文字 |
| cancelCSS | {string} | 'btn' | 按钮的样式 |
| buttons | {array} | [] | 自定义按钮数组
[
{
value:按钮内容,
callback:回调函数,
css:按钮样式
}
]
|
| 交互配置 | |||
| quickClose | {boolean} | true | 快速关闭，点击空白处关闭 |
| opacity | {number} {boolean} | 0.6 | 阴影透明度，false就是完全透明 |
| eventType | {string} | 'click' | 点击类型 如果配合touch.js，可以设置为tap类型 |
| debug | {boolean} | false | 开启或关闭调试 |
| 事件配置 | |||
| onopen | {function} | function(){} | 打开弹出框的时候触发 |
| onclose | {function} | function(){} | 关闭事件的时候触发 |
联系我
对zDialog的使用有任何问题,或者发现bug,欢迎给我反馈： 提交反馈
License (MIT)
Copyright (c) 2015 pwstrick