※ ※ ※ ※
#id - выбирает единственный элемент с переданным идентификатором (id).
Пример:
.class - выбирает все элементы с переданным классом.
Пример:
$(".lok").css("border", "1px solid red");
Данный оператор выберет все элементы с class="lok" и добавит им css-стиль,
в данном случае рамку, шириной в 1 пиксел, сплошную и красную.
elements - выбирает все элементы с выбранным именем.
Пример:
$("div").css("border", "1px solid red");
Данный оператор выберет все div-ы и обведет их в рамки.
* - выбирает все элементы, включая head и body.
Пример:
$("*").css("border", "1px solid red");
Данный оператор добавит рамку ко всем элементам.
$("*", document.body).css("border", "1px solid
red");
Данный оператор добавит рамку ко всем элементам в тегах body.
selector1, ..., selectorN - выбирает все элементы, переданные в селекторах.
Пример:
$("div, span, p.lok").css("border", "1px solid red");
Данный оператор добавит рамку ко всем div-ам, span-ам, и абзацам, имеющим класс
lok. Таким образом, через зяпятую можно указать любые селекторы.
:last - выбирает последний элемент соответствующего селектора.
Пример:
$("tr:last").css("font-style",
"italic");
Данная инструкция напишет курсивом последнюю строку таблицы.
✔ Еще пример с :last Строка (последняя) текста
выделена фоном
:even - выбирает четные элементы, начиная с нуля.
Пример:
$("tr:even").css("font-style",
"italic");
Данная инструкция напишет курсивом все четные строки таблицы (т.к. нумерация
идет с нуля, то зрительно кажется, что нечетные строки).
✔ Еще пример с tr:even Строка таблицы через одну выделена фоном
:odd - выбирает нечетные элементы, начиная с нуля.
Пример:
$("tr:odd").css("font-style",
"italic");
Данная инструкция напишет курсивом все нечетные строки таблицы (т.к. нумерация
идет с нуля, то зрительно кажется, что четные строки).
✔ Еще пример с tr:odd Строка таблицы через одну
выделена фоном
:eq(index) - выбирает элемент по его индексу (начиная с нуля).
Пример:
$("td:eq(2)").css("font-style",
"italic");
Данная инструкция напишет курсивом текст второй ячейки таблицы (т.к. нумерация
идет с нуля, то зрительно кажется, что третьей ячейки).
✔ Пример с:eq Строка текста выделена фоном
:gt(index) - выбирает элементы с индексом больше указанного.
Пример:
$("td:gt(2)").css("font-style",
"italic");
Данная инструкция напишет курсивом текст во всех ячейках таблицы, начиная со
второй (т.к. нумерация идет с нуля, то зрительно кажется, что с третьей ячейки).
:lt(index) - выбирает элементы с индексом меньше указанного.
Пример:
$("td:lt(4)").css("font-style",
"italic");
Данная инструкция напишет курсивом текст в первых пяти ячейках таблицы.
✔ Пример с tr:lt Выделение фоном только заданного количества строк в таблице
:header - выбирает все элементы, которые являются заголовками (h1, h2...).
Пример:
$(":header").css("color",
"red");
Данная инструкция сделает все заголовки красными.
:contains (text) - выбирает элементы, которые содержат переданный текст
(text).
Пример:
$("div:contains('New')").css("text-decoration",
"underline");
Данная инструкция подчеркнет все элементы div-а, содержащие подстроку New.
:empty - выбирает все элементы, которые не содержат потомков (т.е. являются пустыми).
Пример:
$("td:empty").text("Пусто");
Данная инструкция найдет все пустые ячейки таблицы и вставит в них текст "Пусто".
:has(selector) - выбирает элементы, которые содержат хотя бы один элемент,
указанный в селекторе.
Пример:
$("div:has(p)").css("font-style",
"italic");
Данная инструкция найдет те div-ы, в которых есть хотя бы один параграф (p)
и сделает текст в них курсивом.
:parent - выбирает родительские элементы, т.е. те, у которых есть потомки.
Пример:
$("td:parent").css("font-style",
"italic");
Данная инструкция найдет все ячейки таблицы, в которых есть текст или еще что-либо,
и сделает их шрифт курсивом.
:animated - выбирает элементы, которые в данный момент являются анимированными.
Пример:
$("div:animated").css("border",
"1px solid red");
Данная инструкция найдет анимированные div-ы и обведет их рамкой.
✔ Еще пример animated Плавное увеличение фото при наведении
✔ Еще пример animated Анимационное увеличение блока
✔ Еще пример animated Строка текста от клика изменяет размер шрифта
✔ Еще пример animated Блок текста изменяет размер с фаден-эффектом
✔ Еще пример animated Анимационное уменьшение длины блока
:hidden - выбирает все скрытые элементы и элементы input, имеющие тип "hidden".
Пример:
$("div:hidden").show();
Данная инструкция покажет все скрытые div-ы.
:visible - выбирает все видимые элементы.
Пример:
$("div:visible").css("color", "red");
Данная инструкция сделает цвет текста в видимых div-ах красным.
[attribute] - выбирает все элементы с указанным атрибутом.
Пример:
$("div[id]").css("color", "red");
Данная инструкция сделает цвет текста красным во всех div-ах, у которых есть
идентификатор (id).
[attribute=value] - выбирает элементы с атрибутом, значение которого соответствует указанному.
Пример:
$("input[name='Main']").css("color", "red");
Данная инструкция сделает цвет текста красным у input-а с именем "Main".
[attribute!=value] - выбирает элементы с атрибутом, значение которого не соответствует указанному.
Пример:
$("input[name!='Main']").css("color", "red");
Данная инструкция сделает цвет текста красным у всех input-ов, кроме input-а
с именем "Main".
[attribute^=value] - выбирает все элементы, соответствующий атрибут которых начинается с указанного значения.
Пример:
$("input[name^='news']").css("color", "red");
Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name
которых начинаются с news.
[attribute$=value] - выбирает все элементы, соответствующий атрибут которых заканчивается указанным значением.
Пример:
$("input[name$='news']").css("color", "red");
Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name
которых заканчивается на news.
[attribute*=value] - выбирает все элементы, соответствующий атрибут которых содержит в качестве подстроки указанное значение.
Пример:
$("input[name*='news']").css("color", "red");
Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name
которых содержат подустроку 'news', неважно вначале, в конце или середине.
[selector1]...[selectorN] - выбирает все элементы, которые имеют указанные атрибуты и соответствующие значения.
Пример:
$("input[id][name*='news']").css("color", "red");
Данная инструкция сделает цвет текста красным у тех input-ов, у которых есть
идентификатор и атрибуты name которых содержат подустроку 'news'.
:enabled / :disabled - выбирает все элементы, имеющие активное (enabled) / запрещенное (disabled) состояние.
Пример:
$("input:enabled").css("color", "red");
Данная инструкция сделает цвет текста красным только у активных input-ов.
:checked - выбирает все элементы, которые отмечены.
Пример:
$("input:checked").lenght;
Данная инструкция сосчитает все отмеченные input-ы.
:selected - выбирает все выбранные элементы.
Пример:
$("select option:selected").lenght;
Данная инструкция сосчитает сколько выбрано элементов в списке.
:first-child - выбирает элементы, которые являются первыми потомками своих родителей.
Пример:
$("div span:first-child").css("border", "1px solid blue");
Данная инструкция обведет рамкой первый span в каждом div-е.
:last-child - выбирает элементы, которые являются последними потомками своих родителей.
Пример:
$("div span:last-child").css("border", "1px solid blue");
Данная инструкция обведет рамкой последний span в каждом div-е.
:only-child - выбирает элементы, которые являются единственными потомками своих родителей.
Пример:
$("div button:only-child").css("border", "1px solid blue");
Данная инструкция обведет рамкой те div-ы, которые имеют кнопку и при том только
одну.
Данная инструкция добавит во все div-ы с классом sp, span-ы с текстом "Привет".
$("div.sp").html("<span>Привет</span>");
Данная инструкция вернет текст из параграфа.
$("p").text();
Данная инструкция в параграфе напишет слово "Привет!".
$("p").text("Привет!");
Данная инструкция добавит в конец параграфа текст "Привет" жирным шрифтом.
$("p").append("<b>Привет</b>");
Данная инструкция добавит параграф в конец элемента с идентификатором "main".
$("p").appendTo("#main");
Данная инструкция вставит в начало параграфа текст "Привет" жирным шрифтом.
$("p").prepend("<b>Привет</b>");
Данная инструкция вставит параграф в начало элемента с идентификатором "main".
$("p").prependTo("#main");
Данная инструкция вставит после параграфа текст "Привет" жирным шрифтом.
$("p").after("<b>Привет</b>");
✔ Еще пример after Текст появляется около формы от клика по другой форме
✔ Еще пример after Текст заданный в скрипте пишется после строки с заданным классом
Данная инструкция вставит перед параграфом текст "Привет" жирным шрифтом.
$("p").befor("<b>Привет</b>");
Данная инструкция вставит параграф после элемента с идентификатором "main".
$("p").insertAfter("#main");
Данная инструкция вставит параграф перед элементом с идентификатором "main".
$("p").insertBefore("#main");
✔ ПРИМЕР
<html>
<head>
<title>jQuery html</title>
<style type="text/css">
#red_sk{
width:700px;
height:100px;
background:red;
}
.yellow_square{
float:left;
width:80px;
height:80px;
background:yellow;
margin:5px;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function addYellowSquare(){
$("#red_sk").prepend("<div class='yellow_square'></div>");
}
</script>
</head>
<body>
<div id="red_sk"></div>
<input type="button" value="Добавить!" onclick="addYellowSquare();">
</body>
</html>
инструкция обернет каждый параграф span-ом.
$("p").wrap("<span></span>");
✔ Пример с wrap Радио - Кнопка выделена фоном
✔ Пример с wrap Кнопка checkbox выделена фоном
инструкция обернет все параграфы одним span-ом.
$("p").wrapAll("<span></span>");
инструкция заменит все span-ы div-ами
$("span").replaceWith("<div></div>");
инструкция заменит все div-ы span-ами
$("span").replaceAll("<div></div>");
инструкция удалит все содержимое span-ов
$("span").empty();
✔ Пример с empty Пустые ячейки таблицы выделены фоном
инструкция удалит все span-ы
$("span").remove();
инструкция возьмет элементы, выделенные жирным и добавит их в div.
$("b").clone().append("div");
В примере, мы коснулись еще одного аспекта jQuery, а именно поддержки этой библиотекой цепочки вызовов. Т.е. вы можете вызывать несколько методов в одной строке, отделяя
их точкой.
✔ ПРИМЕР
<html>
<head>
<title>jQuery html</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function addSpisok(){
var jq=$('#user_text').val();
$('#jq').append('<li>'+jq+'</li>');
}
</script>
</head>
<body>
Наши города:
<ul id="jq">
<li>Архангельск</li>
<li>Москва</li>
<li>Иркутск</li>
</ul>
Дополните список:
<input type="text" id="user_text" size="20" maxlength="50">
<input type="button" value="Добавить" onclick="addSpisok();">
</body>
</html>
инструкция найдет первый элемент в тегах i, найдет атрибут title этого элемента и добавит его значение в div.
var a=$("i").attr("title");
$("div").text(a);
инструкция найдет все картинки и установит им соответствующие атрибуты
$("img").attr({src:"images/pict.gif", alt:"рисунок"});
инструкция установит для всех кнопок значение "disabled" атрибута "disabled"
$("button").attr("disabled", "disabled");
инструкция удалит атрибут "alt" у всех картинок
$("img").removeAttr("alt");
инструкция сделает цвет фона последнего абзаца синим, если у него класс "selected"
if ($("p:last").hasClass("selected"))
$(this).css("background","blue");
инструкция сделает цвет фона синим, только у тех абзацев, которые имеют класс "blue"
$("p").filter(".blue").css("background","blue");
инструкция сделает цвет фона синим у всех параграфов кроме тех, что имеют класс "blue"
$("p").not(".blue").css("background","blue");
инструкция добавит в параграф текст "последний", только если проверяемый элемент последний
if ($(this).is(":last-child"))
$("p").text("последний");
инструкция сделает цвет фона синим у всех параграфов с 1 по 4
$("p").slice(1,4).css("background","blue");
✔ ПРИМЕР
<html>
<head>
<title>jQuery html</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://www.03www.ru/jquery.min-no.js"></script>
<script type="text/javascript">
function addBoard(){
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if ((i%2==0 && j%2==0)|| (i%2!=0 && j%2!=0)){
$("#board").append('<div class="s_kl"></div>');
}
else $("#board").append('<div class="t_kl"></div>');
}
}
}
function addDraughts(){
$("div").filter(".t_kl").slice(0,12).append('<img src="tem_shashka.gif">');
$("div").filter(".t_kl").slice(20,32).append('<img src="sv_shashka.gif">');
}
</script>
</head>
<body>
<input type="button" value="Нарисовать доску" onclick="addBoard();">
<input type="button" value="Расставить шашки" onclick="addDraughts();"><br><br>
<div id="board"></div>
</body>
</html>
JQuery Методы по обработке событий
$(document).ready(init);
инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init (здесь click - событие, а init - функция, обработчик события).
$(div).bind('click', init);
✔ ПРИМЕР
<html>
<head>
<title>jQuery</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://www.03www.ru/jquery.min-no.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init(){
$('#lesson').bind('change', desc);
}
function desc(){
var op=$('#lesson').val();
switch (op)
{
case '1': $('#desc').text('Первый урок по jQuery знакомит с основными понятиями
и возможностями этой библиотеки.'); break;
case '2': $('#desc').text('Второй урок по jQuery знакомит с таким понятием,
как селекторы.'); break;
case '3': $('#desc').text('Третий урок по jQuery знакомит с таким понятием,
как фильтры.'); break;
}
}
</script>
</head>
<body>
Урок: <select id="lesson">
<option value='1'>Урок 1</option>
<option value='2'>Урок 2</option>
<option value='3'>Урок 3</option>
</select><br><br>
Описание: <span id="desc"></span>
</body>
</html>
инструкция говорит браузеру, что при щелчке по div-у должна сработать функция
init, но инструкции этой функции будут выполнены только один раз.
$(div).one('click', init);
инструкция говорит браузеру, что при щелчке по абзацу, его фон станет синим,
при повторном щелчке - белым.
$('p').toggle(
function(){$(this).css("background-color", "blue");},
function(){$(this).css("background-color", "white");}
);
✔ Еще пример toggle Показать убрать строку текста
инструкция говорит браузеру, что при щелчке по div-у, его фон станет синим.
$('div').click(
function(){$(this).css("background-color", "blue");}
);
инструкция говорит браузеру, что при щелчке по div-у его фон станет синим
и эмулирует это событие для первого div-а.
$('div').click(
function(){$(this).css("background-color", "blue");}
);
$('div:first').click();
✔ Еще пример с :first Строка текста первая выделена
фоном
show() - показать,
toggle() - показать, если скрыты и скрыть, если видимы.
Эти же методы гораздо интереснее использовать с анимацией:
hide(speed, callback) - скрыть,
show(speed, callback) - показать,
toggle(speed, callback) - переключить (показать, если скрыты и наоборот), где:
speed - скорость изменения высоты, ширины или свойства opacity (прозрачность) элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.✔ Пример с hide трока текста от клика исчезает
Эти методы также отвечают за видимость элементов, но работают по принципу свернуть элемент плавно снизу-вверх - развернуть элемент плавно свеху-вниз:
slideUp() - свернуть,
slideDown() - развернуть,
toggle() - развернуть, если скрыт и свернуть, если видим.
function slideUpDiv(){
$('#les8_ex3').slideUp();
}
function slideDownDiv(){
$('#les8_ex3').slideDown();
}
Эти методы также можно использовать с анимацией:
slideUp(speed, callback) - свернуть,
slideDown(speed, callback) - развернуть,
slideToggle(speed, callback) - переключить (развернуть, если скрыты и наоборот), где:
speed - скорость изменения высоты элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
function slideToggleDiv(){fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),
fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность), где:
speed - скорость изменения прозрачности элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1).
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
function fadeOutDiv(){✔ Еще пример fadeOut Около формы от клика постепенно исчезающий текст
✔ Еще пример fadefadeTo ото от клика с фаден-эффектом
params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).
options - свойства анимации (в том числе скорость).
stop() - останавливает анимацию.
function animateDiv(){corner("notch")
corner("dog")
corner("dog2")
corner("bite")
corner("cool")
corner("sharp")
corner("slide")
corner("jut")
corner("curl")
corner("tear")
corner("fray")
corner("wicked")
corner("sculpt")
Кроме этого, можно придавать форму не всем углам, а выборочно, используя ключевые
слова:
bl (нижний левый угол),
tl (верхний левый угол),
br (нижний правый угол),
tr(верхний правый угол).
Например:
$("#les9_ex16").corner("dog tl br");
Также можно задавать радиус кривизны углов в пикселах, например:
$("#les9_ex17").corner("30px");
✔ ПРИМЕР
<html>
<head>
<title>jQuery плагины</title>
<style type="text/css">
#ugo{
width:400px;
height:200px;
background:#666699;
}
</style>
<script type="text/javascript" src="https://www.03www.ru/jquery.min-no.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init(){
$("#ugo").corner("dog tl br");
}
</script>
</head>
<body>
<div id="ugo"></div>
</body>
</html>
✔ Другие примеры с
библиотекой Javascript + jquery corner
axis - ограничивает перетаскивание элемента либо по горизонтали (x) либо по вертикали (y) оси координат
$(document).ready(init);
function init(){
$("#les10_ex2").draggable({
axis:'x'
});
}
containment - ограничивает область перетаскивания. Возможные значения: parent
(родительский элемент), document (текущий документ), window (окно), [x1, y1,
x2, y2] - координаты левого верхнего и правого нижнего угла допустимой области.
$(document).ready(init);
function init(){
$("#les10_ex3").draggable({
containment:'parent'
});
}
handle - определяет, за какой элемент внутри данного осуществляется перетаскивание.
$(document).ready(init);
function init(){
$("#les10_ex7").draggable({
handle: 'p'
});
}
revert - определяет, будет ли элемент возвращен на свое место после перетаскивания
(true - да).
$(document).ready(init);
function init(){
$("#les10_ex8").draggable({
revert: true
});
}
revertDuration - определяет, за какое время элемент будет возвращен на свое
место после перетаскивания (если предыдущий параметр определен, как true).
$(document).ready(init);
function init(){
$("#les10_ex9").draggable({
revert: true,
revertDuration: 3000
});
}
zIndex - определяет значение свойства z-index (номер слоя) перемещаемого
элемента.
$(document).ready(init);
function init(){
$("#les10_ex10").draggable({
zIndex: 1
});
$("#les10_ex11").draggable({
zIndex: 2
});
$("#les10_ex12").draggable({
zIndex: 3
});
}
start - событие наступает с началом перемещения.
drag - событие происходит в течение всего времени перемещения.
stop - событие наступает при завершении перемещения.
destroy - удаляет всю функциональность плагина Draggable.
$(document).ready(init);
function init(){
start: function(event, ui) {
var a=event.type;
$('#res').text('Событие: '+a);
},
stop: function(event, ui) {
var a=event.type;
var c=ui.position.left;
var d=ui.position.top;
var e=ui.offset.left;
var f=ui.offset.top;
$('#res').text('Событие: '+a+
'\nРасстояние слева и сверху относительно родительского элемента: '+c+' '+d+
'\nАбсолютные значения расстояния слева и сверху: '+e+' '+f);
}
}
disable - временно запрещает работу всей функциональности плагина Draggable
$("#les").draggable(‘destroy’);
$("#les").draggable(‘disable’);
$("#les").draggable(‘enable’);
enable - разрешает работу всей функциональности плагина Draggable (если
она была запрещена).
$("#les").draggable(‘option’, optionName, [value]);
option - позволяет установить значения параметров плагина после его инициализации.
$(document).ready(init);
function init(){
$("#urok").draggable({
revert: true,
cursor: 'crosshair'
});
$("#metOpt").click(function(){
$("#urok").draggable("option", "revertDuration",
[5000]);
});
$("#metDis").click(function(){
$("#urok").draggable("disable");
});
$("#metEn").click(function(){
$("#urok").draggable("enable");
});
}
✔ jQuery UI Draggable + Sortable
✔ jQuery UI Draggable - Auto-scroll
✔ jQuery UI Draggable - Constrain movement
✔ jQuery UI Draggable - Cursor style
✔ jQuery UI Draggable - Delay start
✔ jQuery UI Draggable - Events
✔ jQuery UI Draggable - Handles
✔ jQuery UI Draggable - Revert position
✔ jQuery UI Draggable - Snap to element or grid
✔ Пример mouseover Строка текста при наведении меняет цвет фона
✔ Пример mousemove Показ координат нахождения курсора
✔ Пример keyup Текстовое поле при заполнении каждого знака меняет цвет фона
✔ Пример mouseleave Строка текста при наведении меняет цвет фона
out - событие наступает при выходе перемещаемого элемента из целевого.✔ jQuery UI Droppable - Accept
✔ jQuery UI Droppable - Default functionapty
✔ jQuery UI Droppable - Prevent propagation
✔ jQuery UI Droppable - Revert draggable position
✔ jQuery UI Droppable - Shopping Cart Demo
✔ jQuery UI Droppable - Simple photo manager
✔ jQuery UI Droppable - Visual feedback
<html>
<head>
<title>jQuery плагин resizable</title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="http://www.linkexchanger.su/examples_2009/ui_droppable/css/trontastic/jquery-ui-1.7.2.custom.css">
<script src="http://www.linkexchanger.su/examples_2009/ui_droppable/js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="http://www.linkexchanger.su/examples_2009/ui_droppable/js/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(init);
function init(){
$(function(){
$("#les12_ex1").resizable();
});
}
</script>
</head>
<body>
<div id="les12_ex1"></div>
</body>
</html>
$(document).ready(init);
function init(){
$(function(){
$("#prim").resizable();
});
}
alsoResize - позволяет одновременно менять размеры у нескольких элементов.
$("#prim").resizable({
alsoResize: '.res'
});
✔ jQuery UI Resizable - Animate
✔ jQuery UI Resizable - Constrain resize area
✔ jQuery UI Resizable - Default functionapty
✔ jQuery UI Resizable - Delay start
✔ jQuery UI Resizable - Helper
✔ jQuery UI Resizable - Maximum / minimum size
✔ jQuery UI Resizable - Preserve aspect ratio
✔ jQuery UI Resizable - Snap to grid
✔ jQuery UI Resizable - Synchronous resize
✔ jQuery UI Resizable - Textarea
✔ jQuery UI Resizable - Visual feedback
resize - событие наступает во время изменения размеров.
stop - событие наступает при окончании изменения размеров.
При использовании этих параметров мы можем определить функцию, которая принимает
два аргумента – event (объект события) и ui (специальный объект,
содержащий информацию о значениях ширины и высоты начальных (originalSize) и
конечных размеров (size) элемента).
Свойства этих аргументов:
- event.type - название события,
- ui.originalSize.width - ширина элемента до его изменения,
- ui.originalSize.height - высота элемента до его изменения,
- ui.size.width - текущая ширина элемента,
- ui.size.height - текущая высота элемента.
$(function(){
$("#les13_ex12").sortable();
});
$(function(){
$("#les13_ex13").sortable({
connectWith: '#les13_ex12',
dropOnEmpty: false
});
});
Плагин Selectable позволяет выбирать (выделять) элементы, щелкая по ним
мышкой (для множественного выбора - с нажатием и удержанием клавиши Ctrl или
передвижением указателя мыши с удержанием в нажатом состоянии ее левой клавиши).
<html>
<head>
<title>jQuery плагин selectable</title>
<style type="text/css">
#les14_ex1, #les14_ex2{
float:left;
}
#les14_ex2{
margin:20px;
padding:10px;
color: #6600ff;
}
#les14_selectable {
list-style-type: none;
width: 200px;
}
#les14_selectable li {
margin: 3px;
padding: 3px;
font-size: 12px;
height: 18px;
background:#cc99ff;
border:1px solid #6600ff;
}
#les14_selectable .ui-selecting {
background: #9933ff;
}
#les14_selectable .ui-selected {
background: #9933ff;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init(){
$(function(){
$("#les14_selectable").selectable()
});
};
$(document).ready(init);
function init(){
$(function(){
$("#les14_selectable").selectable({
selected: function(event, ui) {
var a=ui.selected;
if ($(a).hasClass("fruit")){
$("#les14_ex2").text("Да, " + ui.selected.innerHTML + "
это фрукт! ");
}
else {
$("#les14_ex2").text("Нет, " + ui.selected.innerHTML + "
это не фрукт! ");
}
}
})
});
};
</script>
</head>
<body>
<div id="les14_ex1">
Проверьте свои знания, выделите в списке фрукты.
<ul id="les14_selectable">
<li class="fruit">абрикос</li>
<li class="vegetables">помидор</li>
<li class="fruit">яблоко</li>
<li class="fruit">груша</li>
<li class="vegetables">репа</li>
<li class="fruit">виноград</li>
<li class="vegetables">редис</li>
</ul>
</div>
<div id="les14_ex2"></div>
</body>
</html>
Плагин Selectable реагирует и на другие события:
start - событие наступает с началом процесса выбора элемента.
selecting - событие наступает во время выбора элемента.
stop - событие наступает по окончании процесса выбора элемента.
unselected - событие наступает по окончании выбора элемента, для элементов
не попавших в выбор.
unselecting - событие наступает во время процесса выбора, когда элемент,
присутствующий в выборе, удаляется из него.
у плагина Selectable есть ряд параметров
autoRefresh - определяет пересчет положения и размеров области выделения
при попадании туда очередного элемента (по умолчанию установлено значение true).
Значение false отключает пересчет.
$(function(){
$("#les14_ex3").selectable({
autoRefresh: false
});
});
cancel - здесь можно указать селекторы jquery. Элементы, начинающиеся
с этих селекторов выбираться не будут.
$(function(){
$("#les14_ex3").selectable({
cancel: '.vegetables'
});
});
delay - определяет время в миллисекундах, после которого элемент будет выделен.
$(function(){
$("#les14_ex3").selectable({
delay: 30
});
});
distance - определяет расстояние в пикселах, которое должен пройти курсор
мыши, прежде, чем элемент будет выбран.
$(function(){
$("#les14_ex3").selectable({
distance: 30
});
});
filter - дает возможность указать селекторы элементов-потомков, которые
будут сделаны выбранными.
<ul id="les14_ex4">
<li>Первый элемент<p>Пункт 1.1</p><p>Пункт 1.2</p></li>
<li>Второй элемент<p>Пункт 2.1</p><p>Пункт 2.2</p></li>
<li>Третий элемент<p>Пункт 3.1</p><p>Пункт 3.2</p></li>
<li>Четвертый элемент<p>Пункт 4.1</p><p>Пункт 4.2</p></li>
</ul>
...
$(function(){
$("#les14_ex4").selectable({
filter: 'p'
})
});
tolerance - определяет способ выделения нескольких элементов.
Возможны два значения:
touch: допускает выбор нескольких элементов путём перетаскивания мыши
(по умолчанию),
fit: выбор нескольких элементов путём перетаскивания мыши запрещен (только
с нажатой клавишей Ctrl).
$(function(){
$("#les14_ex4").selectable({
tolerance: 'fit'
})
});
Как и у остальных плагинов UI, у плагина Selectable есть несколько методов,
с помощью которых можно управлять им после инициализации: destroy, disable,
enable, option и refresh.
✔ jQuery UI Selectable - Default functionapty
✔ jQuery UI Selectable - Display as grid
✔ jQuery UI Selectable - Seriapze
Метод refresh используется, если для параметра autoRefresh установлено
значение false. С помощью этого метода можно пересчитать положение и
размеры области выделения.
ВСЕ ПРИМЕРЫ В ОДНОМ МЕСТЕ
для перехода по страницам примеров используйте клавишу ↠
↑ draggable
✔ draggable Перетаскивание блока
✔ draggable Перетаскивание блока
✔ draggable Перетаскивание блока
↑ animate
✔ Анимационное увеличение блока animate
✔ Анимационное уменьшение длины блока
✔ Строка текста от клика изменяет размер шрифта
✔ Блок текста изменяет размер с фаден-эффектом
↑ append
✔ Вставка текста из текстового поля в список
↑ bind
✔ Выбор позиции в форме и показ текста
↑ lt
✔ Выделение фоном только заданного количества строк в таблице
↑ prepend
↑ droppable
✔ Добавление блока в другой блок кнопкой
↑ wrap
✔ Кнопка checkbox выделена фоном
✔ Радио - Кнопка выделена фоном
↑ text
✔ Кнопка показа текста var tp1
*
✔ Около формы от клика постепенно исчезающий текст fadeOut
↑ CORNER
✔ Оригинальное обрамление bevel [JQUERY corner]
✔ Оригинальное обрамление bevel [JQUERY corner]
✔ Оригинальное обрамление bite [JQUERY corner]
✔ Оригинальное обрамление cool [JQUERY corner]
✔ Оригинальное обрамление corner
✔ Оригинальное обрамление curl [JQUERY corner]
✔ Оригинальное обрамление dog [JQUERY corner]
✔ Оригинальное обрамление dog tl br [JQUERY corner]
✔ Оригинальное обрамление dog tl br [JQUERY corner]
✔ Оригинальное обрамление dog2 [JQUERY corner]
✔ Оригинальное обрамление fray [JQUERY corner]
✔ Оригинальное обрамление jut [JQUERY corner]
✔ Оригинальное обрамление dog [JQUERY corner]
✔ Оригинальное обрамление notch [JQUERY corner]
✔ Оригинальное обрамление dog2 [JQUERY corner]
✔ Оригинальное обрамление notch [JQUERY corner]
✔ Оригинальное обрамление slide [JQUERY corner]
✔ Оригинальное обрамление bite [JQUERY corner]
✔ Оригинальное обрамление cool [JQUERY corner]
✔ Оригинальное обрамление round [JQUERY corner]
✔ Оригинальное обрамление sculpt [JQUERY corner]
✔ Оригинальное обрамление sharp [JQUERY corner]
✔ Оригинальное обрамление slide [JQUERY corner]
✔ Оригинальное обрамление tear [JQUERY corner]
✔ Оригинальное обрамление wicked [JQUERY corner]
↑ zoom
✔ Плавное увеличение фото при наведении
↑ text
✔ Показ координат нахождения курсора
↑ toggle
✔ Показать убрать строку текста
↑ delegate
✔ Пример с delegate Блок от клика исчезает
↑ focusin
✔ Пример с focusin Блок выделяется фоном от клика в текстовом поле
↑ intro
✔ Пример с intro Строка с заданным ID не выделена фоном
↑ empty
✔ Пустые ячейки таблицы выделены фоном
↑ last
✔ Строка (последняя) текста выделена фоном
↑ oggle
✔ Строка от клика меняет цвет фона
↑ hover
✔ Строка при наведении меняет цвет фона
↑ id
↑ odd
✔ Строка таблицы через одну выделена фоном
✔ Строка таблицы через одну выделена фоном
↑ eq
✔ Строка текста выделена фоном через скрипт
↑ first
✔ Строка текста выделена фоном через скрипт
↑ hide
✔ Строка текста от клика исчезает
↑ mouseout
✔ Строка текста при наведении меняет цвет фона
↑ mouseenter
✔ Строка текста при наведении меняет цвет фона
↑ after
✔ Текст появляется около формы от клика по другой форме
✔ Текст заданный в скрипте пишется после строки с заданным классом
↑ file
✔ Текстовое поле input выделено фоном
↑ keyup
✔ Текстовое поле при заполнении каждого знака меняет цвет фона
↑ fadeTo
✔ Фото от клика с фаден-эффектом fadeTo
* * * *Accordion
✔ jQuery UI Accordion - Collapse content
✔ jQuery UI Accordion - Customize icons
✔ jQuery UI Accordion - Default functionapty
✔ jQuery UI Accordion - Fill space
✔ jQuery UI Accordion - No auto height
✔ jQuery UI Accordion - Open on hoverintent
✔ jQuery UI Accordion - Sortable
↑ Autocomplete
✔ jQuery UI Autocomplete - Accent folding
✔ jQuery UI Autocomplete - Categories
✔ jQuery UI Autocomplete - Combobox
✔ jQuery UI Autocomplete - Custom data and display
✔ jQuery UI Autocomplete - Default functionapty
✔ jQuery UI Autocomplete - Multiple values
✔ jQuery UI Autocomplete - Multiple, remote
✔ jQuery UI Autocomplete - Remote JSONP datasource
✔ jQuery UI Autocomplete - Remote datasource
✔ jQuery UI Autocomplete - Remote with caching
✔ jQuery UI Autocomplete - Scrollable results
✔ jQuery UI Autocomplete - XML data parsed once
↑ Button
✔ jQuery UI Button - Checkboxes
✔ jQuery UI Button - Default functionapty
✔ jQuery UI Button - Sppt button
↑ Datepicker
✔ jQuery UI Datepicker - Animations
✔ jQuery UI Datepicker - Dates in other months
✔ jQuery UI Datepicker - Default functionapty
✔ jQuery UI Datepicker - Display button bar
✔ jQuery UI Datepicker - Display inpne
✔ jQuery UI Datepicker - Display month & year menus
✔ jQuery UI Datepicker - Display multiple months
✔ jQuery UI Datepicker - Format date
✔ jQuery UI Datepicker - Icon trigger
✔ jQuery UI Datepicker - Locapze calendar
✔ jQuery UI Datepicker - Populate alternate field
✔ jQuery UI Datepicker - Restrict date range
✔ jQuery UI Datepicker - Select a Date Range
✔ jQuery UI Datepicker - Show week of the year
↑ Dialog
✔ jQuery UI Dialog - Animation
✔ jQuery UI Dialog - Basic modal
✔ jQuery UI Dialog - Default functionapty
✔ jQuery UI Dialog - Modal confirmation
✔ jQuery UI Dialog - Modal form
✔ jQuery UI Dialog - Modal message
↑ Draggable
✔ jQuery UI Draggable + Sortable
✔ jQuery UI Draggable - Auto-scroll
✔ jQuery UI Draggable - Constrain movement
✔ jQuery UI Draggable - Cursor style
✔ jQuery UI Draggable - Delay start
✔ jQuery UI Draggable - Events
✔ jQuery UI Draggable - Handles
✔ jQuery UI Draggable - Revert position
✔ jQuery UI Draggable - Snap to element or grid
↑ Droppable
✔ jQuery UI Droppable - Accept
✔ jQuery UI Droppable - Default functionapty
✔ jQuery UI Droppable - Prevent propagation
✔ jQuery UI Droppable - Revert draggable position
✔ jQuery UI Droppable - Shopping Cart Demo
✔ jQuery UI Droppable - Simple photo manager
✔ jQuery UI Droppable - Visual feedback
↑ Effects
✔ jQuery UI Effects - Animate demo
✔ jQuery UI Effects - Effect demo
✔ jQuery UI Effects - Hide Demo
✔ jQuery UI Effects - Show Demo
✔ jQuery UI Effects - Toggle Demo
✔ jQuery UI Effects - addClass demo
✔ jQuery UI Effects - removeClass Demo
✔ jQuery UI Effects - switchClass Demo
✔ jQuery UI Effects - toggleClass Demo
↑ Menu
✔ jQuery UI Menu - Default functionapty
↑ Position
✔ jQuery UI Position - Default functionapty
↑ Progressbar
✔ jQuery UI Progressbar - Animated
✔ jQuery UI Progressbar - Default functionapty
✔ jQuery UI Progressbar - Resizable
↑ Resizable
✔ jQuery UI Resizable - Animate
✔ jQuery UI Resizable - Constrain resize area
✔ jQuery UI Resizable - Default functionapty
✔ jQuery UI Resizable - Delay start
✔ jQuery UI Resizable - Helper
✔ jQuery UI Resizable - Maximum / minimum size
✔ jQuery UI Resizable - Preserve aspect ratio
✔ jQuery UI Resizable - Snap to grid
✔ jQuery UI Resizable - Synchronous resize
✔ jQuery UI Resizable - Textarea
✔ jQuery UI Resizable - Visual feedback
↑ Selectable
✔ jQuery UI Selectable - Default functionapty
✔ jQuery UI Selectable - Display as grid
✔ jQuery UI Selectable - Seriapze
↑ Slider
✔ jQuery UI Slider - Colorpicker
✔ jQuery UI Slider - Default functionapty
✔ jQuery UI Slider - Horizontal range Slider
✔ jQuery UI Slider - Multiple Sliders
✔ jQuery UI Slider - Range Slider
✔ jQuery UI Slider - Range with fixed maximum
✔ jQuery UI Slider - Range with fixed minimum
✔ jQuery UI Slider - Slider bound to select
✔ jQuery UI Slider - Slider scrollbar
✔ jQuery UI Slider - Snap to increments
✔ jQuery UI Slider - Vertical range Slider
✔ jQuery UI Slider - Vertical Slider
✔ jQuery UI Slider - Vertical Slider
↑ Sortable
✔ jQuery UI Sortable - Connect psts
✔ jQuery UI Sortable - Connect psts with Tabs
✔ jQuery UI Sortable - Default functionapty
✔ jQuery UI Sortable - Delay start
✔ jQuery UI Sortable - Display as grid
✔ jQuery UI Sortable - Drop placeholder
✔ jQuery UI Sortable - Handle empty psts
✔ jQuery UI Sortable - Include / exclude items
✔ jQuery UI Sortable - Portlets
↑ Spinner
✔ jQuery UI Spinner - Currency
✔ jQuery UI Spinner - Default functionapty
✔ jQuery UI Spinner - Overflow
↑ Tabs
✔ jQuery UI Tabs - Collapse content
✔ jQuery UI Tabs - Content via Ajax
✔ jQuery UI Tabs - Default functionapty
✔ jQuery UI Tabs - Open on mouseover
✔ jQuery UI Tabs - Simple manipulation
✔ jQuery UI Tabs - Tabs at bottom
✔ jQuery UI Tabs - Vertical Tabs functionapty
↑ Tooltip
✔ jQuery UI Tooltip - Custom Stypng
✔ jQuery UI Tooltip - Custom animation demo
✔ jQuery UI Tooltip - Custom content
✔ jQuery UI Tooltip - Default functionapty
✔ jQuery UI Tooltip - Track the mouse
✔ jQuery UI Tooltip - Video Player demo
↑ Widget
✔ jQuery UI Widget - Default functionapty
по материалам сайтов: http://www.site-do.ru ||| http://jqueryui.com/