ในการพัฒนาโครงการเว็บเรามักจะพบผู้ใช้ที่ต้องการดูข้อมูลรายละเอียดของบันทึกที่แน่นอนในหน้าจอรายการ หากคุณใช้วิธีการโยกย้ายหน้าจอความเร็วจะช้าลงและประสบการณ์ผู้ใช้จะไม่ดีมาก หากเลเยอร์ปรากฏขึ้นเมื่อคลิกที่ลิงก์โดยละเอียดของบันทึกและแสดงบนหน้าจอปัจจุบันความเร็วในการประมวลผลจะเร็วมากและผู้ใช้รู้สึกว่ามันค่อนข้างแปลก ด้านล่างนี้ฉันจะใช้เว็บไซต์อีคอมเมิร์ซบางอย่างเพื่อแสดงวิธีการใช้งานเป็นตัวอย่าง
1. รหัสที่ปรากฏขึ้นเลเยอร์ในหน้า JSP
<!-รายละเอียดโลจิสติกส์เริ่มต้นหน้าป๊อปอัพ-> <s: ค่าตัววนซ้ำ = "lrvo" var = "lrvo" id = "lrvo" สถานะ = "st"> <div style = "แสดง: ไม่มี;" id = '<s: ค่าคุณสมบัติ = "#lrvo.logisticNo"/>'> <dl> <dt> <strong> <s: ชื่อข้อความ = "struts.webui.logistics.label.logisticsdetails"/>: </strong> cellpadding = "0"> <tr> <td> <span>*</span> <s: ชื่อข้อความ = "struts.webui.logistics.label.logisticsNumber"/>: </td> <td> </td> <td colspan = "3" id = "logisticNo" </tr> <tr> <td valign = "top"> <span>*</span> <s: ชื่อข้อความ = "struts.webui.logistics.label.distribution"/>: </td> <td> </td> <td colspan = "3" style = Escape = "False"/> </td> </tr> </table> </div> </div> </s: iterator> <!-รายละเอียดโลจิสติก
รหัสสไตล์เลเยอร์:
.logisticScenter_xq {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 710px; ชายแดน: Solid 2px #787878; ความเป็นมา: #edfcfe; z-index: 2; -การประมวลผลของฉันทำให้เลเยอร์ป๊อปอัปเป็น layout.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; // รับตำแหน่งของวิธีการเขียน scrollbar // ปัจจุบันเข้ากันได้กับ IE, ff var st = (de && de.scrolltop) || document.body.scrolltop; var topp = 0; ถ้า (h> _h) topp = (st+(h - _h)/2); else topp = st; var leftp = 0; if (w> _w) leftp = ((w - _w)/2); // ระยะทางซ้าย, ระยะทางกลับด้านบน [ซ้าย, 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} // ฟังก์ชั่นประเภทเบราว์เซอร์ตัดสิน 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 นี้ไว้ในไฟล์ list jsp ของการโทรหลัก
<script language = "javascript" type = "text/javascript" src = "<s: url value ="/js/allignCenter.js "/>"> </script>
3. ดูวิธีการโทรสั้น ๆ ใน JSP
<a onclick = "viewlogistics (เหตุการณ์, '<s: ค่าคุณสมบัติ ="#lrvo.logisticno "/>')" href = "####"> <s: ชื่อข้อความ = "struts.webui.logistics.label.view"/> </a>
เมื่อผู้ใช้คลิกที่ลิงค์รายละเอียดของบันทึกของแถววิธีการของเลเยอร์การแสดงผลจะถูกเรียกและค่า ID ของบันทึกจะถูกส่งผ่านไปยังวิธีการโทร ในความเป็นจริงแต่ละเลเยอร์มีความโดดเด่นด้วยค่าแอตทริบิวต์ ID ของบันทึกนี้
ฟังก์ชั่น ViewLogistics (เหตุการณ์, logisticNo) {var os = getOs (); var y = gety (เหตุการณ์); if (os == 'msie') {y = window.event.y+405; } $ (". LogisticsCenter_xq"). ซ่อน (); $ ("#"+LogisticNo). show (); $ ("#"+LogisticNo) .css ("top", y+15); -สำหรับบทบาทของพารามิเตอร์เหตุการณ์ในวิธีการมันไม่ชัดเจนมากและต้องมีการตรวจสอบอีกครั้ง เอฟเฟกต์สุดท้ายดังแสดงในรูปด้านล่าง เมื่อเมาส์เคลื่อนที่ลงเลเยอร์สามารถเคลื่อนที่แบบไดนามิกได้
ด้านบนเป็นรหัสตัวอย่างของหน้าต่างลอยตัวป๊อปอัพ JS (หน้าจอรายการ) แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดติดตามเว็บไซต์ Wulin.com!