Webプロジェクトの開発では、リスト画面で特定のレコードの詳細情報を表示する必要があるユーザーに遭遇することがよくあります。画面を移行する方法を使用すると、速度が遅くなり、ユーザーエクスペリエンスがあまり良くありません。レコードの詳細なリンクをクリックして現在の画面に表示するときにレイヤーがポップアップすると、処理速度は非常に高速で、ユーザーは比較的斬新であると感じます。以下に、特定のeコマースWebサイトを使用して、その実装方法を例として説明します。
1.JSPページにレイヤーをポップアップするコード
<！ - ロジスティクス詳細ポップアップページ開始 - > <s：iterator値= "lrvo" var = "lrvo" id = "lrvo" status = "st"> <div style = "display：none;" id = '<s：property value = "＃lrvo.logisticno"/>'> <dl> <dt> <strong> <s：text name = "struts.label.logisticsdetails"/>：</strong> </dt> <dd> <strong> CellPadding = "0"> <tr> <td> <span>*</span> <s：Text name = "struts.webui.logistics.label.logisticsnumber"/>：</td> <td> </td> <td colspan = "3" 3 "3" = "logisticno" </tr> <tr> <td valign = "top"> <span>*</span> <s：テキスト名= "struts.webui.logistics.label.distribution"/>：</td> <td> </td> <td colspan = "3" style = "text-align：" content " ESCAPE = "false"/> </td> </tr> </table> </div> </div> </s：iterator> <！ - ロジスティクスの詳細ポップアップウィンドウエンド - >
レイヤースタイルコード：
.logisticscenter_xq {position：absolute;幅：710px;国境：ソリッド2px＃787878;背景：#edfcfe; z-index：2; }私の処理では、ポップアップレイヤーをWebサイトページ全体にlayout.jspに配置し、Webサイト内のすべてのページのレイアウトが継承されます。ウェブサイトは、ページレイアウトを統合するためにタイルフレームワークを採用しています。
2。オブジェクトの中心に設定する左値と上部値を計算します
このステップでJSファイルに記入する関数を書きました。これは、主に、リストページの[ユーザーのマウスクリック]の座標位置に基づいて、レコードのレイヤーウィンドウを動的に表示します。メインコードは次のとおりです。
//オブジェクトの中心に設定する必要がある左と上部の値を計算します//現在のブラウザウィンドウの幅と高さを取得します（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; if（h> _h）topp =（st+（h- _h）/2）; else topp = st; var leftp = 0; if（w> _w）reptp =（（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} // judge browser type function 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ファイルに含めます。
<スクリプト言語= "javascript" type = "text/javascript" src = "<s：url value ="/js/aligncenter.js "/>"> </script>
3。JSPの呼び出し方法を簡単に見る
<onclick = "viewlogistics（event、 '<s：property value ="＃lrvo.logisticno "/>'）" href = "####"> <s：text name = "struts.webui.logistics.label.view"/> </a>
ユーザーが行のレコードの詳細リンクをクリックすると、ディスプレイレイヤーのメソッドが呼び出され、レコードのID値が呼び出し方法に渡されます。実際、各レイヤーは、このレコードのID属性値によって区別されます。
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（ "top"、y+15）; }メソッドにおけるイベントパラメーターの役割については、それはあまり明確ではなく、これを再度調査する必要があります。最終的な効果は、下の図に示すとおりです。マウスが下に移動すると、レイヤーは動的に移動できます。
上記は、編集者が紹介したJSコントロールポップアップフローティングウィンドウ（リスト画面）の例です。それがあなたに役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトをフォローしてください！