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>
·····
</
일반 팝업 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-하단>
<input id="addNewGroupSure" class = "btn"-하단 중앙 고정 버튼-succ" type="button" value="확인"/>
<input id="addNewGroupCancle" class = "btn"-하단 버튼-cancel" type="button" value="취소"/>
</div>
</div>
2.자부모 층 모두에 layer.js를 포함해야 합니다
3.자층 js
/**
* <분센터 관리>
* 분센터 추가
* 저자 : Yiyuery
* 날짜 : 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,{
스타일: ['배경-색상:#78BA32; 색상:#fff', '#78BA32'],
최대 너비:185,
시간: 2000,
팁: 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(){
/**
* 입력 검증
*/
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("부서 중심 목록 새로 고침!");
}
});
$.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, //불변
title: '',
maxmin: false,
scrollbar:false,
shade:0.5,
shadeColse:true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
});
loadGroupCenterInfo : 부모 레이어 js 메서드, 레이어 팝업을 닫을 때 부모 레이어 메서드를 호출하여 부서 중심 목록을 새로 고침
5.부모 레이어 레이어 팝업에서 부모 페이지에 들어 있는 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;
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 ;
}
따라서:回调 함수가 현재 레이어의 함수 간의相互 호출을 포함할 때, 일반 layer 가장 외층 팝업을 사용하여 구현할 수 없습니다. 대신에 현재 페이지의 js에서 layer를 다시 모듈화하여 입력해야 합니다.
[나중에 알게 되었는데, 실제로는 가능합니다.回调 함수를 호출 메서드에 직접 작성하면 됩니다. 참고: JavaScript의 메서드 리턴과 부모 페이지 Iframe의 메서드 호출]
layer.config({
path : '${contextPath}/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //불변
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{
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 {
width: 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 {
width: 100%;
height: 50px;
background-color: #4f94e0;
line-height: 50px;
color: #fff;
font-size: 16px;
}
.capsule-win-center {
width: 100%;
min-height: 250px;
padding: 20px 0px 20px 0px;
margin:0px 1px 0px 1px;
}
.capsule-win-bottom {
width: 100%;
height: 60px;
background-color: #ececec;
padding: 0px;
position: fixed;
bottom: 1px;
}
.capsule-win-center .capsule-item {
height: 50px !important;
width: 100%;
margin: 0px 2px 0px 2px;
padding: 0px;
}
.capsule-win-center .capsule-item .item-left {
width: 100px;
text-align: right;
margin: 10px 0px 0px 0px;
float:left;
}
.capsule-win-center .capsule-item .item-right {
width: 400px;
float:right;
}
.capsule-win-center .capsule-item .item-right input[type=text]{
width:75%;
height: 35px;
}
.capsule-win-center .capsule-item .item-right input[type=checkbox]{
width:20px;
marin:2px -5px 2px 0px;
padding:10px;
}
.capsule-win-center .capsule-item .item-right textarea{
width:75%;
height:50px;
margin-bottom: 10px;
overflow-y:auto;
}
.capsule-win-center .capsule-item .item-right select{
width:90%;
}
.hide{
display : none;
}
.show{
display : block;
}
.capsule-win-center .capsule-item-table{
width: 445px;
height: 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;
}
최종 효과:
이것이 본문의 전체 내용입니다. 많은 도움이 되길 바랍니다. 또한, 나대호 튜토리얼에 많은 지지를 부탁드립니다.
선언: 본문 내용은 인터넷에서 가져왔으며, 원저자가 모두 소유합니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있다면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보고할 때는 #을 @으로 변경하십시오.）를 통해 신고하시고 관련 증거를 제공하시면, 사실로 확인되면 해당 사이트는 즉시 저작권 침해 내용을 삭제합니다.