English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Obiettivo: In molti dialoghi del progetto XXXX sono stati utilizzati etichette web di freemarker per implementare le finestre di dialogo web, che semplicemente mostrano il div nascosto, il che può rallentare la velocità di pre-caricamento della pagina, aumentando il tempo di caricamento e risposta della pagina
Soluzione: <ad esempio, il meccanismo di implementazione del dialogo di aggiunta di un centro di gestione secondario già gestito centralmente>
1. Estrazione del codice HTML e CSS della parte della pagina di dialogo
html : html/configure/layer-win/_group-add-layer.html
css: css/common/componnentWin.css <Stile comune delle finestre personalizzate> <Stile personalizzato>
Livello inferiore html: _group-add-layer.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Aggiungi gruppo</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/configure/layer-win/group-new-add.js"></script> <script type="text/javascript"> </script> </html>
Livello superiore html: group-manager.html
<#include "/html/config/configure.html"/>
<@menuConfig likey="stationGroup">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/configure/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/configure/group-manager.js"></script>
·····
</@menuConfig>
Finestra di dialogo generica html :
<div id = "addNewGroupWin" class = "capsule-win show">
<div class = "capsule-win-top" title = "Aggiungi centro di servizio"><span>Aggiungi centro di servizio</span></div>
<div class = "capsule-win-center">
<div class = "capsule-item" id = "oldDevSearch">
<div class = "item-left input_required" >Nome</div>
<div class = "item-right">
<input id = "newGroupName" class = "sc_validate" title = "Nome del centro di servizio" type="text" placeholder="Inserisci il nome del centro di servizio" scvalidate='{"required":true,"format":"string"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">Longitudine</div>
<div class = "item-right">
<input id = "newGroupLng" class = "sc_validate" title= "Longitudine del centro secondario" type="text" placeholder="Inserisci un numero tra 0 e 180" scvalidate='{"required":true,"format":"lng"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">Latitudine</div>
<div class = "item-right">
<input id = "newGroupLat" class = "sc_validate" title = "Latitudine del centro secondario" type="text" placeholder="Inserisci un numero tra 0 e 90" scvalidate='{"required":true,"format":"lat"}'/>
</div>
</div>
<div class = "capsule-item" id = "processSNOLDIV">
<div class = "item-left input_required">Descrizione</div>
<div class = "item-right">
<textarea id = "newGroupDesc" class = "sc_validate" title = "Descrizione del centro secondario"></textarea>
</div>
</div>
</div>
<div class = "capsule-win-bottom">
<input id="addNewGroupSure" class = "btn-bottom centerfix btn-succ" type="button" value="Conferma"/>
<input id="addNewGroupCancle" class = "btn-bottom btn-cancel" type="button" value="Annulla"/>
</div>
</div>
2. Entrambi i livelli devono includere layer.js
3. js sottostante
/**
* <Gestione centro secondario>
* Aggiungi centro secondario
* Author : Yiyuery
* Date : 2016/10/19
*/
;(function($,w,document,undefined){
$(document).ready(function(){
validatorInit();
clickEventBind();
});
var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";
/**
* Inizializzazione della verifica del modulo
* @returns
*/
function validatorInit(){
addGroupValidator.init(function(obj, msg){
layer.tips(msg,obj,{
style: ['background-color:#78BA32; color:#fff', '#78BA32'],
maxWidth:185,
time: 2000,
tips: 1,
});
});
}
/**
* Bind degli eventi di click
* @returns
*/
function clickEventBind(){
addNewGroupClick();
}
/**
* Eventi di click relativi al centro secondario
* @returns
*/
function addNewGroupClick(){
$("#addNewGroupSure").click(function(){
addNewGroupSure();
});
$("#addNewGroupCancle").click(function(){
addNewGroupCancle();
});
}
/**
* Aggiungi nuovo centro secondario [Conferma]
* @returns
*/
function addNewGroupSure(){
validatorInput();
}
/**
* Aggiungi centro secondario [Annulla]
*/
function addNewGroupCancle(){
closeLayerWin();
}
/**
* Chiudi la finestra layer aperta corrente
*/
function closeLayerWin(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); // Chiudi di nuovo
}
/**
* Verifica dell'input per il submit del modulo
*/
function validatorInput(){
/**
* Verifica dell'input
*/
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("Aggiornamento dell'elenco dei centri secondari!");
}
});
$.ajaxSettings.async = true ;
closeLayerWin();
}
})(jQuery, window, document);
4. Livello superiore js
$("#addGroup").click(function() {
layer.config({
path: '${contextPath}/js/lib/layer'
});
index = layer.open({
type: 2,
area: ['520 px', '400 px'],
fix: false, // not fixed
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
content: capsule.request.path.groupMan.layer.groupManAddLayerShow,
end: function() {
loadGroupCenterInfo();
}
});
});
loadGroupCenterInfo: metodo js del livello superiore, chiamato quando si chiude la finestra a scheda per aggiornare l'elenco dei centri secondari
5. Livello superiore della finestra a scheda: Ecco che non è possibile uscire dal frame incorporato della pagina superiore qui, poiché l'operazione di aggiunta del centro secondario loadGroupCenterInfo contiene un evento di click riattivato, il metodo non è globale e non può essere invocato di nuovo dalla pagina superiore utilizzando end
/**
* Carica il centro secondario
*/
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;
se (obj.c_num == null || obj.c_num == "null") {
}
+ '<img class="checkBoxLeftSite" src="'+contextPath+'/image/Checkbox.png"/>'+obj.group_name+"(
$("#groupCenterArea").append(html);
});
clickEventInit();
});
$.ajaxSettings.async = true ;
}
Therefore: when the callback function involves mutual calls of functions in the current layer, it is impossible to implement with the general layer outermost popup, and can only be re-modularized and introduced layer in the js of the current page
[Later found, in fact, it is possible, just need to write the callback function directly in the calling method, see: method callback in JavaScript and method call of parent page Iframe]
layer.config({
path: '${contextPath}/js/lib/layer'
});
index = layer.open({
type: 2,
area: ['520 px', '400 px'],
fix: false, // not fixed
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
content: capsule.request.path.groupMan.layer.groupManAddLayerShow,
end: function() {
loadGroupCenterInfo();
}
});
6. General popup style css
@charset "utf-8";
/*-------functional button------*/
body, html {
width: 100%;
height: 100%;
margin: 0 px;
padding: 0 px;
}
.capsule-btn {
height: 40 px;
width: 50 px;
background-color: #5093e1;
border: 0;
border-radius: 2 px;
colore: #fff;
margine: 15px 0px 10px 15px;
flottante: sinistro;
}
/*----------------------------------------- pulsante finestra a scomparsa -------------------------------------*/
.capsule-win .btn-bottom{larghezza: 100px; altezza: 40px; colore di sfondo: #4f94e0; dimensione del carattere: 16px; bordo: none; colore: #fff; -moz-radius-bordo: 3px; -khtml-radius-bordo: 3px; -webkit-radius-bordo: 3px; bordo-radius: 3px;
curSOR: puntatore; margine destro: 10px; margine alto: 10px;}
.centerfix{margine sinistro: 30%;}
.btn-cancel {colore di sfondo: #f5f5f5 !important; bordo: 1px #c2c2c2 solido !important;; colore: #333 !important;}
.btn-succ {colore di sfondo: #1abd9b;}
.btn-warn {colore di sfondo: #ec962f;}
/*------------ finestra a scomparsa ------------*/
.capsule-win {
larghezza: 100%;
min-altezza: 100%;
-moz-radius-bordo: 5px;
-khtml-radius-bordo: 5px;
-webkit-radius-bordo: 5px;
colore di sfondo: #fff;
display: none;
posizione: fisso;
}
.capsule-win-top {
larghezza: 100%;
altezza: 50px;
colore di sfondo: #4f94e0;
linea di base: 50px;
colore: #fff;
font-size: 16px;
}
.capsule-win-center {
larghezza: 100%;
min-altezza: 250px;
spaziatura: 20px 0px 20px 0px;
margine:0px 1px 0px 1px;
}
.capsule-win-bottom {
larghezza: 100%;
altezza: 60px;
colore-sfondo: #ececec;
spaziatura: 0px;
posizione: fisso;
inferiore: 1px;
}
.capsule-win-center .capsule-item {
altezza: 50px !importante;
larghezza: 100%;
margine: 0px 2px 0px 2px;
spaziatura: 0px;
}
.capsule-win-center .capsule-item .item-left {
larghezza: 100px;
allineamento-testo: destra;
margine: 10px 0px 0px 0px;
flottante: sinistra;
}
.capsule-win-center .capsule-item .item-right {
larghezza: 400px;
flottante: destra;
}
.capsule-win-center .capsule-item .item-right input[type=text]{
larghezza: 75%;
altezza: 35px;
}
.capsule-win-center .capsule-item .item-right input[type=checkbox]{
larghezza: 20px;
margine: 2px -5px 2px 0px;
spaziatura: 10px;
}
.capsule-win-center .capsule-item .item-right textarea{
larghezza: 75%;
altezza: 50px;
margin-basso: 10px;
overflow-y: auto;
}
.capsule-win-center .capsule-item .item-right select{
larghezza: 90%;
}
.hide{
display: none;
}
.show{
display: block;
}
.capsule-win-center .capsule-item-table{
larghezza: 445px;
altezza: 120px;
margin: 5px 10px 0px 75px;
overflow-y: auto;
}
.capsule-win-center .capsule-item-table table{
border-collapse: collapse;
width: 100%;
}
.capsule-win-center .capsule-item-table table, th, td{
border: 1px solid #ccc;
}
.capsule-win-center .capsule-item-table th{
height: 30px;
text-align: center;
}
.capsule-win-center .capsule-item-table td{
text-align: center;
}
.capsule-win-center .capsule-item-table input[type=text] {
width: 100% !important;
}
.textCenter {
text-align: center;
}
.capsule-win-top span {
margin: 10px;
}
Effetto finale:
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, è di proprietà dei rispettivi autori, il contenuto è stato contribuito e caricato dagli utenti di Internet, questo sito non possiede i diritti di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente i contenuti sospetti di copyright.