English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Basierend auf Layer+jQuery-benutzerdefinierte Pop-up-Fenster

目的：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"}'>/textbereich>
    </div>
   </div>     
  </div>
  <div class = "capsule-win-Unten>
    <input id="addNewGroupSure" class = "btn-Unten zentraler fix Button-erfolgreich" type="button" value="Bestätigen"/>
    <input id="addNewGroupCancle" class = "btn-Unten Button-abbrechen" type="button" value="Abbrechen"/>   
  </div>
  </div>

2.Sohn- und Elternteile müssen layer.js einbinden

3.Unterschichtjs

/**
 * <Zentralstellenverwaltung>
 * Zentralstelle hinzufügen
 * Autor: Yiyuery
 * Datum: 2016/10/19 
 */
;(function($,w,document,undefined){
 $(document).ready(function(){
  validatorInit();
  clickEventBind();
 });
 var addGroupValidator = new Validator();
 var contextPath = "/ZJDZYW";
 /**
  * Formularvalidierung initialisieren
  * @returns
  */
 function validatorInit(){
  addGroupValidator.init(function(obj, msg){
   layer.tips(msg,obj,{
     Stil: ['Hintergrund-; Farbe: #78BA32; Farbe: #fff', '#78BA32'], 
     maxBreite:185, 
     Zeit: 2000,     
     Hinweis: 1,
    });
  });
 }
 /**
  * Klickereignisbindung
  * @returns
  */
 function clickEventBind(){
  addNewGroupClick();
 }
 /**
  * Klickereignisse der zentralen Einheit
  * @returns
  */
 function addNewGroupClick(){
  $("#addNewGroupSure").click(function(){
   addNewGroupSure();   
  });
  $("#addNewGroupCancle").click(function(){
   addNewGroupCancle();   
  });  
 }
 /**
  * Zentrenabteilung hinzufügen [Bestätigen]
  * @returns
  */
 function addNewGroupSure() {
  validatorInput();   
 }
 /**
  * Zentrenabteilung hinzufügen [Abbrechen]
  */
 function addNewGroupCancle() {  
  closeLayerWin(); 
 }
 /**
  * Schließen Sie das derzeit geöffnete Layer-Fenster
  */
 function closeLayerWin() {
  var index = parent.layer.getFrameIndex(window.name); 
  parent.layer.close(index); //Schließen Sie dann weiter 
 }
 /**
  * Eingabeverifikation beim Formularsenden
  */
 function validatorInput() {
  /**
   * Eingabekontrolle
   */
  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("Die Liste der Abteilungen wird aktualisiert!");
   }
  }); 
  $.ajaxSettings.async = true ;
  closeLayerWin();
 }
})(jQuery, window, document);

4.js des Überlagerns

$("#addGroup").click(function() {    
 layer.config({
  path : '${contextPath}',/js/lib/layer
 });
 index = layer.open({
  type: 2,
   area: ['520px', '400px],
   fix: false, //nicht festgelegt
   title: '',
   maxmin: false,
   scrollbar: false,
   shade: 0.5,
   shadeColse: true,
   content:capsule.request.path.groupMan.layer.groupManAddLayerShow,    
   end:function(){
    loadGroupCenterInfo();
   }
 });
});

loadGroupCenterInfo : Methode des Überlagerns, wird aufgerufen, um die Liste der Abteilungen zu aktualisieren, wenn das Layer-Fenster geschlossen wird

5.Die Layer-Fenster des Überlagerns können hier nicht aus dem übergeordneten iframe des Elternfensters ausgelöst werden, da die Operation zum Hinzufügen der Abteilung loadGroupCenterInfo, in der clickEventInit-Methode des Klickereignisses enthalten ist, nicht global ist und daher nicht durch end an das Elternfenster weitergegeben und dort erneut ausgeführt werden kann

 /**
  * Laden des Zentrums der Abteilung
  */
 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 ;
 }

Daher: Wenn Callback-Funktionen den gegenseitigen Aufruf von Funktionen im aktuellen Layer betreffen, kann dies nicht mit dem allgemeinen äußeren Popup-Fenster von layer realisiert werden, sondern muss layer in der JS der aktuellen Seite neu modularisiert und eingebunden werden
[Später wurde festgestellt, dass dies tatsächlich möglich ist, es reicht aus, die Callback-Funktion direkt im Aufrufmethoden zu schreiben, siehe: Methodenaufruf in JavaScript und die Methode des Elternfensters Iframe]

layer.config({
    path : '${contextPath}',/js/lib/layer
   });
   index = layer.open({
    type: 2,
     area: ['520px', '400px],
     fix: false, //nicht festgelegt
     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{
 Breite:100%;
 Höhe:100%;
 margin:0px;
 padding:0px;
}
.capsule-btn {
 Höhe: 40px;
 Breite: 50px;
 background-color: #5093e1;
 border: 0;
 Rahmen-radius: 2px;
 color: #fff;
 Marge: 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-Rahmen-radius: 3px; -khtml-Rahmen-radius: 3px; -webkit-Rahmen-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 { 
 Breite: 100%;
 min-Höhe: 100%;
 -moz-Rahmen-radius: 5px;
 -khtml-Rahmen-radius: 5px;
 -webkit-Rahmen-radius: 5px;
 background-color: #fff;
 display: none;
 position: fixed;
}
.capsule-win-top {
 Breite: 100%;
 Höhe: 50px;
 background-color: #4f94e0;
 line-Höhe: 50px;
 color: #fff;
 font-size: 16px; 
}
.capsule-win-center {
 Breite: 100%;
 min-Höhe: 250px;
 Polsterung: 20px 0px 20px 0px;
 margin:0px 1px 0px 1px;
}
.capsule-win-bottom {
 Breite: 100%;
 Höhe: 60px;
 background-color: #ececec;
 padding: 0px;
 position: fixed;
 unten: 1px;
}
.capsule-win-ausrichten .capsule-item {
 Höhe: 50px !important;
 Breite: 100%;
 margin: 0px 2px 0px 2px;
 padding: 0px;
}
.capsule-win-ausrichten .capsule-Artikel .Artikel-left {
 Breite: 100px;
 text-align: right;
 Marge: 10px 0px 0px 0px;
 float:left;
}
.capsule-win-ausrichten .capsule-Artikel .Artikel-right {
 Breite: 400px;
 float:right;
}
.capsule-win-ausrichten .capsule-Artikel .Artikel-right input[type=text]{
 Breite:75%;
 Höhe: 35px;
}
.capsule-win-ausrichten .capsule-Artikel .Artikel-rechts input[type=checkbox]{
 Breite:20px;
 marin:2px -5px 2px 0px;
 Polsterung:10px;
}
.capsule-win-ausrichten .capsule-Artikel .Artikel-rechts textarea{
 Breite:75%;
 Höhe:50px;
 Marge-unten: 10px;
 Überlauf-y:auto; 
} 
.capsule-win-ausrichten .capsule-Artikel .Artikel-rechts select{
 Breite:90%;
}
.hide{
 Anzeige: nicht sichtbar;
}
.show{
 Anzeige: block;
}
.capsule-win-ausrichten .capsule-Artikel-table{
 Breite: 445px;
 Höhe: 120px;
 Marge: 5px 10px 0px 75px; 
 Überlauf-y:auto; 
}
.capsule-win-ausrichten .capsule-Artikel-table table{
 Rahmen-zusammenfallen:zusammenfallen;
 Breite:100%;
}
.capsule-win-ausrichten .capsule-Artikel-table table,th, td{
 Rahmen: 1px fest #ccc;
}
.capsule-win-ausrichten .capsule-Artikel-table th{
 Höhe:30px;
 text-ausrichten: center;
}
.capsule-win-ausrichten .capsule-Artikel-table td{
 text-ausrichten: center;
}
.capsule-win-ausrichten .capsule-Artikel-table input[type=text] {
 Breite:100% !important;
}
.textCenter {
 text-ausrichten: center;
}
.capsule-win-top span {
 Marge : 10px;
}

Endeffekt:

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und dass Sie die呐喊教程 mehr unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern freiwillig und selbstständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise urheberrechtlich geschützt sind, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und fügen Sie relevante Beweise bei. Sobald nachgewiesen wird, dass Inhalte urheberrechtlich geschützt sind, wird diese Website die fraglichen Inhalte sofort löschen.)

Grundlagen教程
Gefällt mir