aui-dialog改造,支持关闭
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的本质,才能灵活的改造插件。
aui-dialog改造,支持关闭的更多相关文章
- Lightbox改造——支持滚轮缩放
在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件.配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放 ...
- easyui框架中关于dialog自带关闭事件的使用
easyui是一个开源的第三方控件库,虽然使用比较方便,但其中有些事件和样式会与其他的控件或者框架形成冲突. 今天谈一下easyui 中dialog这个控件(对话框) easyui dialog一般在 ...
- pinpoint改造支持查询
原架构 改造后架构
- element UI dialog 固定高度 且关闭时清空数据
解决方法:在dialog里写一个div ,div的大小设置为相对视窗的大小就行 <el-dialog title="xxx" :visible.sync="dial ...
- JQuery中的dialog使用介绍
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
- jQuery UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
随机推荐
- web移动端-弹性盒模型
(父元素加) : /*新版弹性盒模型*/ /* display: flex; */ /*设置主轴方向为水平方向*/ /* flex-direction: row; */ /*设置主轴方向为垂直方向*/ ...
- luogu P2137 Gty的妹子树(分块,主席树)
询问的化我们可以建主席树.然后修改?,树套树...,最后插入?炸了. 所以我们对操作进行分块. 我们先对整棵树建一个主席树.修改,插入我们先记录下来.然后询问的时候先对主席树查询,然后暴力遍历我们记录 ...
- 别了WindowsXP
生命中有太多的迎来送往,今日全世界都在告别它. 虽然自己已经在很久之前没有用XP系统了.告别它不如在一定意义上告别自己的一段时光... 2001年个人第一台电脑...初次安装XP,两张光盘一张安装盘一 ...
- Kneser猜想与相关推广
本文本来是想放在Borsuk-Ulam定理的应用这篇文章当中.但是这个文章实在是太长,导致有喧宾夺主之嫌,从而独立出为一篇文章,仅供参考.$\newcommand{\di}{\mathrm{dist} ...
- 【BZOJ 1452】 [JSOI2009]Count
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 维护一百个二维树状数组. 二维区间求和. [代码] #include <bits/stdc++.h> #define L ...
- mysql-幻读及其例子
第一步建表并插入5条记录: 接下来我们看下大部分mysql所说的幻读现象: 事务1(开启事务查询发现没有记录6准备插入): 事务2(开启事务,发现没有记录6插入,并提交事务): 事务1:查询发现 ...
- struts2 异常页面乱码问题
在 struts.xml 或者 struts.properties 文件里添加 <constant name="struts.locale" value="zh_C ...
- poj_1195Mobile phones,二维树状数组
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- litepal更好的操作sqlite3,配置与基本操作
litepal更好的操作sqlite3 配置 在app下的build.gradle中加入 创建litepal.xml配置 在app/src/main下面创建assets,新建litepal.xml & ...
- zzulioj--1828-- 贪心的小猫咪(贪心模拟)
1828: 贪心的小猫咪 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 14 Solved: 4 SubmitStatusWeb Board Des ...