English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
目的：XXXX项目中，很多的弹窗是利用freemarker的网页标签追加的形式实现的，网页弹框只是将隐藏的div显示出来，这样会使网页在预加载时速度变慢，增加页面加载和响应时间
解决方法如下：<已分中心管理的添加分中心弹框实现机制为例>
1.弹框页面部分的html代码和css抽离
html : html/configurar/layer-win/_group-add-layer.html
css : css/common/componnentWin.css <自定义弹窗通用样式>
子层html: _group-add-layer.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>group Add</title> /head> <link rel="stylesheet" type="text/css" href="../../../js/lib/datePicker/skin/WdatePicker.css" /> <link rel="stylesheet" type="text/css" href="../../../css/common/componnentWin.css" /> <body> ···· /body> <script type="text/javascript" src="../../../js/jquery-1.9.1.js"></script> <script type="text/javascript" src="../../../js/lib/layer/layer.js"></script> <script type="text/javascript" src="../../../js/scooper/scooper.tool.xiacy.js"></script> <script type="text/javascript" src="../../../js/configurar/layer-win/grupo-new-add.js"></script> <script type="text/javascript"> /script> /html>
父层html : group-manager.html
<#include "/html/config/configure.html"/>
<@menuConfig likey="stationGroup">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/configurar/grupo-manager.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/lib/userLibs/page-plugin.css">
<script type="text/javascript" src="${contextPath}"}}/js/lib/layer/layer.js"></script>
<script type="text/javascript" src="${contextPath}"}}/js/lib/userLibs/page-load.js"></script>
<script type="text/javascript" src="${contextPath}"}}/js/scooper/scooper.tool.xiacy.js"></script>
<script type="text/javascript" src="${contextPath}"}}/js/configurar/grupo-manager.js"></script>
……
/@menuConfig>
ventana común html :
<div id = "addNewGroupWin" class = "capsule-ventana mostrar">
<div clase = "capsule-win-arriba" title = "Agregar centro de división"><span>Agregar centro de división</span></div>
<div clase = "capsule-win-centro">
<div clase = "capsule-item" id = "oldDevSearch">
<div class = "item-izquierda input_required" >Nombre</div>
<div class = "item-right">
<input id = "newGroupName" class = "sc_validate" title = "Nombre del centro de división" type="text" placeholder="Por favor, ingrese el nombre del centro de división" scvalidate='{"required":true,"format":"string"}'/>
/div>
/div>
<div clase = "capsule-item">
<div class = "item-izquierda input_required">Longitud</div>
<div class = "item-right">
<input id = "newGroupLng" class = "sc_validate" title= "Longitud del centro de división" type="text" placeholder="Por favor, ingrese 0-18número" scvalidate='{"required":true,"format":"lng"}'/>
/div>
/div>
<div clase = "capsule-item">
<div class = "item-izquierda input_required">Latitud</div>
<div class = "item-right">
<input id = "newGroupLat" class = "sc_validate" title = "Latitud del centro de división" type="text" placeholder="Por favor, ingrese 0-9número" scvalidate='{"required":true,"format":"lat"}'/>
/div>
/div>
<div clase = "capsule-item" id = "processSNOLDIV">
<div class = "item-izquierda input_required">Descripción</div>
<div class = "item-right">
<textarea id = "newGroupDesc" class = "sc_validate" title = "Descripción del centro de división" scvalidate='{"required":true,"format":"string"}'></textarea>
/div>
/div>
/div>
<div clase = "capsule-win-inferior">
<input id="addNewGroupSure" clase = "botón-centro inferior fijo botón-succ" tipo="botón" valor="aceptar"/>
<input id="addNewGroupCancle" clase = "botón-botón inferior-cancelar" tipo="botón" valor="cancelar"/>
/div>
/div>
2.ambos niveles necesitan incluir layer.js
3.js subnivel
/**
* <Gestión de centro de división>
* Agregar centro de división
*
* Fecha : 2016/10/19
*/
;(function($,w,document,undefined){
$(document).ready(function(){
validatorInit();
clickEventBind();
});
var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";
/**
* inicialización de validación de formulario
* @returns
*/
function validatorInit(){
addGroupValidator.init(function(obj, msg){
layer.tips(msg,obj,{
estilo: ['fondo-color:#78BA32; color:#fff', '#78BA32'],
ancho Máximo:185,
tiempo: 2000,
consejos: 1,
});
});
}
/**
* ligadura de eventos de clic
* @returns
*/
function clickEventBind(){
addNewGroupClick();
}
/**
* evento de clic relacionado con el centro de división
* @returns
*/
function addNewGroupClick(){
$("#addNewGroupSure").click(function(){
addNewGroupSure();
});
$("#addNewGroupCancle").click(function(){
addNewGroupCancle();
});
}
/**
* Agregar nuevo centro de división [Aceptar]
* @returns
*/
function addNewGroupSure(){
validatorInput();
}
/**
* Agregar centro de división [Cancelar]
*/
function addNewGroupCancle(){
closeLayerWin();
}
/**
* Cerrar la ventana emergente layer abierta actualmente
*/
function closeLayerWin(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //Luego cerrar
}
/**
* Validación de entrada de envío de formulario
*/
function validatorInput(){
/**
* Validación de entrada
*/
if(!addGroupValidator.validate("addNewGroupWin")){
return;
}
var paras = {
"group_name" : $("#newGroupName").val(),
"longitude" : $("#newGroupLng").val(),
"latitude" : $("#newGroupLat").val(),
"group_desc" : $("#newGroupDesc").val(),
});
$.ajaxSettings.async = false ;
$.getJSON(contextPath+"/stationGroup/add", paras, function(resp){
if(resp.code !=undefined && resp.code == 0){
console.log("¡Lista de centros de división actualizada!");
}
});
$.ajaxSettings.async = true ;
closeLayerWin();
}
})(jQuery,window,document);
4.js del nivel superior
$("#addGroup").click(function(){
layer.config({
path : '${contextPath}/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //no fixed
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
内容:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
});
loadGroupCenterInfo : método del nivel superior js, llamado método del nivel superior al cerrar la ventana emergente layer para actualizar la lista del centro de división
5.La ventana emergente de nivel superior layer aquí no puede salir del iframe anidado en la página superior, ya que la operación de carga del centro de división loadGroupCenterInfo, contiene la reactivación del evento de clic clickEventInit, que no es global, no se puede pasar al padre página mediante end para ejecutar nuevamente
/**
* Carga del centro de división
*/
function loadGroupCenterInfo(){
$.ajaxSettings.async = false ;
$.getJSON(capsule.request.path.groupMan.getJson.loadCenterGroup,{},function(data){
$("#groupCenterArea").empty();
$.each(data.list,function(i,obj){
groupMap.setKeyValue(obj.id,obj.group_name);
var count = obj.c_num;
if(obj.c_num == null || obj.c_num == "null"){
count = 0;
}
var html = '<div class="groupItemDiv" id='+obj.id+
+ '<img class="checkBoxLeftSite" src="'+contextPath+'/image/Checkbox.png"/'>+obj.group_name+"("+count+)")+'<li title="[#1#]" class="editGroup"></li></div>';
$("#groupCenterArea").append(html);
});
clickEventInit();
});
$.ajaxSettings.async = true ;
}
Therefore: when the callback function involves mutual calls of functions within the current layer, it is impossible to implement it using the general layer outermost pop-up box, but only re-modularize and introduce layer in the js of the current page
[Later I found out that it is actually possible, you just need to write the callback function directly in the calling method, see: method callback in JavaScript and the method call of the parent page Iframe]
layer.config({
path : '${contextPath}/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //no fixed
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
内容:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
6.通用弹出窗口样式css
@charset "utf-8";
/*-------功能按钮------*/
body,html{
ancho:100%;
altura:100%;
margin:0px;
padding:0px;
}
.capsule-btn {
altura: 40px;
ancho: 50px;
background-color: #5093e1;
border: 0;
borde-radius: 2px;
color: #fff;
margen: 15px 0px 10px 15px;
float: left;
}
/*----------------------------------------- 弹出框按钮 -------------------------------------*/
.capsule-win .btn-底部{宽度 100px; 高度 40px; 背景图-color: #4f94e0; 字体-size: 16px; border: none; color: #fff; -moz-borde-radius: 3px; -khtml-borde-radius: 3px; -webkit-borde-radius: 3px; border-radius: 3px;
cursor: pointer; margin-right: 10px;margin-top: 10px;}
.centerfix{margin-left: 30%;}
.btn-取消 {背景-color: #f5f5f5 !important; border: 1px #c2c2c2 solid !important;; color: #333 !important;}
.btn-成功 {背景-color: #1abd9b;}
.btn-警告 {背景-color: #ec962f;}
/*------------弹出窗口---------------*/
.capsule-win {
ancho: 100%;
min-altura: 100%;
-moz-borde-radius: 5px;
-khtml-borde-radius: 5px;
-webkit-borde-radius: 5px;
background-color: #fff;
display: none;
position: fixed;
}
.capsule-win-top {
ancho: 100%;
altura: 50px;
background-color: #4f94e0;
line-altura: 50px;
color: #fff;
font-size: 16px;
}
.capsule-win-center {
ancho: 100%;
min-altura: 250px;
relleno: 20px 0px 20px 0px;
margin:0px 1px 0px 1px;
}
.capsule-win-bottom {
ancho: 100%;
altura: 60px;
background-color: #ececec;
padding: 0px;
position: fixed;
inferior: 1px;
}
.capsule-win-centro .capsule-item {
altura: 50px !important;
ancho: 100%;
margin: 0px 2px 0px 2px;
padding: 0px;
}
.capsule-win-centro .capsule-elemento .elemento-left {
ancho: 100px;
texto-align: right;
margen: 10px 0px 0px 0px;
float:left;
}
.capsule-win-centro .capsule-elemento .elemento-right {
ancho: 400px;
float:right;
}
.capsule-win-centro .capsule-elemento .elemento-right input[type=text]{
ancho:75%;
altura: 35px;
}
.capsule-win-centro .capsule-elemento .elemento-derecho input[type=checkbox]{
ancho:20px;
marin:2px -5px 2px 0px;
relleno:10px;
}
.capsule-win-centro .capsule-elemento .elemento-derecho textarea{
ancho:75%;
altura:50px;
margen-inferior: 10px;
desbordamiento-y:auto;
}
.capsule-win-centro .capsule-elemento .elemento-derecho select{
ancho:90%;
}
.hide{
mostrar: none;
}
.show{
mostrar: bloque;
}
.capsule-win-centro .capsule-elemento-tabla{
ancho: 445px;
altura: 120px;
margen: 5px 10px 0px 75px;
desbordamiento-y:auto;
}
.capsule-win-centro .capsule-elemento-tabla tabla{
borde-colapsar:colapsar;
ancho:100%;
}
.capsule-win-centro .capsule-elemento-tabla tabla,th, td{
borde: 1px sólido #ccc;
}
.capsule-win-centro .capsule-elemento-tabla th{
altura:30px;
texto-alineación: centro;
}
.capsule-win-centro .capsule-elemento-tabla td{
texto-alineación: centro;
}
.capsule-win-centro .capsule-elemento-tabla input[type=text] {
ancho:100% !important;
}
.textCenter {
texto-alineación: centro;
}
.capsule-win-top span {
margen : 10px;
}
Efecto final:
Esto es todo el contenido del artículo, espero que sea útil para su aprendizaje y que todos apoyen a la教程.
Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, se ha cargado de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por ellas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w3Aviso: Por favor, reemplace # por @ al enviar un correo electrónico para denunciar y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.