UI позиционирование

Материал из JQuery

Перейти к: навигация, поиск

Position

~lt~coment~gt~Эта утилита UI позволяет удобно позиционировать элементы (в часности UI-виджеты) относительно окна, документа, других элементов и даже курсора.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
  ~lt~style~gt~
    body{font:normal 9pt Arial,sans-serif;}
    #targetElement{ width:240px;height:200px;background-color:#999;margin:30px auto;}
    .positionDiv{width:50px;height:50px;opacity:0.6;}
    #position1{background-color:#F00;}
    #position2{background-color:#0F0;}
    #position3{background-color:#00F;}
    #position4{background-color:#FF0;}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  
  ~lt~div id="targetElement"~gt~
    ~lt~div class="positionDiv" id="position1"~gt~~lt~/div~gt~
    ~lt~div class="positionDiv" id="position2"~gt~~lt~/div~gt~
    ~lt~div class="positionDiv" id="position3"~gt~~lt~/div~gt~
    ~lt~div class="positionDiv" id="position4"~gt~~lt~/div~gt~
  ~lt~/div~gt~

  ~lt~script~gt~
    $("#position1").position({
      my: "center",
      at: "center",
      of: "#targetElement"
    });
    $("#position2").position({
      my: "left top",
      at: "left top",
      of: "#targetElement"
    });
    $("#position3").position({
      my: "right center",
      at: "right bottom",
      of: "#targetElement"
    });
    $(document).mousemove(function(ev){
      $("#position4").position({
        my: "left bottom",
        of: ev,
        offset: "3 -3",
        collision: "fit"
      });
    });
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Описание

Эта утилита jQuery UI, позволяющая удобно позиционировать элементы (в часности UI-виджеты) относительно окна (window), документа (document), других элементов и даже курсора. С ее помощью нельзя позиционировать скрытые элементы (hidden). Эта утилита является независимой и не требует подключения к странице других UI модулей (даже ядра jQuery UI).

Допустим, что необходимо расположить элемент с id=el1 в левом нижнем углу элемента с id=target так, чтобы первый спускался на пол своей высоты (пример с синем квадратиком в примере выше):

$("#el1").position({
  my: "right center",  // место на позиционируемом элементе
  at: "right bottom",  // место на элементе относительно которого будет позиционирование
  of: "#target"        // элемент относительно которого будет позиционирование
});

Список свойств

↓  название :тип
Определяет точку на позиционируемом элементе, относительно которой будет происходить выравнивание (например "нижний левый край элемента должен будет оказаться в центре документа (или другого элемента)").

Задается строкой формата "по_горизонтали по_вертикали", возможные значения "right|center|left bottom|center|top". Если одно из значений не указывается (например просто "left" или просто "top"), то недостающее считается "center" (т.е. "left center" и "center top").

Определяет точку на элементе, относительно которого будут позиционировать. Относительно этой точки и будет происходить выравнивание (например "центр определенного элемента должен будет оказаться в нижнем правом углу документа (или другого элемента))".

Задается строкой формата "по_горизонтали по_вертикали", возможные значения "right|center|left bottom|center|top". Если одно из значений не указывается (например просто "left" или просто "top"), то недостающее считается "center" (т.е. "left center" и "center top")..

В этом свойстве задается элемент, относительно которого будет происходить позиционирование (документ, окно, элемент страницы). Если передается event, то позиционирование будет происходить относительно его свойств pageX и pageY.
offset:string 
В этом свойстве задается сдвиг по горизонтали и вертикали (в пикселях). Например "50 50" (left top). Если задать одно значение, то оно будет применено как по вертикали так и по горизонтали.
collision:string 
Если позиционируемый элемент оказывается частично или полностью выходящим за рамки окна, это свойство определяет его альтернативную позицию.
Заданная в этом параметре функция будет вызываться в момент позиционирования элемента. Ей будет передан один параметр — объект с полями top и left, которые содержат расстояния (в пикселях), на которое необходимо сместить позиционируемый элемент, чтобы он расположился относительно второго элемента, так как это было задано.