移动端弹出框组件 － Dialog
移动端弹出框组件 － Dialog
通过利用 Zepto＋CSS3 实现
一、使用方式
$.dialog({
// 弹出框的类型
type: 'loading',
// 文字信息
content: null,
// 延迟多长时间关闭, 默认 3s 后关闭
delay: null,
// 延迟关闭时，回调函数
delayCallback: null,
// 遮罩层透明度
maskOpacity: null,
// 点击遮罩层可以关闭窗口
maskClose: true,
// 动画
animation: true,
// 按钮 组
buttons: [
{
type: 'danger',
text: '确认',
callback: function () {
// 返回值为true， 则关闭窗口
return true;
}
}, {
type: 'default',
text: '取消',
callback: function () {
alert('取消');
}
}
],
buttons: null
});二、设计思路
- 基本的 html 静态结构，样式搭建
- index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no">
<meta charset="UTF-8">
<link rel="stylesheet" href="dialog.css">
<title>移动端 Dialogtitle>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
font-size: 12px;
}
.btn {
display: block;
width: 100%;
border-radius: 3px;
padding: 1em;
margin: 20px 0;
color: #fff;
background-color: #077B01;
border: 1px solid #eee;
-webkit-appearance: none;
}
style>
head>
<body>
<button id="btn1" type="button" class="btn">默认 loading 弹窗button>
<button id="btn2" type="button" class="btn">ok 弹窗, 2s 后自动关闭button>
<button id="btn3" type="button" class="btn">ok 弹窗, 2s 后自动关闭, 遮罩层 为 0.3 button>
<button id="btn4" type="button" class="btn">默认 loading 弹窗, 点击遮罩层不能关闭窗口button>
<button id="btn5" type="button" class="btn">带有buttonsbutton>
body>
<script src="zepto.js">script>
<script src="dialog.js">script>
<script>
$('#btn1').click(function () {
var dg1 = $.dialog();
});
$('#btn2').click(function () {
var dg2 = $.dialog({
type: 'ok',
delay: 2000
});
});
$('#btn3').click(function () {
var dg3 = $.dialog({
type: 'ok',
delay: 2000,
maskOpacity: 0.3
});
});
$('#btn4').click(function () {
var dg4 = $.dialog({
content: '点击mask不能关闭窗口',
maskClose: false
});
});
$('#btn5').click(function () {
var dg5 = $.dialog({
type: 'warning',
content: '你确定要删除此项目吗？',
buttons: [
{
type: 'danger',
text: '确认',
callback: function () {
alert('alert');
return true;
}
}, {
type: 'default',
text: '取消',
callback: function () {
alert('取消');
}
}
]
});
});
script>
html>- dialog.css
.g-dialog-container {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.6);
}
.g-dialog-container .g-dialog-window {
padding: 1em;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.8);
transition: all .3s cubic-bezier(0.65,-0.08, 0.32, 1.25);
}
.g-dialog-container .g-dialog-window .g-dialog-header {
width: 50px;
height: 50px;
margin: 0 auto;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.g-dialog-container .g-dialog-window .g-dialog-header.ok:after {
content: '';
display: block;
width: 20px;
height: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotateZ(-45deg);
}
.g-dialog-container .g-dialog-window .g-dialog-header.warning {
transform: rotateZ(90deg);
}
.g-dialog-container .g-dialog-window .g-dialog-header.warning:before {
content: '';
display: block;
width: 20px;
height: 5px;
background-color: #fff;
}
.g-dialog-container .g-dialog-window .g-dialog-header.warning:after {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 5px;
margin-left: 5px;
background-color: #fff;
}
@keyframes loading-1 {
0% {
transform: translateX(-4px);
}
50% {
transform: translateX(8px);
}
100% {
transform: translateX(-4px);
}
}
@keyframes loading-2 {
0% {
transform: translateX(4px);
}
50% {
transform: translateX(-8px);
}
100% {
transform: translateX(4px);
}
}
.g-dialog-container .g-dialog-window .g-dialog-header.loading:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: aquamarine;
animation: loading-1 0.8s infinite;
}
.g-dialog-container .g-dialog-window .g-dialog-header.loading:after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #d35400;
animation: loading-2 0.8s infinite;
}
.g-dialog-container .g-dialog-window .g-dialog-content {
color: #fff;
padding: 1em 1em 0;
line-height: 180%;
text-align: center;
}
.g-dialog-container .g-dialog-window .g-dialog-footer {
display: flex;
justify-content: center;
align-items: center;
margin: 0.3em 0;
}
.g-dialog-container .g-dialog-window .g-dialog-footer .btn {
display: block;
border-radius: 3px;
padding: 0.8em 1.8em;
margin: 0.3em;
color: #fff;
text-shadow: #666 1px 1px;
background-color: #ccc;
border: none;
-webkit-appearance: none;
}
.g-dialog-container .g-dialog-window .g-dialog-footer .btn.default {
background-color: #ccc;
}
.g-dialog-container .g-dialog-window .g-dialog-footer .btn.danger {
background-color: #d35400;
}
.g-dialog-container .g-dialog-window .g-dialog-footer .btn.success {
background-color: #077B01;
}- js 组件开发
- 组件具备哪些功能
- 组件的调用方式，也就是怎么设计组件的参数配置，对应不同的组件功能
- 组件优化，包括 css，js 等
- 根据业务，思考是否扩展组件
- dialog.js
/**
* Created by wikid on 3/2/17.
*/
;(function ($) {
/*
弹出框基本的 html 结构
正在拼命加载中
*/
function Dialog(config) {
var customConfig = config || {};
this.config = {
// 弹出框的类型
type: 'loading',
// 文字信息
content: null,
// 延迟多长时间关闭, 默认 3s 后关闭
delay: null,
// 延迟关闭时，回调函数
delayCallback: null,
// 遮罩层透明度
maskOpacity: null,
// 点击遮罩层可以关闭窗口
maskClose: true,
// 动画
animation: true,
/* 按钮 组
buttons: [
{
type: 'danger',
text: '确认',
callback: function () {
console.log(this);
alert('alert');
}
}, {
type: 'default',
text: '取消',
callback: function () {
alert('取消');
}
}
]
*/
buttons: null
};
$.extend(this.config, customConfig);
// 创建基本的 dom 结构
this.body = $('body');
// 遮罩层
this.mask = $('');
// 弹出框
this.win = $('');
// header， 对应的是 icon 的类型
this.header = $('');
// 提示文字
this.content = $('');
// footer, 用来包含操作按钮的
this.footer = $('');
// 初始化
this.init();
}
Dialog.zIndex = 10000;
Dialog.prototype = {
init: function () {
var self = this;
var config = this.config,
body = this.body,
mask = this.mask,
win = this.win,
header = this.header,
content = this.content,
footer = this.footer;
// 层级 ＋1
Dialog.zIndex ++;
mask.css('zIndex', Dialog.zIndex);
// icon
win.append(header.addClass(config.type));
// message
config.content && win.append(content.html(config.content));
// button
if (config.buttons) {
this.createButtons(footer, config.buttons);
win.append(footer);
}
// 延迟 自动 关闭
if (config.delay && config.delay !== 0) {
window.setTimeout(function () {
if (self.delayCallback) {
self.delayCallback();
} else {
self.close();
}
}, self.config.delay);
}
// mask -- opacity
if (config.maskOpacity) {
mask.css('backgroundColor', 'rgba(0, 0, 0, ' + config.maskOpacity + ')');
}
// mask -- close
if (config.maskClose) {
mask.click(function () {
self.mask.remove();
});
}
// animation
if (config.animation) {
this.animation();
}
mask.append(win);
body.append(mask);
},
close: function () {
this.mask.remove();
},
animation: function() {
var self = this;
this.win.css('transform', 'scale(0, 0)');
window.setTimeout(function () {
self.win.css('transform', 'scale(1, 1)');
}, 200);
},
createButtons: function (footer, buttons) {
var self = this;
$(buttons).each(function (index, item) {
var domBtn = $('+ item.text +'');
if (item.callback) {
domBtn.click(function (e) {
// 阻止冒泡事件
e.stopPropagation();
if (item.callback()) {
self.close()
}
})
}
footer.append(domBtn);
})
}
};
window.Dialog = Dialog;
$.dialog = function (config) {
return new Dialog(config);
}
})(Zepto);