aui-dialog改造,支持关闭
2017-02-24 15:18
288 查看
1.打开aui-dialog.js
添加关闭html代码
var headerHtml = params.title ? '<div class="aui-dialog-header ddd-dialog-header">' + params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>' : '<div class="aui-dialog-header ddd-dialog-header">' + self.params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>';
2.给关闭按钮赋予事件
var dialogCloseButtons = document.querySelectorAll(".aui-dialog-close"); if (dialogCloseButtons && dialogCloseButtons.length > 0) { for(var ii = 0; ii < dialogCloseButtons.length; ii++){ dialogCloseButtons[ii].onclick = function(){ self.close(); return; } } }
检测包含aui-dialog-close的元素,添加onclick事件,点击后,关闭窗口。
3.完整代码如下
/**
* aui-popup.js
* @author 流浪男
* @todo more things to abstract, e.g. Loading css etc.
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php */
(function( window, undefined ) {
"use strict";
var auiDialog = function() {
};
var isShow = false;
auiDialog.prototype = {
params: {
title:'',
msg:'',
buttons: ['取消','确定'],
input:false
},
create: function(params,callback) {
var self = this;
var dialogHtml = '';
var buttonsHtml = '';
var headerHtml = params.title ? '<div class="aui-dialog-header ddd-dialog-header">' + params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>' : '<div class="aui-dialog-header ddd-dialog-header">' + self.params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>';
if(params.input){
params.text = params.text ? params.text: '';
var msgHtml = '<div class="aui-dialog-body"><input type="text" placeholder="'+params.text+'"></div>';
}else{
var msgHtml = params.msg ? '<div class="aui-dialog-body">' + params.msg + '</div>' : '<div class="aui-dialog-body">' + self.params.msg + '</div>';
}
var buttons = params.buttons ? params.buttons : self.params.buttons;
if (buttons && buttons.length > 0) {
for (var i = 0; i < buttons.length; i++) {
buttonsHtml += '<div class="aui-dialog-btn ddd-dialog-btn" tapmode button-index="'+i+'">'+buttons[i]+'</div>';
}
}
var footerHtml = '<div class="aui-dialog-footer">'+buttonsHtml+'</div>';
dialogHtml = '<div class="aui-dialog">'+headerHtml+msgHtml+footerHtml+'</div>';
document.body.insertAdjacentHTML('beforeend', dialogHtml);
// listen buttons click
var dialogButtons = document.querySelectorAll(".aui-dialog-btn");
if(dialogButtons && dialogButtons.length > 0){
for(var ii = 0; ii < dialogButtons.length; ii++){
dialogButtons[ii].onclick = function(){
if(callback){
if(params.input){
callback({
buttonIndex: parseInt(this.getAttribute("button-index"))+1,
text: document.querySelector("input").value
});
}else{
callback({
buttonIndex: parseInt(this.getAttribute("button-index"))+1
});
}
};
self.close();
return;
}
}
}
var dialogCloseButtons = document.querySelectorAll(".aui-dialog-close"); if (dialogCloseButtons && dialogCloseButtons.length > 0) { for(var ii = 0; ii < dialogCloseButtons.length; ii++){ dialogCloseButtons[ii].onclick = function(){ self.close(); return; } } }
self.open();
},
open: function(){
if(!document.querySelector(".aui-dialog"))return;
var self = this;
document.querySelector(".aui-dialog").style.marginTop = "-"+Math.round(document.querySelector(".aui-dialog").offsetHeight/2)+"px";
if(!document.querySelector(".aui-mask")){
var maskHtml = '<div class="aui-mask"></div>';
document.body.insertAdjacentHTML('beforeend', maskHtml);
}
// document.querySelector(".aui-dialog").style.display = "block";
setTimeout(function(){
document.querySelector(".aui-dialog").classList.add("aui-dialog-in");
document.querySelector(".aui-mask").classList.add("aui-mask-in");
document.querySelector(".aui-dialog").classList.add("aui-dialog-in");
}, 10)
document.querySelector(".aui-mask").addEventListener("touchmove", function(e){
e.preventDefault();
})
document.querySelector(".aui-dialog").addEventListener("touchmove", function(e){
e.preventDefault();
})
return;
},
close: function(){
var self = this;
document.querySelector(".aui-mask").classList.remove("aui-mask-in");
if (document.querySelector(".aui-dialog")) {
document.querySelector(".aui-dialog").classList.remove("aui-dialog-in");
document.querySelector(".aui-dialog").classList.add("aui-dialog-out");
}
if (document.querySelector(".aui-dialog:not(.aui-dialog-out)")) {
setTimeout(function(){
if(document.querySelector(".aui-dialog"))document.querySelector(".aui-dialog").parentNode.removeChild(document.querySelector(".aui-dialog"));
self.open();
return true;
},200)
}else{
document.querySelector(".aui-mask").classList.add("aui-mask-out");
if (document.querySelector(".aui-dialog")) {
document.querySelector(".aui-dialog").addEventListener("webkitTransitionEnd", function(){
self.remove();
})
document.querySelector(".aui-dialog").addEventListener("transitionend", function(){
self.remove();
})
}
}
},
remove: function(){
if(document.querySelector(".aui-dialog"))document.querySelector(".aui-dialog").parentNode.removeChild(document.querySelector(".aui-dialog"));
if(document.querySelector(".aui-mask")){
document.querySelector(".aui-mask").classList.remove("aui-mask-out");
}
return true;
},
alert: function(params,callback){
var self = this;
return self.create(params,callback);
},
prompt:function(params,callback){
var self = this;
params.input = true;
return self.create(params,callback);
}
};
window.auiDialog = auiDialog;
})(window);
方法论:
掌握js的本质,才能灵活的改造插件。
相关文章推荐
- springCloud分布式事务实战(九)改造ThemeMicroService 支持分布式事务
- vc中关闭对话框dialog
- PaginationJS改造支持实时更新分页信息
- 此版本的 SQL Server 不支持用户实例登录标志。该连接将关闭“的解决
- ligerDialog 弹窗关闭无法获取焦点
- dwz 页面上关闭dialog弹出层,navTab 界面方式。
- Oracle将关闭Metalink支持网站?
- Android Dialog库内置Dialog以及各种动画.支持自定义Dialog和动画
- 解决“此版本的 SQL Server 不支持用户实例登录标志。该连接将关闭”问题
- window.showModalDialog后台关闭问题
- 1. 遥控器-华科尔Devo7e 改造成为支持 dsm2/dsmx 的多制式遥控器
- Android实现点击AlertDialog上按钮时不关闭对话框的方法
- opencl:改造C++接口增加对内存编译(compile)的支持
- Activity使用Dialog样式导致点击空白处自动关闭的问题
- android自定义dialog中点击listview的item事件关闭dialog
- java封装FFmpeg命令,支持原生ffmpeg全部命令,实现FFmpeg多进程处理与多线程输出控制(开启、关闭、查询),rtsp/rtmp推流、拉流
- Android Dialog点击按钮不关闭对话框
- android再按一次关闭dialog
- Android: 创建一个AlertDialog对话框,必须按确定或取消按钮才能关闭对话框,禁止按[返回键]或[搜索键]关闭
- AlertDialog通过反射机制阻止Dialog关闭