في تطوير مشروع الويب ، نواجه غالبًا المستخدمين الذين يحتاجون إلى عرض المعلومات التفصيلية لسجل معين في شاشة القائمة. إذا كنت تستخدم طريقة ترحيل الشاشة ، فستكون السرعة أبطأ ولن تكون تجربة المستخدم جيدة جدًا. إذا ظهرت طبقة عند النقر فوق الرابط التفصيلي للسجل وتعرضه على الشاشة الحالية ، فإن سرعة المعالجة سريعة للغاية ويشعر المستخدم بأنها جديدة نسبيًا. أدناه سأستخدم موقعًا معينًا للتجارة الإلكترونية لتوضيح طريقة التنفيذ الخاصة به كمثال.
1. الرمز الذي يظهر الطبقة على صفحة JSP
<!-تفاصيل اللوجستيات ، تبدأ الصفحة المنبثقة-> <s: iterator value = "lrvo" var = "lrvo" id = "lrvo" status = "st"> <div style = "display: none ؛" id = '<s: property value = "#lrvo.logisticno"/>'> <dl> <dt> <strong> <s: text name = "struts.webui.logistics.label.logisticsdeals"/>: </strong> </dt> <dd> </strong> cellpadding = "0"> <tr> <td> <span>*</span> <s: text name = "struts.webui.logistics.label.logisticsnumber"/>: </td> <td> </td> <td colspan = "3" id = "logisticno" </tr> <tr> <td valign = "top"> <span>*</span> <s: text name = "struts.webui.logistics.label.distribution"/>: </td> <td> <td> </td> <td colspan = "3" style = text-align: id "id =" Escape = "false"/> </td> </tr> </lood> </viv> </viv> </s: iterator> <!-تفاصيل اللوجستيات تنتهي نافذة المنبثقة->
رمز نمط الطبقة:
.logisticscenter_xq {الموضع: Absolute ؛ العرض: 710px ؛ الحدود: الصلبة 2px #787878 ؛ الخلفية: #edfcfe ؛ Z-index: 2 ؛ }تضع المعالجة الخاصة بي الطبقة المنبثقة على تخطيط. jsp على صفحة موقع الويب بأكمله ، ويرثها تخطيط جميع الصفحات في الموقع. يتبنى الموقع إطار عمل البلاط لتوحيد تخطيط الصفحة.
2. احسب القيم اليسرى والأعلى المراد تعيينها في وسط الكائن
لقد كتبت الوظيفة التي يجب إكمالها في هذه الخطوة في ملف JS ، الذي يعرض بشكل أساسي نافذة الطبقة للسجل ديناميكيًا بناءً على موضع الإحداثيات في الماوس للمستخدم ، انقر فوق صفحة القائمة. الرمز الرئيسي هو كما يلي:
// احسب القيم اليسرى والأعلى التي يجب تعيينها في مركز الكائن // المعلمات: // _w - عرض الكائن // _h - وظيفة ارتفاع الكائن getlt (_w ، _h) {var de = document.documentElement ؛ // احصل على عرض وارتفاع نافذة المتصفح الحالية // طريقة كتابة متوافقة ، متوافقة مع IE ، ff var w = self.innerwidth || (de && de.clientwidth) || document.body.clientwidth ؛ var H = (de && de.clientheight) || document.body.clientheight ؛ // احصل على موضع شريط التمرير الحالي // طريقة الكتابة المتوافقة ، متوافقة مع IE ، ff var st = (de && de.scrolltop) || document.body.scrolltop ؛ var topp = 0 ؛ if (h> _h) topp = (ST+(H - _H)/2) ؛ آخر topp = st ؛ var leftp = 0 ؛ if (w> _w) leftp = ((w - _w)/2) ؛ // المسافة اليسرى ، عودة المسافة العلوية [leftp ، topp] ؛ } // الحصول على وظيفة getPostion وظيفة getPostion (e) {var x = getx (e) ؛ var y = gety (e) ؛ } وظيفة getx (e) {e = e || window.event ؛ إرجاع e.pagex || e.clientx + document.body.scrollleft - document.body.clientleft} وظيفة gety (e) {e = e || window.event ؛ إرجاع E.pagey || e.clienty + document.body.scrolltop - document.body.clienttop} // ugge browser type getos () {var osobject = "" ؛ if (navigator.useragent.indexof ("msie")> 0) {return "msie" ؛ } if (isFirefox = navigator.useragent.indexof ("firefox")> 0) {return "firefox" ؛ } if (issafari = navigator.useragent.indexof ("safari")> 0) {return "safari" ؛ } if (isCamine = navigator.useragent.indexof ("camine")> 0) {return "camine" ؛ } if (ismozilla = navigator.useragent.indexof ("gecko/")> 0) {return "gecko" ؛ }}قم بتضمين هذا JS في ملف JSP للمكالمة الرئيسية.
<script language = "javaScript" type = "text/javaScript" src = "<s: url value ="/js/aligncenter.js "/>"> </script>
3. نظرة قصيرة على أساليب الاتصال في JSP
<a onClick = "viewLogistics (event ، '<s: property value ="#lrvo.logisticno "/>')
عندما ينقر المستخدم على رابط التفاصيل لسجل الصف ، يتم استدعاء طريقة طبقة العرض ، ويتم نقل قيمة المعرف للسجل إلى طريقة الاتصال. في الواقع ، يتم تمييز كل طبقة بقيمة سمة معرف لهذا السجل.
وظيفة ViewLogistics (الحدث ، logisticno) {var os = getos () ؛ var y = gety (event) ؛ if (os == 'msie') {y = window.event.y+405 ؛ } $ (". logisticscenter_xq"). $ ("#"+logisticno) .show () ؛ $ ("#"+logisticno) .css ("Top" ، y+15) ؛ }أما بالنسبة لدور معلمات الحدث في هذه الطريقة ، فليس من الواضح جدًا ، ويجب التحقيق في ذلك مرة أخرى. التأثير النهائي كما هو موضح في الشكل أدناه. عندما يتحرك الماوس لأسفل ، يمكن للطبقة أن تتحرك ديناميكيًا.
ما ورد أعلاه هو رمز مثال على النافذة العائمة (شاشة القائمة) المنبثقة في JS Control التي قدمتها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كنت تريد معرفة المزيد من المعلومات ، فيرجى اتباع موقع Wulin.com!