Оглавление

5.10. Вычисление положения элементов

Для вычисления положения элемента предназначены методы offset() и position().

Методы возвращают объект с двумя свойствами:
• top — смещение сверху;
• left — смещение слева.
Выведем положение элемента при щелчке на нем (листинг 5.4).

 

 Листинг 5.4. Методы offset() и position()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы offset() и position()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("p").one("click", function() {
      var elem = $(this);
      var obj1 = elem.offset();
      var obj2 = elem.position();
      var msg = "Offset top: " + obj1.top + " left: " + obj1.left;
      msg += " Position top: " + obj2.top + " left: " + obj2.left;
      elem.html(msg);
   });
});
//-->
</script>
</head>
<body>
<p>Абзац 1</p>
<div style="margin:20px;padding:15px;border: black 2px
dotted;">
<p style="margin:10px;">Абзац 2</p>
</div>
Щелкните на абзаце
</body>
</html>

 

Для получения или установки значения отступа прокрутки предназначены два метода.
scrollTop([<3начение>]) — значение отступа прокрутки сверху. Если параметр не указан, то метод возвращает числовое значение, а если указан, то задает новое значение для всех элементов коллекции.
scrollLeft([<3начение>]) — значение отступа прокрутки слева. Если параметр не указан, то метод возвращает числовое значение, а если указан, то задает новое значение для всех элементов коллекции.

 
Выведем значение отступа прокрутки после щелчка на элементе (листинг 5.5).

 

Листинг 5.5. Методы scrollTop{) и scrollLeft()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы scrollTop() и scrollLeft()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#div1").click(function() {
      var elem = $("#div0");
      $(this)
      .html("top: " + elem.scrollTop() + " left: " + elem.scrollLeft());
      elem.scrollTop(0).scrollLeft(0);
   });
});
</script>
<style>
#div1 {
   margin:20px;padding:15px;
   width:1500px; height:1500px;
   border: black 2px dotted;
   background-color:silver;
}
#div0 {
    height: 200px;
    overflow: auto;
    width: 640px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">Переместите полосы прокрутки и щелкните 
на сером фоне чтобы увидеть значения<br>
После щелчка значения будут приравнены к 0
</div>
</div>
</body>
</html>

 

DEMO

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити