コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > php教程 > PHP开发 > Layer+jQuery に基づくカスタム ポップアップ ボックス

Layer+jQuery に基づくカスタム ポップアップ ボックス

高洛峰
リリース： 2016-12-08 14:18:08
オリジナル
1370 人が閲覧しました

目的: XXXX プロジェクトでは、多くのポップアップ ウィンドウが freemark Web ページ タグを追加することによって実装されています。Web ページのポップアップ ボックスには非表示の div のみが表示されます。これにより、プリロード中に Web ページの速度が低下し、ページの読み込み時間が増加します。応答時間

の解決策は以下の通りです。 ＜別センターで管理しているポップアップボックス追加の実装仕組み例＞

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=&#39;{"required":true,"format":"string"}&#39;/>                  
         </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=&#39;{"required":true,"format":"lng"}&#39;/>         
       </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=&#39;{"required":true,"format":"lat"}&#39;/>         
       </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=&#39;{"required":true,"format":"string"}&#39;></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>
ログイン後にコピー

4.親レイヤーjs

/**
 * <分中心管理>
 * 添加分中心
 * 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: [&#39;background-color:#78BA32; color:#fff&#39;, &#39;#78BA32&#39;],
         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(){
    /**
     * 输入校验
     */
    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);
ログイン後にコピー

loadGroupCenterInfo: 親レイヤーの js メソッドは、レイヤーのポップアップ ウィンドウを閉じるときに、親レイヤーのメソッドを呼び出してサブセンター リストを更新します

5。ここで入手可能 サブセンターを追加する操作loadGroupCenterInfoにより、親ページのネストされたiframeから飛び出すと、クリックイベントは再アクティブ化clickEventInitにネストされます。このメソッドはグローバルではないため、endを通して親ページに渡すことはできません。再度実行するため

$("#addGroup").click(function(){       
  layer.config({
    path : &#39;${contextPath}/js/lib/layer&#39;
  });
  index = layer.open({
    type: 2,
     area: [&#39;520px&#39;, &#39;400px&#39;],
     fix: false, //不固定
     title: &#39;&#39;,
     maxmin: false,
     scrollbar:false,
     shade:0.5,
     shadeColse:true,
     content:capsule.request.path.groupMan.layer.groupManAddLayerShow,      
     end:function(){
       loadGroupCenterInfo();
     }
  });
 
});
ログイン後にコピー

したがって: コールバック関数に現在のレイヤーの関数の呼び出しが含まれる場合、一般レイヤーの最も外側のポップアップ ボックスを使用して実装することはできません。レイヤーは再モジュール的にのみ導入できます。現在のページの js

[後で、実際にはそうであることが判明しました。コールバック関数を呼び出しメソッドに直接記述する必要があるだけです。参照: JavaScript のメソッド コールバックと親ページ Iframe のメソッド呼び出し]

/**
 * 加载分中心
 */
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 = &#39;<div class="groupItemDiv" id=&#39;+obj.id+&#39;>&#39;
        + &#39;<img class="checkBoxLeftSite" src="&#39;+contextPath+&#39;/image/Checkbox.png"/>&#39;+obj.group_name+"("+count+")"+&#39;<li title="编辑" class="editGroup"></li></div>&#39;;
      $("#groupCenterArea").append(html);
    });
    clickEventInit();
  });
  $.ajaxSettings.async = true ;
}
ログイン後にコピー

6. ユニバーサルポップアップスタイルCSS

layer.config({
        path : &#39;${contextPath}/js/lib/layer&#39;
      });
      index = layer.open({
        type: 2,
         area: [&#39;520px&#39;, &#39;400px&#39;],
         fix: false, //不固定
         title: &#39;&#39;,
         maxmin: false,
         scrollbar:false,
         shade:0.5,
         shadeColse:true,
         content:capsule.request.path.groupMan.layer.groupManAddLayerShow,      
         end:function(){
           loadGroupCenterInfo();
         }
      });
ログイン後にコピー

最終効果:

関連ラベル：
Layer jQuery
ソース：php.cn
前の記事：jqueryは.NETと連携してバインディングデータのクリック指定を実現し、ワンクリックでダウンロードできる 次の記事：WeChatはタブ効果を実現するjsを開発
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート