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

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

Basé sur Layer+Boîte de dialogue personnalisée jQuery

目的：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 = "goule-win-top" title = "添加分中心"><span>添加分中心</span></div>
  <div class = "goule-win-center">
   <div class = "goule-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 = "goule-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 = "goule-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 = "goule-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"}'></textearea>
    </div>
   </div>     
  </div>
  <div class = "goule-win-bas">
    <input id="addNewGroupSure" class = "bouton-bouton centralisé en bas bouton-succ" type="bouton" value="Confirmer"/>
    <input id="addNewGroupCancle" class = "bouton-bouton en bas-annuler" type="bouton" value="Annuler"/>   
  </div>
  </div>

2.Les couches sous-couches et les couches parentales doivent inclure layer.js

3.js sous-couche

/**
 * <Gestion des centres de division>
 * Ajouter un centre de division
 * 
 * Date  : 2016/10/19 
 */
;(function($,w,document,undefined){
 $(document).ready(function(){
  validatorInit();
  clickEventBind();
 });
 var addGroupValidator = new Validator();
 var contextPath = "/ZJDZYW";
 /**
  * initialisation de la validation du formulaire
  * @returns
  */
 function validatorInit(){
  addGroupValidator.init(function(obj, msg){
   layer.tips(msg,obj,{
     style: ['background-couleur:#78BA32; couleur:#fff', '#78BA32'], 
     largeurMax:185, 
     heure: 2000,     
     astuce: 1,
    });
  });
 }
 /**
  * lier des événements de clic
  * @returns
  */
 function clickEventBind(){
  addNewGroupClick();
 }
 /**
  * événement de clic lié au centre de division
  * @returns
  */
 function addNewGroupClick(){
  $("#addNewGroupSure").click(function(){
   addNewGroupSure();   
  });
  $("#addNewGroupCancle").click(function(){
   addNewGroupCancle();   
  });  
 }
 /**
  * Ajouter un nouveau centre de division [Confirmer]
  * @returns
  */
 function addNewGroupSure(){
  validatorInput();   
 }
 /**
  * Ajouter un centre de division [Annuler]
  */
 function addNewGroupCancle(){  
  closeLayerWin(); 
 }
 /**
  * Fermez la boîte de dialogue layer ouverte actuellement
  */
 function closeLayerWin(){
  var index = parent.layer.getFrameIndex(window.name); 
  parent.layer.close(index); //Puis fermez à nouveau 
 }
 /**
  * Validation des entrées de soumission du formulaire
  */
 function validatorInput(){
  /**
   * Validation des entrées
   */
  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("La liste des centres de division est rafraîchie !");
   }
  }); 
  $.ajaxSettings.async = true ;
  closeLayerWin();
 }
})(jQuery,window,document);

4.js du parent

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

loadGroupCenterInfo : méthode js du parent, appelée par la méthode parentale lors de la fermeture de la boîte de dialogue layer pour rafraîchir la liste des centres de division

5.La boîte de dialogue layer du parent ici ne peut pas sortir de l'iframe intégré à la page parentale, en raison de l'opération d'ajout de centre de division loadGroupCenterInfo, qui contient une réactivation de l'événement clic clickEventInit, cette méthode n'est pas globale et ne peut pas être transmise à la page parentale via end pour être exécutée à nouveau

 /**
  * Charger le centre de division
  */
 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 ;
 }

Therefore: when the callback function involves mutual calls of functions in the current layer, it is impossible to implement using the general layer outermost pop-up box, and can only be re-modularized in the js of the current page
[Later found that, in fact, it is possible, you 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: ['520px', '400px'],
     fix: false, //non-fixed
     title: '',
     maxmin: false,
     scrollbar: false,
     shade: 0.5,
     shadeColse: true,
     contenu:capsule.request.path.groupMan.layer.groupManAddLayerShow,    
     fin:function(){
      loadGroupCenterInfo();
     }
   });

6.style de fenêtre contextuelle universelle css

@charset "utf-8";
/*-------bouton fonctionnel------*/
body,html{
 largeur :100%;
 hauteur :100%;
 margin:0px;
 padding:0px;
}
.capsule-btn {
 hauteur : 40px;
 largeur : 50px;
 background-color: #5093e1;
 bordure: 0;
 bordure-radius: 2px;
 color: #fff;
 marge : 15px 0px 10px 15px;
 float: left;
}
/*----------------------------------------- bouton de fenêtre contextuelle -------------------------------------*/
.capsule-win .btn-bas{largeur: 100px; hauteur: 40px; fond-color: #4f94e0; police-size: 16px; bordure: none; color: #fff; -moz-bordure-radius: 3px; -khtml-bordure-radius: 3px; -webkit-bordure-radius: 3px; bordure-radius: 3px;
  cursor: pointer; margin-droite: 10px;margin-haut: 10px;}
.centerfix{margin-gauche: 30%;}
.btn-annuler {background-color: #f5f5f5 !important; border: 1px #c2c2c2 solide !important;; color: #333 !important;}
.btn-succès {background-color: #1abd9b;}
.btn-avertissement {background-color: #ec962f;}
/*------------fenêtre contextuelle---------------*/
.capsule-win { 
 largeur : 100%;
 min-hauteur : 100%;
 -moz-bordure-radius: 5px;
 -khtml-bordure-radius: 5px;
 -webkit-bordure-radius: 5px;
 background-color: #fff;
 display: none;
 position: fixed;
}
.capsule-win-top {
 largeur : 100%;
 hauteur : 50px;
 background-color: #4f94e0;
 line-hauteur : 50px;
 color: #fff;
 font-size: 16px; 
}
.capsule-win-center {
 largeur : 100%;
 min-hauteur : 250px;
 marge : 20px 0px 20px 0px;
 margin:0px 1px 0px 1px;
}
.capsule-win-bottom {
 largeur : 100%;
 hauteur : 60px;
 background-color: #ececec;
 padding: 0px;
 position: fixed;
 bas : 1px;
}
.capsule-win-center .capsule-item {
 hauteur : 50px !important;
 largeur : 100%;
 margin: 0px 2px 0px 2px;
 padding: 0px;
}
.capsule-win-center .capsule-article .article-left {
 largeur : 100px;
 text-align: right;
 marge : 10px 0px 0px 0px;
 float:left;
}
.capsule-win-center .capsule-article .article-right {
 largeur : 400px;
 float:right;
}
.capsule-win-center .capsule-article .article-right input[type=text]{
 largeur :75%;
 hauteur : 35px;
}
.capsule-win-center .capsule-article .article-droite input[type=checkbox]{
 largeur :20px;
 marin :2px -5px 2px 0px;
 marge :10px;
}
.capsule-win-center .capsule-article .article-droite textarea{
 largeur :75%;
 hauteur :50px;
 marge-bas : 10px;
 overflow-y:auto; 
} 
.capsule-win-center .capsule-article .article-droite select{
 largeur :90%;
}
.hide{
 display : none;
}
.show{
 display : block;
}
.capsule-win-center .capsule-article-table{
 largeur : 445px;
 hauteur : 120px;
 marge : 5px 10px 0px 75px; 
 overflow-y:auto; 
}
.capsule-win-center .capsule-article-table table{
 bordure-collapse:collapse;
 largeur :100%;
}
.capsule-win-center .capsule-article-table table,th, td{
 bordure : 1px solide #ccc;
}
.capsule-win-center .capsule-article-table th{
 hauteur :30px;
 text-align: center;
}
.capsule-win-center .capsule-article-table td{
 text-align: center;
}
.capsule-win-center .capsule-article-table input[type=text] {
 largeur :100% !important;
}
.textCenter {
 text-align: center;
}
.capsule-win-top span {
 marge : 10px;
}

Effet final :

C'est tout pour cet article, j'espère que cela peut aider à votre apprentissage, et j'espère que vous pouvez soutenir le tutoriel à crier davantage.

Déclaration : le contenu de cet article est extrait du réseau, la propriété intellectuelle appartient aux auteurs respectifs, le contenu est自发贡献自行上传 par les utilisateurs d'Internet, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et neassume pas la responsabilité juridique pertinente. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, vous êtes invité à envoyer un email à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un email pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, le site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.

Tutoriel de base
Vous pourriez aussi aimer