JQuery UI пример - Расположение (Position)
Относительное окно, документы, анкеры, курсор / мышь и другие элементы позиционирующего элемента.
Для получения дополнительной информации о .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;">
Расположение ...
<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 = "../ сор-содержание / добавления / 2014/03 / earth.jpg" ширина = "458" высота = "308" ALT = "земля">
<Img SRC = "../ сор-содержание / добавления / 2014/03 / flight.jpg" ширина = "512" высота = "307" ALT = "Полет">
<Img SRC = "../ сор-содержание / добавления / 2014/03 / rocket.jpg" ширина = "300" высота = "353" ALT = "Ракета">
На <a id="previous" href="#"> </a>
По <a id="next" href="#"> </a>
</ Div>
</ Body>
</ HTML>