Лучшее руководство по JQuery UI пример - Расположение (Position) в 2024 году. В этом руководстве вы можете изучить По умолчанию функция,цикл изображения,
Относительное окно, документы, анкеры, курсор / мышь и другие элементы позиционирующего элемента.
Для получения дополнительной информации о .position()
подробные данные о методах, см API документации .position () .
Используйте форму контролирует положение макета, или перетаскивать элементы расположены так, чтобы изменить его смещение. Перетащите окружающий родительский элемент, чтобы увидеть обнаружение столкновений.
<! DOCTYPE HTML> <HTML LANG = "EN"> <Head> <Meta Charset = "UTF-8"> <Title> Jquery UI Расположение (Position) - функция по умолчанию </ title> <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт> <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт> <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css"> <Style> #parent { ширина: 60%; высота: 40px; Маржа: 10px авто; обивка: 5px; границы: 1px твердый # 777; цвет фона: # fbca93; выравнивания текста: центр; } .positionable { позицию: абсолютная; Дисплей: блок; справа: 0; снизу: 0; цвет фона: # bcd5e6; выравнивания текста: центр; } # Positionable1 { ширина: 75px; высота: 75px; } # Positionable2 { ширина: 120px; высота: 40px; } выберите, вход { Левое поле: 15px; } </ Style> <Script> $ (Function () { положение функции () { $ ( ".positionable") .position ({ от: $ ( "#parent"), мой: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val (), по адресу: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val (), столкновение: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val () }); } $ ( ".positionable") .css ( "Непрозрачность", 0,5); $ ( "Select, вход") .bind ( "нажмите KeyUp изменения", должность); $ ( "#parent") .draggable ({ сопротивление: позиция }); положение (); }); </ Script> </ Head> <Body> <Div ID = "родитель"> <P> Это расположение родительского элемента. </ P> </ Div> <Div класс = "позиционируемый" ID = "positionable1"> <P> в положение </ P> </ Div> <Div класс = "позиционируемый" ID = "positionable2"> <P> в положение 2 </ P> </ Div> <Div стиль = "обивка: 20px; маржа-топ: 75px;"> Расположение ru. <Div стиль = "обивка-дно: 20px;"> <B> мой: </ b> <Выбрать ID = "my_horizontal"> <Значение Option = "левый"> влево </ вариант> <Значение Option = "Центр"> Центр </ вариант> <Option значение = "вправо"> вправо </ вариант> </ Select> <Выбрать ID = "my_vertical"> <Значение Option = "сверху"> верхний </ вариант> <Значение Option = "Центр"> Центр </ вариант> <Значение Option = "снизу"> низ </ вариант> </ Select> </ Div> <Div стиль = "обивка-дно: 20px;"> <B> по адресу: </ b> <Выбрать ID = "at_horizontal"> <Значение Option = "левый"> влево </ вариант> <Значение Option = "Центр"> Центр </ вариант> <Option значение = "вправо"> вправо </ вариант> </ Select> <Выбрать ID = "at_vertical"> <Значение Option = "сверху"> верхний </ вариант> <Значение Option = "Центр"> Центр </ вариант> <Значение Option = "снизу"> низ </ вариант> </ Select> </ Div> <Div стиль = "обивка-дно: 20px;"> <B> столкновение: </ b> <Выбрать ID = "collision_horizontal"> <Значение Option = "флип"> флип </ вариант> <Значение Option = "подгонки"> подходят </ вариант> <Значение Option = "flipfit"> flipfit </ вариант> <Значение Option = "нет"> нет </ опции> </ Select> <Выбрать ID = "collision_vertical"> <Значение Option = "флип"> флип </ вариант> <Значение Option = "подгонки"> подходят </ вариант> <Значение Option = "flipfit"> flipfit </ вариант> <Значение Option = "нет"> нет </ опции> </ Select> </ Div> </ Div> </ Body> </ HTML>
Фото браузер прототип, соответственно, используя позиции в качестве изображения на левый, центральный, правый, а затем цикл. Используйте ссылку в верхней части для цикла через изображения, созданные в левой или правой кнопкой мыши, чтобы перебрать изображений. Обратите внимание, что при изменении размеров окна, повторно поместить изображение.
<! DOCTYPE HTML> <HTML LANG = "EN"> <Head> <Meta Charset = "UTF-8"> <Title> Jquery UI Расположение (Position) - циркуляционный изображение </ title> <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт> <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт> <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css"> <Style> тело { Запас: 0; } #container { переполнение: скрытый; позиция: относительная; высота: 400px; } IMG { позицию: абсолютная; } </ Style> <Script> $ (Function () { // Реконструкция означает удаление этих плагинов в методах $ .fn.left = функция (с помощью) { вернуть this.position ({ мой: "правая средняя", в: "левый + 25 среднего», из: "#container", столкновение: "ни один", используя: используя }); }; $ .fn.right = Функция (с помощью) { вернуть this.position ({ мой: "левый средний", в: "право-25 среднего", из: "#container", столкновение: "ни один", используя: используя }); }; $ .fn.center = Функция (с помощью) { вернуть this.position ({ мой: "Центр среднего", в: "центр" посередине, из: "#container", используя: используя }); }; $ ( "Img: экв (0)") .left (); $ ( "Img: экв (1)") .center (); $ ( "Img: экв (2)") .right (); Функция одушевленные (к) { $ (Это) .stop (истина, ложь) .animate (к); } следующая функция (событие) { event.preventDefault (); $ ( "Img: экв (2)") .center (одушевленные); $ ( "Img: экв (1)") .left (одушевленные); . $ ( "Img: экв (0)") .right () appendTo ( "#container"); } функционировать предыдущий (событие) { event.preventDefault (); $ ( "Img: экв (0)") .center (одушевленные); $ ( "Img: экв (1)") .right (одушевленные); . $ ( "Img: экв (2)") .left () prependTo ( "#container"); } $ ( "#previous") .click (Предыдущая); $ ( "#next") .click (Next); $ ( "Img") .click (функция (событие) { $ ( "Img") .index (это) === 0 предыдущий (событие): следующая (событие) ;? }); $ (Окно) .resize (функция () { $ ( "Img: экв (0)") .left (одушевленные); $ ( "Img: экв (1)") .center (одушевленные); $ ( "Img: экв (2)") .right (одушевленные); }); }); </ Script> </ Head> <Body> <Div ID = "контейнер"> <Img SRC = "ru/ сор-содержание / добавления / 2014/03 / earth.jpg" ширина = "458" высота = "308" ALT = "земля"> <Img SRC = "ru/ сор-содержание / добавления / 2014/03 / flight.jpg" ширина = "512" высота = "307" ALT = "Полет"> <Img SRC = "ru/ сор-содержание / добавления / 2014/03 / rocket.jpg" ширина = "300" высота = "353" ALT = "Ракета"> На <a id="previous" href="#"> </a> По <a id="next" href="#"> </a> </ Div> </ Body> </ HTML>