В разработке веб -проектов мы часто встречаем пользователей, которым необходимо просматривать подробную информацию определенной записи на экране списка. Если вы используете метод переноса экрана, скорость будет медленнее, а пользовательский опыт не будет очень хорошим. Если слой появляется при нажатии на подробную ссылку записи и отображает его на текущем экране, скорость обработки очень быстрая, и пользователь считает, что она относительно новая. Ниже я буду использовать определенный веб-сайт электронной коммерции, чтобы проиллюстрировать его метод реализации в качестве примера.
1. Код, который появляется на слое на странице JSP
<!-Подробная страница логистики. id = '<s: value property = "#lrvo.logisticno"/>'> <dl> <dt> <strong> <s: text name = "struts.webui.logistics.label.logisticsdetails"/>: </strong> </dt> <dd> <strong> x </strong> </dd> </dl> <divece> <divice> <divice> <divice> <divice> <divice> <divice> <divice> <Divice> <Divice> <Divice> <Divice> <Divice> <sling> </dd> </dl cellPadding = "0"> <tr> <td> <pan>*</span> <s: text name = "struts.webui.logistics.label.logisticsnumber"/>: </td> <td> </td> <td colspan = "3" id = "logisticno"> <s: value = "#lrvo.logno"/> <s> <s: value = "#lrvo. </tr> <tr> <td valign = "top"> <pan>*</span> <s: text name = "struts.webui.logistics.label.distribution"/>: </td> <td> </td> <td colspan = "3" style = "text-align: Left" = "Content"> <S: seprod value = "############################value ="##########lr ESCOM = "false"/> </td> </tr> </table> </div> </div> </s: итератор> <!-Подробности логистики
Код стиля слоя:
.logisticscenter_xq {position: Absolute; Ширина: 710px; Граница: твердый 2PX #787878; Фон: #EDFCFE; Z-Index: 2; }Моя обработка ставит всплывающий уровень на Layout.jsp на всей странице веб -сайта, а макет всех страниц на веб -сайте наследует его. Веб -сайт принимает структуру Tiles для объединения макета страницы.
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); else topp = st; var Leatsp = 0; if (w> _w) Leatsp = ((W - _W)/2); // левое расстояние, вершина верхнего расстояния [левое, топп]; } // Получить функцию getPostion положения мыши getPostion (e) {var x = getX (e); var y = gety (e); } function getX (e) {e = e || window.event; вернуть E.Pagex || e.clientx + document.body.scrollleft - document.body.clientleft} function 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 в список JSP -файла основного вызова.
<script language = "javascript" type = "text/javascript" src = "<s: url value ="/js/aligncenter.js "/>"> </script>
3. Краткий взгляд на вызовые методы в JSP
<a onclick = "viewlogistics (event, '<s: value ="#lrvo.logisticno "/>')" href = "####"> <S: Text name = "struts.webui.logistics.label.view"/> </a>
Когда пользователь нажимает на ссылку деталей записи строки, вызывается метод отображения слоя, и значение идентификатора записи передается в метод вызова. Фактически, каждый слой отличается значением атрибута ID этой записи.
функция ViewLogistics (Event, LogistNO) {var os = getOS (); var y = gety (event); if (os == 'msie') {y = window.event.y+405; } $ (". $ ("#"+logisticno) .show (); $ ("#"+logisticno) .css ("top", y+15); }Что касается роли параметров события в методе, это не очень ясно, и это необходимо исследовать снова. Окончательный эффект, как показано на рисунке ниже. Когда мышь движется вниз, слой может двигаться динамически.
Выше приведено пример кода всплывающего окна «Фолажающее окно» (экран списка), введенный вам редактором. Я надеюсь, что это будет полезно для вас. Если вы хотите узнать больше информации, пожалуйста, следите за веб -сайтом wulin.com!