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/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>

الصفحة الأم: 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"}'></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>

2. يجب أن يتم دمج layer.js في كل من الصفحة الفرعية والصفحة الأم

3. 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: ['background-color:#78BA32; color:#fff', '#78BA32'], 
     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() {
  /**
   * التحقق من المدخل
   */
  إذا (!addGroupValidator.validate("addNewGroupWin")) {}}
   إرجاع;
  }  
  تعريف 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) {     
   إذا (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. النافذة المنبثقة للطبقة الأم هنا لا يمكن الخروج من النافذة المنبثقة لل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);
    تعريف count = obj.c_num;
    إذا (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#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وتقديم الدليل على ذلك، وسنقوم بإزالة المحتوى المزعوم فور التحقق منه.

تعليمية الأساس
أنت قد تحب