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/group-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/group-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/group-manager.js"></script>
……
/@menuConfig>
janela de diálogo html :
<div id = "addNewGroupWin" class = "capsule-win show">
<div class = "cápsula-win-top" title = "Adicionar centro de distribuição"><span>Adicionar centro de distribuição</span></div>
<div class = "cápsula-win-centro">
<div class = "cápsula-item" id = "oldDevSearch">
<div class = "item-esquerda input_required" >Nome</div>
<div class = "item-right">
<input id = "newGroupName" class = "sc_validate" title = "Nome do centro de distribuição" type="text" placeholder="Por favor, insira o nome do centro de distribuição" scvalidate='{"required":true,"format":"string"}'/>
/div>
/div>
<div class = "cápsula-item">
<div class = "item-esquerda input_required">Longitude</div>
<div class = "item-right">
<input id = "newGroupLng" class = "sc_validate" title= "Longitude do centro de distribuição" type="text" placeholder="Por favor, insira 0-180 do número" scvalidate='{"required":true,"format":"lng"}'/>
/div>
/div>
<div class = "cápsula-item">
<div class = "item-esquerda input_required">Latitude</div>
<div class = "item-right">
<input id = "newGroupLat" class = "sc_validate" title = "Latitude do centro de distribuição" type="text" placeholder="Por favor, insira 0-90 do número" scvalidate='{"required":true,"format":"lat"}'/>
/div>
/div>
<div class = "cápsula-item" id = "processSNOLDIV">
<div class = "item-esquerda input_required">Descrição</div>
<div class = "item-right">
<textarea id = "newGroupDesc" class = "sc_validate" title = "Descrição do centro de distribuição" scvalidate='{"required":true,"format":"string"}'></textarea>
/div>
/div>
/div>
<div class = "cápsula-win-inferior">
<input id="addNewGroupSure" class = "botão-centro inferior ajustado botão-sucesso" type="button" value="Confirmar"/>
<input id="addNewGroupCancle" class = "botão-botão inferior-cancelar" type="button" value="Cancelar"/>
/div>
/div>
2.camadas filha e pai precisam incluir layer.js
3.js camada filha
/**
* <gerenciamento de centro de distribuição>
* Adicionar centro de distribuição
*
* Data : 2016/10/19
*/
;(function($,w,document,undefined){
$(document).ready(function(){
validatorInit();
clickEventBind();
});
var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";
/**
* inicialização de validação de formulário
* @returns
*/
function validatorInit(){
addGroupValidator.init(function(obj, msg){
layer.tips(msg,obj,{
estilo: ['fundo-cor:#78BA32; cor:#fff', '#78BA32'],
largura Máxima:185,
tempo: 2000,
dicas: 1,
});
});
}
/**
* ligação de eventos de clique
* @returns
*/
function clickEventBind(){
addNewGroupClick();
}
/**
* eventos de clique relacionados ao centro de distribuição
* @returns
*/
function addNewGroupClick(){
$("#addNewGroupSure").click(function(){
addNewGroupSure();
});
$("#addNewGroupCancle").click(function(){
addNewGroupCancle();
});
}
/**
* adicionar novo centro de divisão [confirmar]
* @returns
*/
function addNewGroupSure() {
validatorInput();
}
/**
* adicionar centro de divisão [cancelar]
*/
function addNewGroupCancle() {
closeLayerWin();
}
/**
* fechar a janela de pop-up layer aberta atualmente
*/
function closeLayerWin() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //executar novamente o fechamento
}
/**
* verificação de entrada de envio de formulário
*/
function validatorInput() {
/**
* verificação 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("A lista de centros de divisão foi atualizada!");
}
});
$.ajaxSettings.async = true ;
closeLayerWin();
}
})(jQuery, window, document);
4.js da camada pai
$("#addGroup").click(function() {
layer.config({
path : '${contextPath}',/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px],
fix: false, //não fixo
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
});
loadGroupCenterInfo: método da camada pai js, chamado pelo método da camada pai ao fechar a janela de pop-up layer para atualizar a lista de centros de divisão
5.A camada pai da janela de pop-up aqui não pode sair do iframe aninhado na página pai, devido à operação de carregar o centro de divisão loadGroupCenterInfo, que contém a reativação do evento de clique clickEventInit, que não é global, não pode ser passado para a página pai por meio de end para ser executado novamente
/**
* carregar centro de divisão
*/
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 ;
}
Portanto: quando a função de callback envolve chamadas entre funções da camada atual, não é possível usar a caixa de diálogo externa comum do layer, apenas pode ser reimportada o módulo layer no JavaScript da página atual
[Apos descobrir, na verdade, é possível, basta escrever a função de callback diretamente no método de chamada, consulte: JavaScript - métodos de chamada de função e chamada de métodos de iframe da página pai]
layer.config({
path : '${contextPath}',/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px],
fix: false, //não fixo
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
6.通用弹窗样式css
@charset "utf-8";
/*-------功能性按钮------*/
body,html{
largura:100%;
altura:100%;
margin:0px;
padding:0px;
}
.capsule-btn {
altura: 40px;
largura: 50px;
background-color: #5093e1;
border: 0;
borda-radius: 2px;
color: #fff;
margem: 15px 0px 10px 15px;
float: left;
}
/*----------------------------------------- 弹框按钮 -------------------------------------*/
.capsule-win .btn-bottom{width: 100px; height: 40px; background-color: #4f94e0; font-size: 16px; border: none; color: #fff; -moz-borda-radius: 3px; -khtml-borda-radius: 3px; -webkit-borda-radius: 3px; border-radius: 3px;
cursor: pointer; margin-right: 10px;margin-top: 10px;}
.centerfix{margin-left: 30%;}
.btn-cancel {background-color: #f5f5f5 !important; border: 1px #c2c2c2 solid !important;; color: #333 !important;}
.btn-succ {background-color: #1abd9b;}
.btn-warn {background-color: #ec962f;}
/*------------弹窗---------------*/
.capsule-win {
largura: 100%;
min-altura: 100%;
-moz-borda-radius: 5px;
-khtml-borda-radius: 5px;
-webkit-borda-radius: 5px;
background-color: #fff;
display: none;
position: fixed;
}
.capsule-win-top {
largura: 100%;
altura: 50px;
background-color: #4f94e0;
line-altura: 50px;
color: #fff;
font-size: 16px;
}
.capsule-win-center {
largura: 100%;
min-altura: 250px;
preenchimento: 20px 0px 20px 0px;
margin:0px 1px 0px 1px;
}
.capsule-win-bottom {
largura: 100%;
altura: 60px;
background-color: #ececec;
padding: 0px;
position: fixed;
inferior: 1px;
}
.capsule-win-centro .capsule-item {
altura: 50px !important;
largura: 100%;
margin: 0px 2px 0px 2px;
padding: 0px;
}
.capsule-win-centro .capsule-item .item-left {
largura: 100px;
texto-align: right;
margem: 10px 0px 0px 0px;
float:left;
}
.capsule-win-centro .capsule-item .item-right {
largura: 400px;
float:right;
}
.capsule-win-centro .capsule-item .item-right input[type=text]{
largura:75%;
altura: 35px;
}
.capsule-win-centro .capsule-item .item-direita input[type=checkbox]{
largura:20px;
marin:2px -5px 2px 0px;
preenchimento:10px;
}
.capsule-win-centro .capsule-item .item-direita textarea{
largura:75%;
altura:50px;
margem-inferior: 10px;
transbordamento-y:auto;
}
.capsule-win-centro .capsule-item .item-direita select{
largura:90%;
}
.hide{
exibir: nenhum;
}
.show{
exibir: bloco;
}
.capsule-win-centro .capsule-item-table{
largura: 445px;
altura: 120px;
margem: 5px 10px 0px 75px;
transbordamento-y:auto;
}
.capsule-win-centro .capsule-item-table table{
borda-colapsar:colapsar;
largura:100%;
}
.capsule-win-centro .capsule-item-table table,th, td{
borda: 1px sólido #ccc;
}
.capsule-win-centro .capsule-item-table th{
altura:30px;
texto-alinhamento: centro;
}
.capsule-win-centro .capsule-item-table td{
texto-alinhamento: centro;
}
.capsule-win-centro .capsule-item-table input[type=text] {
largura:100% !important;
}
.textCenter {
texto-alinhamento: centro;
}
.capsule-win-top span {
margem : 10px;
}
Efeito final:
Isso é o conteúdo completo deste artigo, esperamos que ajude no seu aprendizado e que você apoie o Tutorial Yell.
Declaração: O conteúdo deste artigo foi extraído da internet, pertence ao respectivo proprietário, foi carregado pelos usuários da internet de forma voluntária, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w3Aviso: Este conteúdo foi extraído da internet, pertence ao respectivo proprietário, foi carregado pelos usuários da internet de forma voluntária, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w