English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Цель: В проекте XXXX многие диалоговые окна реализованы с использованием веб-тегов Freemarker, которые добавляют веб-диалоги, просто показывая скрытые div, что может замедлить загрузку веб-страницы при предварительной загрузке и увеличить время загрузки и отклика страницы
Решение проблемы: <например, механизм добавления дополнительных центров управления через диалоговое окно>
1. Изолировать html-код и css-стили для части страницы диалогового окна
html : html/configure/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/configure/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/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>
Общий диалог html :
<div id = "addNewGroupWin" class = "capsule-win show">
<div class = "capsule-win-top" title = "Добавить центр разделения"><span>Добавить центр разделения</span></div>
<div class = "capsule-win-center">
<div class = "capsule-item" id = "oldDevSearch">
<div class = "item-left input_required" >Название</div>
<div class = "item-right">
<input id = "newGroupName" class = "sc_validate" title = "Название центра разделения" type="text" placeholder="Введите название центра разделения" scvalidate='{"required":true,"format":"string"}'>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">Долгота</div>
<div class = "item-right">
<input id = "newGroupLng" class = "sc_validate" title= "Долгота раздела" type="text" placeholder="Введите число от 0 до 180" scvalidate='{"required":true,"format":"lng"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">Широта</div>
<div class = "item-right">
<input id = "newGroupLat" class = "sc_validate" title = "Широта раздела" type="text" placeholder="Введите число от 0 до 90" scvalidate='{"required":true,"format":"lat"}'/>
</div>
</div>
<div class = "capsule-item" id = "processSNOLDIV">
<div class = "item-left input_required">Описание</div>
<div class = "item-right">
<textarea id = "newGroupDesc" class = "sc_validate" title = "Описание раздела" scvalidate='{"required":true,"format":"string"}'></textarea>
</div>
</div>
</div>
<div class = "capsule-win-bottom">
<input id="addNewGroupSure" class = "btn-bottom centerfix btn-succ" type="button" value="Подтвердить"/>
<input id="addNewGroupCancle" class = "btn-bottom btn-cancel" type="button" value="Отменить"/>
</div>
</div>
2. layer.js необходим для как подуровня, так и родительского уровня
3. JavaScript для подуровня
/**
* <Управление региональными центрами>
* Добавить региональный центр
* Author : Yiyuery
* Date : 2016/10/19
*/
;(function($,w,document,undefined){
$(document).ready(function(){
validatorInit();
clickEventBind();
});
var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";
/**
* Инициализация проверки формы
* @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,
});
});
}
/**
* Привязка событий клика
* @returns
*/
function clickEventBind(){
addNewGroupClick();
}
/**
* События клика по региональному центру
* @returns
*/
function addNewGroupClick(){
$("#addNewGroupSure").click(function(){
addNewGroupSure();
});
$("#addNewGroupCancle").click(function(){
addNewGroupCancle();
});
}
/**
* Добавить новый региональный центр [Подтвердить]
* @returns
*/
function addNewGroupSure(){
validatorInput();
}
/**
* Добавить региональный центр [Отмена]
*/
function addNewGroupCancle(){
closeLayerWin();
}
/**
* Закрыть текущее открытое окно layer
*/
function closeLayerWin(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); // Повторное выполнение закрытия
}
/**
* Проверка ввода при отправке формы
*/
function validatorInput(){
/**
* Проверка ввода
*/
если(!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){
если(resp.code !=undefined && resp.code == 0){
console.log("Обновление списка подцентров!");
}
});
$.ajaxSettings.async = true ;
closeLayerWin();
}
})(jQuery,window,document);
4. Уровень родительского js
$("#addGroup").click(function(){
layer.config({
path : '${contextPath}/js/lib/layer'
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
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 : метод родительского js, вызываемый при закрытии layer pop-up для обновления списка подцентров
5. Уровень родительского слоя layer pop-up здесь не может выйти из родительской страницы, содержащей iframe, поскольку операция добавления подцентра loadGroupCenterInfo, содержащаяся в ней, активирует метод clickEventInit, который не является глобальным, и не может быть передан через end для выполнения снова в родительской странице
/**
* Загрузка подцентра
*/
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;
если(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 ;
}
因此:当回调函数涉及当前层的函数互相调用时，是无法使用通用layer最外层弹框来实现的，只能在当前页面的js中重新模块化引入layer
[后来发现，其实是可以的，只需要将回调函数直接写在调用方法中即可，参见：javascript中的方法回调和父页面Iframe的方法调用]
layer.config({
path : '${contextPath}/js/lib/layer'
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
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:0px;
padding:0px;
}
.capsule-btn {
height: 40px;
width: 50px;
background-color: #5093e1;
border: 0;
border-radius: 2px;
color: #fff;
margin: 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-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-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 {
ширина: 100%;
min-height: 100%;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #fff;
display: none;
position: fixed;
}
.capsule-win-top {
ширина: 100%;
height: 50px;
background-color: #4f94e0;
line-height: 50px;
color: #fff;
font-size: 16px;
}
.capsule-win-center {
ширина: 100%;
min-height: 250px;
отступ: 20px 0px 20px 0px;
отступ: 0px 1px 0px 1px;
}
.capsule-win-bottom {
ширина: 100%;
высота: 60px;
background-color: #ececec;
отступ: 0px;
position: fixed;
нижний край: 1px;
}
.capsule-win-center .capsule-item {
высота: 50px !important;
ширина: 100%;
отступ: 0px 2px 0px 2px;
отступ: 0px;
}
.capsule-win-center .capsule-item .item-left {
ширина: 100px;
text-align: right;
отступ: 10px 0px 0px 0px;
float: left;
}
.capsule-win-center .capsule-item .item-right {
ширина: 400px;
float: right;
}
.capsule-win-center .capsule-item .item-right input[type=text]{
ширина: 75%;
высота: 35px;
}
.capsule-win-center .capsule-item .item-right input[type=checkbox]{
ширина: 20px;
марин: 2px -5px 2px 0px;
отступ: 10px;
}
.capsule-win-center .capsule-item .item-right textarea{
ширина: 75%;
высота: 50px;
нижний отступ: 10px;
overflow-y:auto;
}
.capsule-win-center .capsule-item .item-right select{
ширина: 90%;
}
.hide{
display: none;
}
.show{
display: block;
}
.capsule-win-center .capsule-item-table{
ширина: 445px;
высота: 120px;
отступ: 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;
}
Финальный результат:
Вот и все, что было в этой статье, надеюсь, это поможет вам в изучении. Также просим вас активно поддерживать и поддерживать учебные материалы.
Заявление: Контент этой статьи взят из Интернета, авторские права принадлежат их законным владельцам, контент был предоставлен пользователями Интернета в порядке самодеятельности, сайт не имеет права собственности, не был подвергнут редактированию, и не несет ответственности за связанные с этим юридические вопросы. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. При обнаружении факта нарушения сайт незамедлительно удалят涉嫌侵权的内容。