UI позиционирование
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="https://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")..