↑↑

SE@RCHER
SE@RCHER
Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT ЛУЧШИЕ JAVASCRIPT
Золотая библиотека JAVASCRIPT
1997

※ ※ ※ ※



@ ДЛЯ ПИСЕМ










ВСЕ О JQuery


»»»

JQuery селекторы

#id ||| .class ||| elements ||| *

#id - выбирает единственный элемент с переданным идентификатором (id).

Пример:
$("#lok").css("border", "1px solid red");


Данный оператор выберет элемент с id="lok" и добавит ему css-стиль, в данном случае рамку, шириной в 1 пиксел, сплошную и красную. (О способах задания css-стилей будет говориться в отдельном уроке).


.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. Таким образом, через зяпятую можно указать любые селекторы.

JQuery Фильтры

:first ||| :last ||| :even ||| :odd ||| :eq(index) ||| :gt(index) ||| :lt(index) |||


:first - выбирает первый элемент соответствующего селектора.
Пример:
$("tr:first").css("font-style", "italic");

Данная инструкция напишет курсивом первую строку таблицы.


: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 Выделение фоном только заданного количества строк в таблице

JQuery Фильтры контента

:header ||| :contains (text) ||| :empty ||| :has(selector) ||| :parent ||| :animated |||

: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 Анимационное уменьшение длины блока

JQuery Фильтры видимости

:hidden ||| :visible |||

:hidden - выбирает все скрытые элементы и элементы input, имеющие тип "hidden".
Пример:
$("div:hidden").show();
Данная инструкция покажет все скрытые div-ы.


:visible - выбирает все видимые элементы.
Пример:
$("div:visible").css("color", "red");
Данная инструкция сделает цвет текста в видимых div-ах красным.

JQuery Фильтры атрибутов

[attribute=value] ||| [attribute^=value] ||| [attribute$=value] ||| [attribute*=value] |||

[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'.

JQuery Фильтры форм

:enabled / :disabled - выбирает все элементы, имеющие активное (enabled) / запрещенное (disabled) состояние.
Пример:
$("input:enabled").css("color", "red");
Данная инструкция сделает цвет текста красным только у активных input-ов.


:checked - выбирает все элементы, которые отмечены.
Пример:
$("input:checked").lenght;
Данная инструкция сосчитает все отмеченные input-ы.


:selected - выбирает все выбранные элементы.
Пример:
$("select option:selected").lenght;
Данная инструкция сосчитает сколько выбрано элементов в списке.

JQuery Фильтры потомков

: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-ы, которые имеют кнопку и при том только одну.

 

JQuery Методы для работы с CSS-стилями


Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:
$("div").css({
border:"1px solid blue",
fontWeight:"bolder",
backgroundColor:"red"
});
Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.

инструкция добавит класс main к последнему элементу параграфа.
$("p:last").addClass("main");

инструкция удалит класс main из всех четных параграфов.
$("p:even").removeClass("main");

инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.
$("p").toggleClass("main");

инструкция позволяет получить отступы слева и сверху для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.
var offDiv=$("div").offset();

Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.
$("div").height();
$("div").height(200);


Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.
$("div").width();
$("div").width(200);


Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.
var widDiv=$("div").width();
$("div.fir").width(300);


JQuery Методы для работы с html

Данная инструкция добавит во все 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 Методы по обработке событий

инструкция говорит браузеру, что сразу после загрузки документа должна сработать функция init
$(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 Строка текста первая выделена фоном

JQuery Визуальные эффекты

hide() - скрыть,

show() - показать,

toggle() - показать, если скрыты и скрыть, если видимы.

Эти же методы гораздо интереснее использовать с анимацией:

hide(speed, callback) - скрыть,

show(speed, callback) - показать,

toggle(speed, callback) - переключить (показать, если скрыты и наоборот), где:

speed - скорость изменения высоты, ширины или свойства opacity (прозрачность) элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.

✔ Пример с hide трока текста от клика исчезает

JQuery Методы свертывания - slideDown(), slideUp() и slideToggle()

Эти методы также отвечают за видимость элементов, но работают по принципу свернуть элемент плавно снизу-вверх - развернуть элемент плавно свеху-вниз:

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(){
$('#les8_ex4').slideToggle(7000);
}

JQuery Методы исчезновения - fadeTo(), fadeOut() и fadeIn()

fadeTo(speed, opacity, callback) - уменьшает свойство opacity (прозрачность) к заданному значению,

fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),

fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность), где:

speed - скорость изменения прозрачности элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.

opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1).

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.

function fadeOutDiv(){
$('#les8_ex5').fadeOut(5000);
}
function fadeInDiv(){
$('#les8_ex5').fadeIn(5000);
}
function fadeToDiv(){
$('#les8_ex6').fadeTo(5000, 0.5);
}


✔ Еще пример fadeOut Около формы от клика постепенно исчезающий текст

✔ Еще пример fadefadeTo ото от клика с фаден-эффектом

JQuery Методы анимации - animate() и stop()

animate(params, options) - анимирует стилевые свойства, где:

params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).

options - свойства анимации (в том числе скорость).

stop() - останавливает анимацию.

function animateDiv(){
$('#les8_ex7').animate({
width:"400px",
height:"200px"
}, 3000 );
$('#les8_ex8').animate({
width:"100px",
height:"100px"
}, 3000 );
}
function stopDiv(){
$('#les8_ex7').stop();
$('#les8_ex8').stop();
}

- свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "borderWidth" вместо "border-width",
- поддерживаются только те свойства, значения которых выражаются числами.
- также в качестве значений свойств могут быть использованы значения "hide", "show" и "toggle".

JQuery ОРИГИНАЛЬНОЕ ОБРАМЛЕНИЕ

требуется файл jquery.corner.js

corner("bevel")

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

JQuery Плагин draggable - перетаскиваем элементы

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'
});
}


cursor - определяет вид курсора при перетаскивании.
$(document).ready(init);
function init(){
$("#les10_ex4").draggable({
cursor: 'crosshair'
});
}

Теперь при перетаскивании курсор принимает вид перекрестья в виде прицела. Другие возможные значения:
- e-resize - двунаправленная горизонтальная стрелка,
- n-resize - двунаправленная вертикальная стрелка,
- ne-resize - двунаправленная диагональная стрелка (из левого нижнего угла в верхний правый угол),
- nw-resize - двунаправленная диагональная стрелка (из правого нижнего угла в верхний левый угол),
- move - перекрестье из четырёх стрелок,
- text - обычный текстовый курсор,
- wait - песочные часы Windows.

delay -
определяет время в миллисекундах, по истечении которого, начнется перетаскивание (полезно для предотвращения случайного перетаскивания).
$(document).ready(init);
function init(){
$("#les10_ex5").draggable({
delay: 2000
});
}

distance - определяет расстояние в пикселах, которое указатель мыши должен пройти после того, как вы нажали на кнопку мыши, прежде чем начнется перетаскивание (так же, как и предыдущий параметр полезен для предотвращения случайного перетаскивания).
$(document).ready(init);
function init(){
$("#les10_ex6").draggable({
distance: 50
});
}


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

JQuery Плагин droppable - сбрасываем элементы

$("#lotok1").droppable({
accept: '.t_sh'
});
accept -
целевой элемент будет принимать только те элементы, которые подходят по селектору.

$("#lotok1").droppable({
activeClass: 'active'
});
activeClass -
здесь можно указать имя класса, который будет применен к целевому элементу в момент начала перемещения

$("#lotok1").droppable({
hoverClass: 'hover'
});
hoverClass -
здесь можно указать имя класса, который будет применен к целевому элементу в момент, когда перемещаемый элемент окажется над целевым элементом

$("#lotok1").droppable({
greedy: true
});
greedy -
этот параметр используется, если целевой элемент является вложенным в другой целевой элемент. По умолчанию параметр имеет значение false. Если установить в true, то сброс будет происходить во внутренний целевой элемент, но не в элемент-родитель.

$("#lotok1").droppable({
tolerance: 'fit'
});
tolerance -
определяет, когда будет происходить "сброс" элемента, при нахождении его над целевым элементом.
Возможны следующие значения:
- intersect -
перемещаемый элемент перекрыл целевой хотя бы на 50% (значение по умолчанию),
- fit –
перемещаемый элемент полностью вошел в целевой элемент,
- pointer –
указатель мыши вошел в целевой элемент,
- touch –
перемещаемый элемент пересек границу целевого.

Следующие параметры связаны с событиями:
activate - событие наступает с началом перемещения.
deactivate - событие наступает в момент окончания перемещения.
over - событие наступает при входе перемещаемого элемента в целевой.

✔ Пример mouseover Строка текста при наведении меняет цвет фона

✔ Пример mousemove Показ координат нахождения курсора

✔ Пример keyup Текстовое поле при заполнении каждого знака меняет цвет фона

✔ Пример mouseleave Строка текста при наведении меняет цвет фона

out - событие наступает при выходе перемещаемого элемента из целевого.
drop - событие наступает в момент "сброса" перемещаемого элемента в целевой.

Используя свойства этих аргументов, можно узнать координаты объекта в любой момент при перемещении:
$("#lotok1").droppable({
deactivate: function(event, ui) {
var a=event.type;
var b=ui.position.left;
var c=ui.position.top;
$('#res').text('Событие: '+a+' Координаты элемента: '+b+', '+c);
}
});
- ui.position.left - положение перемещаемого элемента относительно родительского элемента слева,
- ui.position.top - положение перемещаемого элемента относительно родительского элемента сверху,
- ui.offset.left - абсолютное положение перемещаемого элемента слева,
- ui.offset.top - абсолютное положение перемещаемого элемента сверху.

$("#lotok1").droppable(‘destroy’);
destroy - удаляет всю функциональность плагина Droppable.

$("#lotok1").droppable(‘disable’);
disable - временно запрещает работу всей функциональности плагина Droppable.

$("#lotok1").droppable(‘enable’);
enable - разрешает работу всей функциональности плагина Droppable (если она была запрещена).

$("#ex").droppable(‘option’, optionName, [value]);
option - позволяет установить значения параметров плагина после его инициализации.

✔ 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


JQuery Плагин resizable позволяет менять размеры элемента

<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'
});

animate - позволяет использовать при изменении размеров анимационный эффект.
$("#prim").resizable({
animate: true
});

✔ 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



Плагин animateDuration - позволяет задать продолжительность анимационного эффекта в миллисекундах


или используя значения: "slow" (медленно), "normal" (нормально), "fast" (быстро).
$("#les12_ex1").resizable({
animate: true,
animateDuration: 'slow'
});


Плагин animateEasing - позволяет задать эффект анимации

(можно использовать при условии подключения дополнительного плагина jQuery Easing).
$("#les12_ex1").resizable({
animate: true,
animateEasing: 'swing'
});


Плагин aspectRatio - позволяет при изменении размеров сохранять пропорции соотношения сторон.

$("#les12_ex1").resizable({
aspectRatio: true
});


Плагин cancel - запрещает изменение размеров элементов, указанных в параметре.


По умолчанию установлено ":input,option".
$("#les12_ex1").resizable({
cancel: '#les12_ex1'
});


Плагин containment - ограничивает возможность изменения размеров элемента.


В качестве значения могут выступать: селекторы, элементы DOM или значения "parent" и "document".
$("#les12_ex1").resizable({
containment: 'parent'
});

Плагин delay - определяет задержку начала изменения размеров элемента в миллисекундах.


$("#les12_ex1").resizable({
delay: 1000
});


Плагин distance - определяет количество пикселей, на которое переместиться указатель мыши, прежде, чем начнется изменение размеров элемента.


$("#les12_ex1").resizable({
distance: 100
});


Плагин ghost - устанавливает полупрозрачный вспомогательный элемент при изменении размеров элемента.


$("#les12_ex1").resizable({
ghost:true
});


Плагин helper - устанавливает класс контуру элемента при его перемещении.


$("#les12_ex1").resizable({
helper: 'ramka_green'
});


Плагин maxHeight, maxWidth, minWidth - устанавливает соответственно максимальную (минимальную) высоту и ширину изменяемого элемента.


$("#les12_ex1").resizable({
maxHeight: 200,
maxWidth: 400,
minWidth: 100,
minHeight:50
});

Следующие три параметра связаны с событиями:

start -
событие наступает с началом изменения размеров элемента.

resize - событие наступает во время изменения размеров.

stop - событие наступает при окончании изменения размеров.


При использовании этих параметров мы можем определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о значениях ширины и высоты начальных (originalSize) и конечных размеров (size) элемента).

Свойства этих аргументов:
- event.type - название события,
- ui.originalSize.width - ширина элемента до его изменения,
- ui.originalSize.height - высота элемента до его изменения,
- ui.size.width - текущая ширина элемента,
- ui.size.height - текущая высота элемента.

$("#les12_ex1").resizable({
stop: function(event, ui) {
$("#les12_res").text('Итоговые размеры: '+ui.size.width+', '+ui.size.height);
}
});

Так же, как и у плагинов draggable и droppable, у плагина resizable есть четыре метода, которые позволяют менять его работу после инициализации: destroy, disable, enable и option.

Плагин Sortable позволяет сортировать элементы, перемещая их мышкой


<html>
<head>
<title>jQuery плагин resizable</title>
<style type="text/css">
li.les13{
background:yellow;
border:1px solid blue;
color:blue;
margin:1px;
padding:2px;
}
#les13_ex1, #les13_ex2{
width:300px;
float:left;
}
</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(){
$("#authors").sortable();
});
}
</script>
</head>
<body>
<div id="les13_ex1">
<ul id="books">
<li class="les13">Булгаков М.А.</li>
<li class="les13">Горький А.М.</li>
<li class="les13">Грибоедов А.С.</li>
<li class="les13">Достоевский Ф.М.</li>
<li class="les13">Пушкин А.С.</li>
<li class="les13">Толстой Л.Н.</li>
<li class="les13">Чехов А.П.</li>
</ul>
</div>
<div id="les13_ex2">
<ul id="authors">
<li class="les13">"Война и мир"</li>
<li class="les13">"Капитанская дочка"</li>
<li class="les13">"Горе от ума"</li>
<li class="les13">"Вишневый сад"</li>
<li class="les13">"Преступление и наказание"</li>
<li class="les13">"Старуха Изергиль"</li>
<li class="les13">"Белая гвардия"</li>
</ul>
</div>
</body>
</html>


у плагина sortable есть ряд параметров.
appendTo - передает селектор или элемент, используемый в качестве контейнера для сортируемого элемента во время его перемещения (по умолчанию значение "parent").
$(function(){
$("#les13_ex3").sortable({
appendTo: '#resalt'
});
});

axis
- определяет как можно перемещать сортируемый элемент. Возможные значения: x - по горизонтали и y - по вертикали.
$(function(){
$("#les13_ex4").sortable({
axis: 'y'
});
});

cancel -
запрещает сортировку элементов с определенным селектором.
$(function(){
$("#les13_ex5").sortable({
cancel: '.les13'
});
});

connectWith -
здесь можно указать другой сортируемый список, в который можно перемещать сортируемые элементы, после чего они станут частью этого списка
$(function(){
$("#les13_ex6").sortable();
});
$(function(){
$("#les13_ex7").sortable({
connectWith: '#les13_ex6'
});
});

containment -
ограничивает перемещение элементов границами другого элемента.
$(function(){
$("#les13_ex8").sortable({
containment: 'parent'
});
});

cursor -
определяет вид курсора во время перемещения.
$(function(){
$("#les13_ex9").sortable({
cursor: 'e-resize'
});
});

delay -
определяет отсрочку начала перемещения элемента.
$(function(){
$("#les13_ex10").sortable({
delay: 1000
});
});

distance -
определяет расстояние в пикселах, которое пройдет курсор мыши прежде, чем начнется перемещение
$(function(){
$("#les13_ex11").sortable({
distance: 20
});
});

dropOnEmpty -
определяет можно ли перемещать сортируемые элементы одного списка в связанный, но пустой список. По умолчанию "true".

$(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

✔ Строка с ID выделен фоном

✔ Текст с 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 - Icons

✔ jQuery UI Button - Radios

✔ jQuery UI Button - Sppt button

✔ jQuery UI Button - Toolbar

↑ 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 - Decimal

✔ jQuery UI Spinner - Default functionapty

✔ jQuery UI Spinner - Map

✔ jQuery UI Spinner - Overflow

✔ jQuery UI Spinner - Time

↑ 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 - Sortable

✔ 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 - Forms

✔ jQuery UI Tooltip - Track the mouse

✔ jQuery UI Tooltip - Video Player demo

↑ Widget

✔ jQuery UI Widget - Default functionapty



⁂ jquery.bgiframe-2.1.2.js

⁂ jquery.corner.js

⁂ jquery.flash.js

⁂ jquery.min.js

⁂ jquery.mousewheel.js

⁂ jquery00.js

⁂ jquery01.js

⁂ jquery-1.8.3.js

⁂ jquery-ui.css

⁂ jquery-ui.js

⁂ style.css

⁂ sv_kletka.gif"

⁂ sv_shashka.gif

⁂ tem_kletka.gif"

⁂ tem_shashka.gif"

⁂ ui-anim_basic_16x16.gif"

⁂ globalize.js

⁂ globalize.culture.de-DE.js

⁂ globalize.culture.ja-JP.js

⁂ calendar.gifcalendar.gif



по материалам сайтов: http://www.site-do.ru ||| http://jqueryui.com/









Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER