Dalam pengembangan proyek web, kami sering bertemu pengguna yang perlu melihat informasi terperinci dari catatan tertentu di layar daftar. Jika Anda menggunakan metode migrasi layar, kecepatannya akan lebih lambat dan pengalaman pengguna tidak akan terlalu baik. Jika lapisan muncul saat mengklik tautan terperinci dari catatan dan menampilkannya di layar saat ini, kecepatan pemrosesan sangat cepat dan pengguna merasa relatif baru. Di bawah ini saya akan menggunakan situs web e-commerce tertentu untuk menggambarkan metode implementasinya sebagai contoh.
1. Kode yang muncul di halaman JSP
<!-Detail Logistik Halaman Pop-up Mulai-> <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.logisticsDetails"/>:</strong></dt> <dd><strong>X</strong></dd> </dl> <div> <table cellpacing="0" cellPadding = "0"> <tr> <td> <span>*</span> <s: nama teks = "struts.webui.logistics.label.logisticsnumber"/>: </td> <td> </td> <td colspan = "3" id = "logisticno"> </td> <td colspan = "3" id = "logisticno"> <s: nilai properti = " </tr> <tr> <td valign="top"><span>*</span><s:text name="struts.webui.logistics.label.distribution"/>: </td> <td></td> <td colspan="3" style="text-align:left" id="content"><s:property value="#lrVo.content" Escape = "false"/> </td> </tr> </able> </div> </div> </s: iterator> <!-Detail logistik jendela pop-up->
Kode Gaya Lapisan:
.logisticscenter_xq {position: absolute; Lebar: 710px; Perbatasan: Solid 2px #787878; Latar Belakang: #Edfcfe; z-index: 2; }Pemrosesan saya menempatkan lapisan popup ke tata letak.jsp di seluruh halaman situs web, dan tata letak semua halaman di situs web mewarisi itu. Situs web mengadopsi kerangka kerja ubin untuk menyatukan tata letak halaman.
2. Hitung nilai kiri dan atas yang akan diatur di tengah objek
Saya menulis fungsi untuk menyelesaikan pada langkah ini ke dalam file JS, yang terutama menampilkan jendela layer dari catatan secara dinamis berdasarkan posisi koordinat mouse pengguna klik pada halaman daftar. Kode utamanya adalah sebagai berikut:
// Hitung nilai kiri dan atas yang perlu diatur di tengah objek // parameter: // _W - Lebar objek // _h - Fungsi tinggi objek getLT (_W, _H) {var de = document.documentElement; // Dapatkan lebar dan tinggi jendela browser saat ini // metode penulisan yang kompatibel, kompatibel dengan IE, ff var w = self.innerwidth || (de && de.clientwidth) || document.body.clientwidth; var h = (de && de.clientHeight) || document.body.clientHeight; // Dapatkan posisi scrollbar saat ini // metode penulisan yang kompatibel, kompatibel dengan IE, ff var st = (de && de.scrolltop) || document.body.scrolltop; var topp = 0; if (h> _h) topp = (st+(h - _h)/2); lain topp = st; var leftp = 0; if (w> _w) leftp = ((w - _w)/2); // jarak kiri, pengembalian jarak atas [kiri, topp]; } // Dapatkan Fungsi GetPostion Posisi Mouse GetPostion (E) {var x = getx (e); var y = gety (e); } function getx (e) {e = e || window.event; return e.pagex || E.ClientX + document.body.scrollleft - document.body.clientleft} function gety (e) {e = e || window.event; mengembalikan E.Pagey || e.clienty + document.body.scrolltop - document.body.clienttop} // juri function type browser 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"; }}Sertakan JS ini ke dalam daftar file JSP dari panggilan utama.
<bahasa skrip = "javascript" type = "text/javaScript" src = "<s: url value ="/js/alignCenter.js "/>"> </script>
3. Pandangan singkat tentang metode panggilan di JSP
<a onClick = "viewlogistics (event, '<s: value properti ="#lrvo.logisticno "/>')" href = "####"> <s: nama teks = "struts.webui.logistics.label.view"/> </a>
Ketika pengguna mengklik tautan detail dari catatan baris, metode lapisan tampilan dipanggil, dan nilai ID dari catatan diteruskan ke metode panggilan. Bahkan, setiap lapisan dibedakan dengan nilai atribut ID dari catatan ini.
function viewlogistics (event, logisticno) {var os = getos (); var y = gety (event); if (os == 'msie') {y = window.event.y+405; } $ (". LogisticsCenter_xq"). Hide (); $ ("#"+logisticno) .show (); $ ("#"+logisticno) .css ("atas", y+15); }Adapun peran parameter peristiwa dalam metode ini, tidak terlalu jelas, dan ini perlu diselidiki lagi. Efek akhir adalah seperti yang ditunjukkan pada gambar di bawah ini. Saat mouse bergerak ke bawah, lapisan dapat bergerak secara dinamis.
Di atas adalah contoh kode JS Control Pop-Up Floating Window (layar daftar) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda ingin mengetahui informasi lebih lanjut, silakan ikuti situs web Wulin.com!