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

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

Layerに基づいて+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> 
 ……
</

通用弹窗 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.サブレイヤージス

/**
 * <分中心管理>
 * 分中心の追加
 * 著者: 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メソッド、layerポップアップを閉じる際に親層メソッドを呼び出して分中心リストをリフレッシュ

5.親層のlayerポップアップは、親ページに埋め込まれた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（メールの際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとりあえず、このサイトは侵害される可能性のある内容をすぐに削除します。）

基本チュートリアル
おすすめ