You are on page 1of 112

Листинг 1.1.

Последовательность обработки событий
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Последовательность обработки событий</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
alert("Событие onload");
}
$(document).ready(function() {
alert("Метод ready(). Вызов 1");
});
$(document).ready(function() {
alert("Метод ready(). Вызов 2");
});
$(function() {
alert("Вызов функции $()");
});
</script>
</head>
<body>
Пример последовательности обработки событий
</body>
</html>

Листинг 1.2. Обработка конфликтных ситуаций
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Обработка конфликтных ситуаций</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function $() {
alert("Функция $() из другой библиотеки");
}
</script>
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
</head>
<body>
<div id="div1"></div>
<script type= "text/javascript">
$(); // Вызов функции из другой библиотеки
jq("#div1").html("Пример использования библиотеки jQuery");
</script>
</body>
</html>

Листинг 1.3. HTML-текст в качестве параметра функции
$()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML-текст в качестве параметра функции $()</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("<div>Вставленный текст</div>").appendTo("#div1");
});
</script>
</head>
<body>
<div id="div1">Строка 1</div>
<div id="div2">Строка 2</div>
</body>
</html>

Листинг 3.1. Получение URL-адресов всех ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Получение URL-адресов всех ссылок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$("a").each(function() {
$("#div1").append($(this).attr("href") + "<br>");
});
});
</script>
</head>
<body>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
Все URL-адреса:<br>
<div id="div1"></div>
</body>
</html>

Листинг 4.1. Выделение ссылок в зависимости от текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Функция map()</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").map(function() {
var txt = $(this).text();
if (txt == "Ссылка 1" || txt == "Ссылка 3") {
return this;
}
else {
return null; // Удаляем элемент
}
}).css("color", "red");
});
</script>
</head>
<body>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>

$("#txt2").click(function() { var w = $("#txt1").outerHeight(true).val("").height() + "<br>inner: Ширина: ". } if (h != '') { h = parseInt(h).width(w). if (!isNaN(h)) { elem. } $(document).org/TR/html4/loose.outerWidth(true) + " Высота: ".<a href="link4.val(). } .width() + " ") .html">Ссылка 4</a> </body> </html> Листинг 5.1. $("#div2") .01 Transitional//EN" "http://www.height(h).innerHeight(). if (w != '') { w = parseInt(w).val(). msg += "<br>outer: Ширина: " + elem1.innerWidth() + " Высота: " + elem1.w3.js" type="text/javascript"></script> <script type="text/javascript"> <!-function showValue() { var elem1 = $("#div1").html("Ширина: " + elem1. msg += elem1. var elem = $("#div1").val(""). msg += elem1. charset=utf-8"> <script src="jquery.dtd"> <html> <head> <title>Методы width() и height()</title> <meta http-equiv="Content-Type" content="text/html. } else alert("Необходимо ввести число!").append(msg). Методы width() и height() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. var h = $("#txt2"). var msg = "Высота: " + elem1. $("#txt1"). if (!isNaN(w)) { elem.ready(function() { $(":button").

//--> </script> <style type="text/css"> #div1 { padding:5px. removeClass() и toggleClass() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. border: black 2px dotted. function() { // Если убрать курсор .else alert("Необходимо ввести число!").2.ready(function() { $("#div1"). margin:5px. }). showValue().js" type="text/javascript"></script> <script type="text/javascript"> $(document). height:200px.org/TR/html4/loose.dtd"> <html> <head> <title>Методы addClass(). }.hover( function() { // Если навести курсор $(this). removeClass() и toggleClass()</title> <meta http-equiv="Content-Type" content="text/html.w3. charset=utf-8"> <script src="jquery. }). } showValue(). } </style> </head> <body> <div id="div1"></div> <br><b>Текущие значения:</b><br> <div id="div2"></div><br> Ширина:<br><input type="text" id="txt1"><br> Высота:<br><input type="text" id="txt2"><br> <input type="button" value="Задать новые значения"> </body> </html> Листинг 5. Методы addClass().addClass("cls2"). width:300px.removeClass().

3.w3. charset=utf-8"> <script src="jquery.dtd"> <html> <head> <title>Получение значений списка с множественным выбором</title> <meta http-equiv="Content-Type" content="text/html.cls1 { color:#000000. } ).length.removeClass().ready(function() { $("#btn1"). i<count. function() { // Если убрать курсор $(this). }). } . } </style> </head> <body> <div id="div1" class="cls1">Наведите курсор на этот текст</div><br> <div id="div2" class="cls1">Наведите курсор на этот текст</div> </body> </html> Листинг 5.js" type="text/javascript"></script> <script type="text/javascript"> $(document).toggleClass("cls2").click(function() { // Способ 1 var vals = $("#sel1").toggleClass("cls2").cls2 { color:#ff0000. for (var i=0.empty().addClass("cls1"). i++) { elem. Получение значений списка с множественным выбором <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. </script> <style type="text/css"> .append(vals[i] + " =&gt. } ).val() || []. text-decoration:none.hover( function() { // Если навести курсор $(this). var count = vals.org/TR/html4/loose.01 Transitional//EN" "http://www. $("#div2"). if (count > 0) { var elem = $("#div1"). " + . }. text-decoration:underline.$(this).

$("#sel1 option[value='" + vals[i] + "']"). " + sels.empty(). } }). var count = sels. </script> </head> <body> <select id="sel1" size="5" multiple> <option value="1">Элемент1</option> <option value="2">Элемент2</option> <option value="3">Элемент3</option> <option value="4">Элемент4</option> <option value="5">Элемент5</option> </select> <div id="div1"></div> .html("Ничего не выделено").text() + "<br>"). } }).click(function() { // Способ 3 var elem = $("#div1").text() == "") { elem. $("#btn3"). } }).text + "<br>").append(this.eq(i). i<count. if (count > 0) { var elem = $("#div1").text() + "<br>").empty().append(sels. if (elem. }). $("#btn2").click(function() { // Способ 2 var sels = $("#sel1 option:selected"). $("#sel1 option:selected"). } } else { $("#div1"). i++) { elem.html("Ничего не выделено").html("Ничего не выделено"). for (var i=0.eq(i).each(function() { elem. } } else { $("#div1"). }).val() + " =&gt. " + this.size().value + " =&gt.

w3. function() { var elem = $(this).one("click". //--> </script> </head> <body> <p>Абзац 1</p> <div style="margin:20px.01 Transitional//EN" "http://www. elem.01 Transitional//EN" "http://www. var msg = "Offset top: " + obj1.org/TR/html4/loose.offset().org/TR/html4/loose.dtd"> <html> <head> <title>Методы offset() и position()</title> <meta http-equiv="Content-Type" content="text/html.dtd"> <html> . charset=utf-8"> <script src="jquery.html(msg)."> <p style="margin:10px.top + " left: " + obj1. Методы offset() и position() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. var obj2 = elem.top + " left: " + obj2.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).left.position(). Методы scrollTop() и scrollLeft() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.<input type="button" value="Способ 1" id="btn1"><br> <input type="button" value="Способ 2" id="btn2"><br> <input type="button" value="Способ 3" id="btn3"> </body> </html> Листинг 5.left.border: black 2px dotted. }). var obj1 = elem.padding:15px.">Абзац 2</p> </div> Щелкните на абзаце </body> </html> Листинг 5.w3.4.5. }).ready(function() { $("p"). msg += " Position top: " + obj2.

}).1.scrollLeft(0). background-color:silver. }).ready(function() { $("#div1").w3.<head> <title>Методы scrollTop() и scrollLeft()</title> <meta http-equiv="Content-Type" content="text/html.scrollTop() + " left: " + elem. //--> </script> <style type="text/css"> #div1 { margin:20px.org/TR/html4/loose. } </style> </head> <body> <div id="div1">Переместите полосы прокрутки и щелкните на сером фоне чтобы увидеть значения<br> После щелчка значения будут приравнены к 0</div> </body> </html> Листинг 6.click(function() { var elem = $("body"). $(this) .01 Transitional//EN" "http://www.js" type="text/javascript"></script> <script type="text/javascript"> . width:1500px. charset=utf-8"> <script src="jquery.padding:15px.html("top: " + elem.dtd"> <html> <head> <title>Вывод ширины и высоты окна при изменении размера</title> <meta http-equiv="Content-Type" content="text/html. border: black 2px dotted.scrollLeft()). height:1500px. elem. Вывод ширины и высоты окна при изменении размера <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).scrollTop(0). charset=utf-8"> <script src="jquery.

$("#div1"). }). }).append("Событие onmouseover<br>").append("Высота: " + elem.height()). }).resize(function() { var elem = $(window).mouseover(function() { $("#log1").append("Событие onmouseout<br>").append("Событие onmouseover<br>"). $("#div1").<!-$(document).dtd"> <html> <head> <title>Особенности использования метода hover()</title> <meta http-equiv="Content-Type" content="text/html. } ).w3. function() { $("#log2"). }).ready(function() { $("#div1"). }).01 Transitional//EN" "http://www.width() + "<br>") . Особенности использования метода hover() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose.2.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). charset=utf-8"> <script src="jquery. //--> .ready(function() { $(window).append("Событие onmouseout<br>").mouseout(function() { $("#log1").hover( function() { $("#log2").html("Ширина: " + elem. //--> </script> </head> <body> <div id="div1"></div> </body> </html> Листинг 6. $("#div2"). }.

События клавиатуры <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.ready(function() { $(":text"). background-color:silver.cls1 { border:2px solid black. .cls2 { border:2px solid black.</script> <style type="text/css"> .dtd"> <html> <head> <title>События клавиатуры</title> <meta http-equiv="Content-Type" content="text/html.keyup(function(e){ $("#div1"). background-color:green. charset=utf-8"> <script src="jquery. } </style> </head> <body> <b>Отдельные обработчики:</b><br> <div class="cls1" id="div1"> <div class="cls2"> Строка 1<br> Строка 2 </div> </div> <div id="log1"></div> <b>Функция hover():</b><br> <div class="cls1" id="div2"> <div class="cls2"> Строка 1<br> Строка 2 </div> </div> <div id="log2"></div> </body> </html> Листинг 6.org/TR/html4/loose.append("keyup " + e.01 Transitional//EN" "http://www.keyCode + "<br>").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). padding:30px.3. } .

"#ffffff").val()).submit(function(){ if (window. $(":text").keyCode + "<br>").append("keydown " + e. }). }).keyCode + "<br>").css("background-color". }).dtd"> <html> <head> <title>События формы</title> <meta http-equiv="Content-Type" content="text/html.w3. $(":text").change(function(){ alert("Значение выбранного пункта " + $(this). } else return false. $("#sel1").4. charset=utf-8"> <script src="jquery.confirm("Отправить данные формы?")) { return true.blur(function() { $(this).append("keypress " + e.01 Transitional//EN" "http://www.keydown(function(e){ $("#div1").ready(function() { $(":text"). "#fffbef").}). . }).keypress(function(e){ $("#div1"). }). События формы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. $("form").org/TR/html4/loose. }).focus(function() { $(this). //--> </script> </head> <body> <input type="text"> <div id="div1"></div> </body> </html> Листинг 6.css("background-color". }).js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).

$("#btn1"). }). }).click(function(){ $("#frm").click(function(){ $("#txt1").submit().5.dtd"> <html> <head> .click(function(){ $("#txt1"). $("#btn2"). $("#btn4"). }).$(":text"). События mouseenter и mouseleave <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.blur(). }).focus(). }).select(function(){ alert("Выделен фрагмент").select().w3. }). //--> </script> </head> <body> <form id="frm"> <select id="sel1"> <option value="1">Пункт 1</option> <option value="2">Пункт 2</option> <option value="3">Пункт 3</option> <option value="4">Пункт 4</option> </select> <input type="text" id="txt1"> <input type="submit" value="Отправить"> </form> <input type="button" value="Выделить поле" id="btn1"> <input type="button" value="Установить фокус на поле" id="btn2"> <input type="button" value="Снять фокус с поля" id="btn3"> <input type="button" value="Отправить форму" id="btn4"> </body> </html> Листинг 6.01 Transitional//EN" "http://www.click(function(){ $("#txt1").org/TR/html4/loose. $("#btn3").

js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). }).bind("mouseover". $("#div2"). charset=utf-8"> <script src="jquery.append("Событие mouseout<br>").ready(function() { $("#div1").append("Событие mouseenter<br>"). } . function() { $("#log1").bind("mouseout".<title>События mouseenter и mouseleave</title> <meta http-equiv="Content-Type" content="text/html.cls1 { border:2px solid black. background-color:green.bind("mouseleave". }).append("Событие mouseover<br>").append("Событие mouseleave<br>"). } </style> </head> <body> <b>События mouseover и mouseout:</b><br> <div class="cls1" id="div1"> <div class="cls2"> Строка 1<br> . function() { $("#log1"). $("#div2"). $("#div1").cls2 { border:2px solid black. }). background-color:silver. }). function() { $("#log2"). function() { $("#log2"). padding:30px. //--> </script> <style type="text/css"> . }).bind("mouseenter".

dtd"> <html> <head> <title>Всплывание событий</title> <meta http-equiv="Content-Type" content="text/html. }).01 Transitional//EN" "http://www.w3.ready(function() { $("*").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).org/TR/html4/loose.click(function(e) { $("#div1") .append("Элемент " + $(this)[0].Строка 2 </div> </div> <div id="log1"></div> <b>События mouseenter и mouseleave:</b><br> <div class="cls1" id="div2"> <div class="cls2"> Строка 1<br> Строка 2 </div> </div> <div id="log2"></div> </body> </html> Листинг 6. charset=utf-8"> <script src="jquery. Всплывание событий <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. }). //--> </script> </head> <body> <p>Щелкните мышью <span style="color:red">здесь</span></p> <div id="div1"></div> </body> </html> .tagName + "<br>").6.

}).Листинг 6.click(function(e) { $("#div1") .7.dtd"> <html> <head> <title>Прерывание всплывания с помощью метода stopPropagation()</title> <meta http-equiv="Content-Type" content="text/html. Прерывание всплывания событий <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. return false. charset=utf-8"> <script src="jquery.w3.append("Элемент " + $(this)[0].01 Transitional//EN" "http://www. . }).js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).click(function(e) { $("#div1") .ready(function() { $("*").01 Transitional//EN" "http://www.tagName + "<br>").stopPropagation().w3.org/TR/html4/loose.ready(function() { $("*"). if (e. Прерывание всплывания с помощью метода stopPropagation() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose. //--> </script> </head> <body> <p>Щелкните мышью <span style="color:red">здесь</span></p> <div id="div1"></div> </body> </html> Листинг 6.append("Элемент " + $(this)[0]. charset=utf-8"> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).tagName + "<br>").stopPropagation) e.8.dtd"> <html> <head> <title>Прерывание всплывания событий</title> <meta http-equiv="Content-Type" content="text/html.

} else { alert("E-mail введен не правильно").css("background-color".w3. }). } }). }).4}$/i.cancelBubble = true. if (p. "#fffbef").dtd"> <html> <head> <title>Прерывание действий по умолчанию</title> <meta http-equiv="Content-Type" content="text/html. }). charset=utf-8"> <script src="jquery. } else return false. Прерывание действий по умолчанию <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.)+[a-z]{2.confirm("Отправить данные формы?")) { return true.org/TR/html4/loose.click(function() { alert("Перехода по ссылке не будет").ready(function() { $("#frm").test($("#email").01 Transitional//EN" "http://www. }).\-]+@([a-z0-9\-]+\. $("#email").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). $("a"). return false. //--> </script> </head> <body> <p>Щелкните мышью <span style="color:red">здесь</span></p> <div id="div1"></div> </body> </html> Листинг 6. return false.blur(function() { .submit(function() { var p = /^[a-z0-9_\.9.val())) { if (window.focus(function() { $(this).else e.

js" type="text/javascript"></script> <script type="text/javascript"> <!-function f_preventDefault(e) { (e. } $(document). }).submit(function(e) { var p = /^[a-z0-9_\. f_preventDefault(e).$(this). }). if (p. charset=utf-8"> <script src="jquery.html">Нажмите для перехода по ссылке</a><br><br> </body> </html> Листинг 6.01 Transitional//EN" "http://www. } else { alert("E-mail введен не правильно"). Прерывание событий с помощью метода preventDefault() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.ready(function() { $("#frm").preventDefault) ? e.)+[a-z]{2.\-]+@([a-z0-9\-]+\.dtd"> <html> <head> <title>Прерывание событий с помощью метода preventDefault()</title> <meta http-equiv="Content-Type" content="text/html.w3. "#ffffff").val())) { if (window.test($("#email").confirm("Отправить данные формы?")) { return true. .preventDefault() : e. } else f_preventDefault(e).10.4}$/i.php" method="GET" id="frm"> E-mail:<br> <input type="text" name="email" id="email"><br> <input type="submit" value="Отправить"> </form> <a href="file.returnValue = false.css("background-color".org/TR/html4/loose. //--> </script> </head> <body> <form action="file.

}).click(function() { // Находим элемент. // Отображаем элемент.is(":hidden")) { // Если элемент скрыт // Скрываем видимые элементы $("div. Сокрытие и отображение элементов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. //--> </script> </head> <body> <form action="file.hide().menu"). идущий сразу после ссылки var elem = $(this). if (elem.elem:visible"). }).} }).01 Transitional//EN" "http://www.css("background-color".js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). идущий сразу после ссылки . }). charset=utf-8"> <script src="jquery.php" method="GET" id="frm"> E-mail:<br> <input type="text" name="email" id="email"><br> <input type="submit" value="Отправить"> </form> <a href="file. f_preventDefault(e).w3. $("#email").nextAll("div.dtd"> <html> <head> <title>Сокрытие и отображение элементов</title> <meta http-equiv="Content-Type" content="text/html.click(function(e) { alert("Перехода по ссылке не будет"). }).css("background-color".1.blur(function() { $(this).html">Нажмите для перехода по ссылке</a><br><br> </body> </html> Листинг 7.ready(function() { $("a. $("a"). "#ffffff").elem:first"). "#fffbef").org/TR/html4/loose.focus(function() { $(this).

} else { // Если элемент был отображен ранее elem. 1000).animate({ left: "+=" + $("#txt1").hide().val()}.click(function() { $("#div1"). $("#btn2").2.menu { color:black.01 Transitional//EN" "http://www. charset=utf-8"> <script src="jquery.animate({ left: "-=" + $("#txt1"). // Скрываем элемент } return false.w3.ready(function() { $("#btn1").show(). Передвижение элементов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). . 1000).click(function() { $("#div1").elem.org/TR/html4/loose. //--> </script> <style type="text/css"> .val()}. // Прерываем переход по ссылке }). } . }). }).dtd"> <html> <head> <title>Передвижение элементов</title> <meta http-equiv="Content-Type" content="text/html.elem { display:none. } </style> </head> <body> <a href="#" class="menu">Отобразить или скрыть элемент <div class="elem">Скрытый элемент 1</div> <a href="#" class="menu">Отобразить или скрыть элемент <div class="elem">Скрытый элемент 2</div> <a href="#" class="menu">Отобразить или скрыть элемент <div class="elem">Скрытый элемент 3</div> <a href="#" class="menu">Отобразить или скрыть элемент <div class="elem">Скрытый элемент 4</div> </body> </html> 1</a><br> 2</a><br> 3</a><br> 4</a><br> Листинг 7.

dtd"> <html> <head> <title>Изменение ширины элементов</title> <meta http-equiv="Content-Type" content="text/html.w3. }). $("#btn4").val()}.click(function() { .animate({ top: "+=" + $("#txt1"). width:100px.01 Transitional//EN" "http://www. }). Изменение ширины элементов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose. $("#btn3").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).3. 1000). } </style> </head> <body> <input type="text" value="50px" id="txt1"> <input type="button" value="Влево" id="btn1"> <input type="button" value="Вправо" id="btn2"> <input type="button" value="Вверх" id="btn3"> <input type="button" value="Вниз" id="btn4"><br> <div id="div1" class="cls1"><div> </body> </html> Листинг 7.ready(function() { $("#btn1").val()}.click(function() { $("#div1"). 1000).cls1 { position:absolute.}).click(function() { $("#div1"). left:10px. //--> </script> <style type="text/css"> . }). charset=utf-8"> <script src="jquery. height:100px.animate({ top: "-=" + $("#txt1"). top:50px. background-color:black.

animate({ width: "show" }. $("#btn2").ready(function() { .animate({ width: "hide" }. $("#btn3").click(function() { $("#div1").animate({ width: "toggle" }.cls1 { position:absolute. }). left:10px. //--> </script> <style type="text/css"> .js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). background-color:black. top:50px. 300). charset=utf-8"> <script src="jquery.dtd"> <html> <head> <title>Параллельное и последовательное выполнение анимации</title> <meta http-equiv="Content-Type" content="text/html. } </style> </head> <body> <input type="button" value="Скрыть" id="btn1"> <input type="button" value="Отобразить" id="btn2"> <input type="button" value="Скрыть/Отобразить" id="btn3"><br> <div id="div1" class="cls1"><div> </body> </html> Листинг 7.org/TR/html4/loose.$("#div1").w3.4.click(function() { $("#div1"). height:100px. 300).01 Transitional//EN" "http://www. }). Параллельное и последовательное выполнение анимации <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. }). width:150px. }). "slow").

Прерывание анимации <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. }). { duration: 2000 }) .css({ width: "100px". duration: 2000 }) . { queue: false.cls1 { position:absolute. } </style> </head> <body> <input type="button" value="queue:false" id="btn1"> <input type="button" value="queue:true" id="btn2"><br> <div id="div1" class="cls1">Текст<div> </body> </html> Листинг 7.animate({ fontSize: "32px" }. border:black thin dotted. fontSize: "10px" }) . font-size:10px. width:100px. //--> </script> <style type="text/css"> .animate({ width: "450px". left:10px.click(function() { $("#div1") .$("#btn1"). height: "100px" }. 2000). height: "20px". height:20px.5. top:50px. 2000).01 Transitional//EN" "http://www. fontSize: "10px" }) . }). height: "20px".w3. height: "100px" }. $("#btn2"). }).dtd"> <html> <head> <title>Прерывание анимации</title> . background-color:white.css({ width: "100px".click(function() { $("#div1") .animate({ fontSize: "32px" }.org/TR/html4/loose.animate({ width: "450px".

} }).stop(). top:50px. 3000).ready(function() { $("#btn1"). }). charset=utf-8"> <script src="jquery. 3000).click(function() { if ($("#chc1").click(function() { $("#div1"). //--> </script> <style type="text/css"> .<meta http-equiv="Content-Type" content="text/html.is(":checked")) { $("#div1").cls1 { position:absolute.animate({ width: "0.animate({ width: "0. true). height:100px. $("#btn5").1px" }.click(function() { $("#div1").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). 3000).is(":checked")) { $("#div1").stop(). }). }). }). background-color:black. $("#btn4").stop(true. } </style> . left:10px. 3000). } else { $("#div1").click(function() { if ($("#chc1").stop(true).animate({ width: "450px" }. } }).1px" }. } else { $("#div1").stop(). $("#btn2").click(function() { $("#div1"). width:450px. $("#btn3").animate({ width: "450px" }.

}).queue(function() { $(this). }).cls1 { position:absolute.text("Текст").org/TR/html4/loose. elem.dtd"> <html> <head> <title>Добавление функции в очередь</title> <meta http-equiv="Content-Type" content="text/html.click(function() { var elem = $("#div1").01 Transitional//EN" "http://www.animate({ fontSize:"32px" }. fontSize:"10px" }). height:"100px" }.animate({ width:"450px".</head> <body> <input type="checkbox" id="chc1" checked> Прерывание анимации <input type="button" value="Скрыть" id="btn1"> <input type="button" value="Отобразить" id="btn2"> <input type="button" value="Остановить" id="btn3"> <input type="button" value="Остановить все" id="btn4"> <input type="button" value="Остановить все и завершить" id="btn5"><br> <div id="div1" class="cls1"><div> </body> </html> Листинг 7. elem.w3. 2000). }).js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). width:100px. elem. . charset=utf-8"> <script src="jquery. height:"20px".6. elem.text("Наш новый текст"). top:50px. left:10px.ready(function() { $("#btn1"). 2000). elem. height:20px.dequeue().css({ width:"100px". //--> </script> <style type="text/css"> . Добавление функции в очередь <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

test(pole1. var p = /^[a-z0-9_\.1.4}$/i. } p = /^[a-z0-9_\. pole1. pole2.select(). return false. charset=utf-8"> <script src="jquery. var pole2 = $("#pole2"). pole1. $("form"). } .\-]+@([a-z0-9\-]+\. border:black thin dotted.css("background-color".css("background-color". pole2.test(pole2. if (!p.16}$/i.css("background-color".select().ready(function() { $(":text.val())) { alert("Неверный пароль"). "#ffffff").org/TR/html4/loose.01 Transitional//EN" "http://www.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). return false. "#ffe4e1").background-color:white.css("background-color". if (!p. "#ffffff"). "#ffe4e1"). font-size:10px.)+[a-z]{2.css("background-color". Проверка правильности ввода E-mail и пароля <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.focus().focus().\-]{6.val())) { alert("Неверный адрес E-mail"). } </style> </head> <body> <input type="button" value="Показать" id="btn1"><br> <div id="div1" class="cls1">Текст<div> </body> </html> Листинг 8.:password").submit(function() { var pole1 = $("#pole1"). "#ffffff").w3.dtd"> <html> <head> <title>Проверка правильности ввода E-mail и пароля</title> <meta http-equiv="Content-Type" content="text/html.

} else { if (btn1. $("#pole2").org/TR/html4/loose. }).removeAttr("disabled").2.css("background-color".var msg = "Вы ввели следующие данные:\n\n E-mail: ". if (pole1. var btn1 = $("#btn1"). true).01 Transitional//EN" "http://www. alert(msg). $("#pole1"). Атрибуты readOnly и disabled <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.is(":disabled")) btn1.val() + "\n Пароль: " + pole2. true). return true. msg += pole1.keyup(function() { var pole1 = $("#pole1").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).php" method="GET"> E-mail:<br> <input type="text" name="pole1" id="pole1"><br> Пароль:<br> <input type="password" name="pole2" id="pole2"><br> <input type="submit" value="Отправить"> </form> </body> </html> Листинг 8.ready(function() { $(":text").attr("disabled".dtd"> <html> <head> <title>Атрибуты readOnly и disabled</title> <meta http-equiv="Content-Type" content="text/html.is(":disabled")) btn1.length == 0) { if (!btn1. charset=utf-8"> <script src="jquery.val(). //--> </script> </head> <body> <form action="test. }). $("#btn1").val(). } . "#ffffff"). true).attr("readonly".attr("disabled".

blur(function() { var pole3 = $("#pole3").val("").dtd"> <html> <head> <title>Добавление слов из текстового поля в поле TEXTAREA</title> <meta http-equiv="Content-Type" content="text/html. $("#pole3"). .w3. pole1. }).val().val() == "[Подсказка]") pole3. }).focus(). Добавление слов из текстового поля в поле <TEXTAREA> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.val("").val("[Подсказка]"). }). if (pole3.click(function() { $("#pole1"). $("#btn1"). //--> </script> </head> <body> <input type="text" id="pole1"><br> <input type="text" id="pole2"><br> <input type="button" value="Очистить" id="btn1"><br><br> <input type="text" id="pole3" value="[Подсказка]"> </body> </html> Листинг 8.js" type="text/javascript"></script> <script type="text/javascript"> <!-function f_click() { var pole1 = $("#pole1").val(txt2 + txt1 + "\n"). var txt1 = pole1.focus(function() { var pole3 = $("#pole3").01 Transitional//EN" "http://www.keyup(). var pole2 = $("#pole2"). }).val(). }).$("#pole2").val() == "") pole3. charset=utf-8"> <script src="jquery.org/TR/html4/loose.val("").3. if (txt1 != "") { pole2. if (pole3.val(pole1). var txt2 = pole2.

alert("Текущее значение: \n" + val).4.focus(). pole1.keyCode==13) { f_click().keypress(function(e) { if (e.focus().01 Transitional//EN" "http://www.} else { alert("Поле не заполнено!"). }). return false.w3. }). $("#pole1").val(). } } $(document). Обработка списков <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. //--> </script> </head> <body> <form action="test.focus(). } }).php" method="GET"> Слово:<br> <input type="text" name="pole1" id="pole1"><br> <input type="button" value="Добавить слово" id="btn1"><br> <textarea name="pole2" id="pole2" cols="15" rows="10"> </textarea><br> <input type="submit" value=" Значение поля "> </form> </body> </html> Листинг 8.click(function() { f_click(). }).submit(function() { var val = $("#pole2").org/TR/html4/loose. $("#btn1").ready(function() { $("#pole1"). $("#pole1"). return false.dtd"> <html> . $("form").

keyCode==13) { $("#pole2").focus().js" type="text/javascript"></script> <script type="text/javascript"> <!-var arr = []. } } $(document).focus().val(). var text2 = pole2. } }). "5"]. return false. function f_click() { // Добавление пункта в список var pole1 = $("#pole1"). pole1. val[2] = ["3".focus(). "2"]. pole1. "Тема1 Элемент2"].get(0).keypress(function(e) { if (e. "Тема2 Элемент3"].val().options[i].options[i]. charset=utf-8"> <script src="jquery. var i = sel1. arr[2] = ["Тема2 Элемент1". var text1 = pole1. if (text1 != "" && text2 != "") { var sel1 = $("#select1").length++.value = text2. pole2. var pole2 = $("#pole2").<head> <title>Пример обработки списков</title> <meta http-equiv="Content-Type" content="text/html. pole1. var val = []. "Тема2 Элемент2". arr[1] = ["Тема1 Элемент1".ready(function() { // Добавление пункта в список $("#pole1").val(""). sel1.val(""). "4". } else { alert("Поле не заполнено!").text = text1. val[1] = ["1".keypress(function(e) { . sel1. $("#pole2").

var el = $("#select4"). else alert(msg).keyCode==13) { f_click().length.get(0). if (url != 0) { window.each(function() { msg = "Значение: " + this.options[i]." + this. // Взаимосвязанные списки $("#select3").text = arr[index][i]. if (msg == "") alert("Выбранных пунктов нет").href = url.val().text. }). }). i++) { el. return false. var count = arr[index].value + " .if (e. }). for (i=0. msg += "\nТекст: " + this. $("#select4"). el.change(function() { var msg = "". $("#btn1"). } }).click(function() { var msg = "".options[i]. $("#select4 option:selected").text + "\n".value = val[index][i]. // Переход на указанный сайт $("#select5"). }). $("#select2 option:selected").click(function() { f_click().change(function() { var url = $(this). el.value.change(function() { var index = this.length = count. }). alert(msg).each(function() { msg += this. // Список со множественным выбором $("#btn2"). } }). . i<count.location.value.

}).mail. //--> </script> </head> <body> <b>Добавление пункта в список:</b><br><br> Текст пункта:<br> <input type="text" id="pole1"><br> Значение пункта:<br> <input type="text" id="pole2"><br> <select id="select1"> </select><br> <input type="button" value="Добавить" id="btn1"><br><br> <b>Список со множественным выбором:</b><br><br> <select id="select2" size="5" multiple> <option value="1" selected>Элемент1</option> <option value="2">Элемент2</option> <option value="3">Элемент3</option> <option value="4">Элемент4</option> <option value="5">Элемент5</option> <option value="6">Элемент6</option> </select><br> <input type="button" value="Значения списка" id="btn2"><br><br> <b>Взаимосвязанные списки:</b><br><br> <select id="select3" size="5"> <option value="1">Тема1</option> <option value="2">Тема2</option> </select><br> <select id="select4"> <option value="1" selected>Тема1 Элемент1</option> <option value="2">Тема1 Элемент2</option> </select><br><br> <b>Переход на указанный сайт:</b><br><br> <select id="select5"> <option value="0" selected>----------------</option> <option value="http://www.ru</option> .} }).ru/">Mail.

01 Transitional//EN" "http://www. true).ready(function() { $("#btn1"). if (elem.org/TR/html4/loose. var elem = $("#check1").click(function() { if ($("#c0"). }).val() + "\n".ru/">Рамблер</option> </select><br> </body> </html> Листинг 8.is(":checked")) { $("#frm2 :checkbox"). } var value1 = $("input[id='radio1']:checked").val(). } else { msg += "Пол: Женский\n".attr("checked". if (value1 == "male") { msg += "Пол: Мужской\n".dtd"> <html> <head> <title>Обработка флажков и переключателей</title> <meta http-equiv="Content-Type" content="text/html. } else { $("#frm2 :checkbox").click(function() { var msg = "". $("#c0").<option value="http://www. msg += "Значение: " + elem.5. } else { msg = "Флажок снят\n". Обработка флажков и переключателей <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.removeAttr("checked").rambler. charset=utf-8"> <script src="jquery. } .js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). } alert(msg).w3.is(":checked")) { msg = "Флажок установлен\n".

php" method="GET" id="frm1"> <input type="checkbox" name="check1" id="check1" value="yes" checked> Текст<br><br> Укажите ваш пол:<br> <input type="radio" name="radio1" id="radio1" value="male" checked> Мужской <input type="radio" name="radio1" id="radio1" value="female">Женский <br><br> <input type="button" value="Вывести значения" id="btn1"> </form> <form action="test.01 Transitional//EN" "http://www. }).php" method="GET" id="frm2"> <input type="checkbox" name="c0" id="c0"> Отметить/Снять все<br> <input type="checkbox" name="c[]" id="c[]" value="1"> Пункт 1<br> <input type="checkbox" name="c[]" id="c[]" value="2"> Пункт 2<br> <input type="checkbox" name="c[]" id="c[]" value="3"> Пункт 3<br> <input type="button" id="btn2" value="Вывести значения"> </form> </body> </html> Листинг 8. $("#btn2"). Обработка нажатия кнопки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. else alert(msg).}). }). charset=utf-8"> <script src="jquery. //--> </script> </head> <body> <form action="test. if (msg == "") alert("Флажки не установлены").w3. $("#frm2 input[id='c[]']:checked").each(function() { msg += "Значение: " + this.click(function() { var msg = "".org/TR/html4/loose.js" type="text/javascript"></script> <script type="text/javascript"> .6. }).dtd"> <html> <head> <title>Обработка нажатия кнопки</title> <meta http-equiv="Content-Type" content="text/html.value + "\n".

click(function() { var elem = $("#txt1").ready(function() { $("#btn1").org/TR/html4/loose.attr("disabled".w3.click(function() { . } else { if (btn1. charset=utf-8"> <script src="jquery. Вывод порядкового индекса нажатой кнопки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). }).length == 0) { if (!btn1.attr("disabled". }).7. $("#txt1").<!-$(document). $(this).01 Transitional//EN" "http://www. elem.value = elem.ready(function() { $(":button"). if (txt1. this.is(":disabled")) btn1.dtd"> <html> <head> <title>Вывод порядкового индекса нажатой кнопки</title> <meta http-equiv="Content-Type" content="text/html.val(). //--> </script> </head> <body> <input type="text" id="txt1"><br> <input type="button" value="Изменить текст на кнопке" id="btn1" disabled> </body> </html> Листинг 8. true). true).removeAttr("disabled"). } }). var btn1 = $("#btn1").is(":disabled")) btn1.val("").val().keyup(function() { var txt1 = $("#txt1").

serializeArray(). } $("#div2").text($("#frm1").click(function() { $("#div1").html(txt).alert("Индекс: " + $(":button").name + " = ". }).param(arr)). txt += arr[i]. serializeArray() и $. $("#div3").01 Transitional//EN" "http://www. var arr = $("#frm1").8. " + arr[i]. //--> </script> </head> <body> <input type="button" value="Кнопка 1"><br> <input type="button" value="Кнопка 2"><br> <button>Кнопка 3</button><br> <button>Кнопка 4</button> </body> </html> Листинг 8. serializeArray() и $. i<count.w3.text($.serialize()).js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). //--> </script> </head> <body> .org/TR/html4/loose.value + "<br>". }). Методы serialize(). }).dtd"> <html> <head> <title>Методы serialize(). var txt = "".length. count=arr. }).param()</title> <meta http-equiv="Content-Type" content="text/html.ready(function() { $("#btn1").index(this)). i++) { txt += i + " =&gt. charset=utf-8"> <script src="jquery. for (var i=0.param() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). }). Функция $.reverse().append(arr).param():</b><br> <div id="div3"></div> </body> </html> Листинг 9.1.php" method="GET" id="frm1"> <input type="text" name="txt1" id="txt1" value="Текст"><br> <input type="hidden" name="hdn1" id="hdn1" value="1"> <input type="checkbox" name="check1" id="check1" value="yes"> Текст<br> Укажите ваш пол:<br> <input type="radio" name="radio1" id="radio1" value="male" checked>Мужской <input type="radio" name="radio1" id="radio1" value="female">Женский <br> <input type="checkbox" name="c[]" id="c[]" value="1"> Пункт 1<br> <input type="checkbox" name="c[]" id="c[]" value="2"> Пункт 2<br> <input type="checkbox" name="c[]" id="c[]" value="3"> Пункт 3<br> </form> <input type="button" id="btn1" value="Получить значения"><br><br> <b>serialize():</b><br> <div id="div1"></div> <b>serializeArray():</b><br> <div id="div2"></div> <b>$.01 Transitional//EN" "http://www.get()).ready(function() { $("#div1").<form action="test. charset=utf-8"> <script src="jquery.dtd"> <html> <head> <title>Функция $.makeArray($("p"). //--> </script> </head> . $("#div1"). }).w3.makeArray()</title> <meta http-equiv="Content-Type" content="text/html.makeArray() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.click(function() { var arr = $.org/TR/html4/loose.

org/TR/html4/loose. }).unique(arr3).append("Элементов в arr3: " + arr3. </script> <style type="text/css"> .length + "<br>"). Функция $.php">Ссылка 4</a><br> <p class="cls1">Абзац</p> </body> .2. // Оставляем только уникальные значения arr3 = $.dtd"> <html> <head> <title>Функция $. charset=utf-8"> <script src="jquery.php']").unique()</title> <meta http-equiv="Content-Type" content="text/html.html" class="cls1">Ссылка 1</a><br> <a href="link2.concat(arr2).unique() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. $("#div1").length + "<br>"). $("#div1").append("Элементов в arr1: " + arr1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).cls1"). $("#div1"). $("#div1").w3.html">Ссылка 3</a><br> <a href="link4.cls1 { color:red.ready(function() { var arr1 = $("a[href$='. } </style> </head> <body> <div id="div1"></div> <a href="link1. // Объединяем два массива var arr3 = arr1.<body> <div id="div1">Нажмите здесь</div> <p>Абзац1</p> <p>Абзац2</p> <p>Абзац3</p> <p>Абзац4</p> </body> </html> Листинг 9.01 Transitional//EN" "http://www.append("Элементов в arr2: " + arr2.get(). var arr2 = $(".append("Уникальных элементов: " + arr3.length + "<br>").length + "<br>").get().php" class="cls1">Ссылка 2</a><br> <a href="link3.

removeData(elem. "myData").text("Данные сохранены"). Сохранение. //--> </script> </head> <body> <div id="div1"></div> <div id="div2"></div><br> <input type="text" id="txt1"> <input type="button" value="Сохранить" id="btn1"> <input type="button" value="Получить" id="btn2"> <input type="button" value="Удалить" id="btn3"> </body> </html> .3.data(elem. }).org/TR/html4/loose. }).</html> Листинг 9.get(0).click(function() { var elem = $("#div1").val()). charset=utf-8"> <script src="jquery. }). }).get(0).data(elem. "myData". $. $("#txt1"). $. $("#div2").dtd"> <html> <head> <title>Сохранение. $("#div2").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).text("Данные удалены").w3. $("#btn2"). "myData")).ready(function() { $("#btn1").get(0).click(function() { var elem = $("#div1"). $("#div2").01 Transitional//EN" "http://www.text("Данные: " + $. получение и удаление данных</title> <meta http-equiv="Content-Type" content="text/html. получение и удаление данных <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. $("#btn3").click(function() { var elem = $("#div1").

org/TR/html4/loose.org/1999/xhtml"> <head> <title>Определение блочной модели</title> . $("#div2").ready(function() { $("#btn1").click(function() { $("#div1").data("myData". charset=utf-8"> <script src="jquery.w3.4.text("Данные: " + $("#div1").text("Данные удалены").Листинг 9.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.click(function() { $("#div2"). }).data("myData")).text("Данные сохранены").0 Transitional//EN" "http://www. $("#txt1"). }).01 Transitional//EN" "http://www.removeData("myData").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).org/TR/xhtml1/DTD/xhtml1-transitional.w3.dtd"> <html> <head> <title>Методы data() и removeData()</title> <meta http-equiv="Content-Type" content="text/html. $("#btn2"). $("#btn3"). }).val()). Определение блочной модели <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.5.click(function() { $("#div1"). }). $("#div2").w3. //--> </script> </head> <body> <div id="div1"></div> <div id="div2"></div><br> <input type="text" id="txt1"> <input type="button" value="Сохранить" id="btn1"> <input type="button" value="Получить" id="btn2"> <input type="button" value="Удалить" id="btn3"> </body> </html> Листинг 9. Методы data() и removeData() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

//--> </script> </head> <body> <div id="div1"></div> </body> </html> Листинг 10. .php" width="0" height="0" style="display:none"> </body> </html> Листинг 10.html("Простой режим"). } else { $("#div1").org/TR/html4/loose.dtd"> <html> <head> <title>Использование тега &lt.html("Строгий режим"). charset=utf-8" /> <script src="jquery. charset=utf-8').</title> </head> <body> <form action="ajax.ready(function() { if ($.<meta http-equiv="Content-Type" content="text/html.w3. Исходный код файла ajax. } }).js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). Использование тега <iframe> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.boxModel) { $("#div1").2.01 Transitional//EN" "http://www.php" method="GET" target="frame_ajax"> <input type="text" name="text1" id="text1"><br> <input type="submit" value="Отправить"><br> </form> <div id="otvet"></div> <iframe name="frame_ajax" src="ajax.1.iframe&gt.php <?php header('Content-Type: text/html.

XMLHTTP.value = "".document.getElementById("otvet").document.XMLHTTP".document.innerHTML = "'. ENT_COMPAT. "\n". echo "</script>\n". i<4.3. $_GET['text1'].'.0".XMLHTTP"].Строка".' . Исходный код. "MSXML2. "\n". echo htmlspecialchars($msg. i++) { try { // Обработка исключений link = new ActiveXObject(XMLHTTP[i]). "Microsoft.getElementById("text1"). echo 'parent. 'UTF-8'). break. } else { echo 'Данные не получены'. echo 'parent.'.XMLHttpRequest) { link = new XMLHttpRequest(). echo "\n//-->\n". // Если объект создан.innerHTML = "Данные .getElementById("otvet").XMLHTTP. } else { if (window. "MSXML2. parent. } ?> Листинг 10. '".6.document.getElementById("text1").4. //--> </script> Листинг 10.ActiveXObject) { var XMLHTTP = ["MSXML2.value = "". то выход из цикла } catch (e) {} } } } .if (isset($_GET['text1'])) { $msg = 'Данные . echo "<!--\n". echo '<script type="text/javascript">'. for (var i=0.0". Создание объекта XMLHttpRequest if (window.3. возвращаемый сервером <script type="text/javascript"> <!-parent.

"MSXML2.0".XMLHTTP.onreadystatechange = function() { f_razborRequest(link).XMLHTTP".5.org/TR/html4/loose.3. for (var i=0. if (txt == "") { window.alert("Ваш Web-браузер не поддерживает технологию Ajax").XMLHttpRequest) { link = new XMLHttpRequest(). i++) { try { // Обработка исключений link = new ActiveXObject(XMLHTTP[i]). "Microsoft.value. то выход из цикла } catch (e) {} } } } if (!link) { window. return false. // Подготовка асинхронного запроса методом GET link.XMLHTTP"]. return false.getElementById("text1"). // Если объект создан.open('GET'. link. var txt = document. break.alert("Не заполнено поле"). } if (window.0". var url. i<4.dtd"> <html> <head> <title>Обмен данными в текстовом формате</title> <script type="text/javascript"> <!-function f_GET() { // Отправка запроса методом GET var link.XMLHTTP. } url = "/ajax.01 Transitional//EN" "http://www.ActiveXObject) { var XMLHTTP = ["MSXML2.php?text1=" + encodeURIComponent(txt).Листинг 10. url. } else { if (window. true). Обмен данными в текстовом формате <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.6. "MSXML2. .w3.

value. link.XMLHTTP.alert("Не заполнено поле").setRequestHeader('Content-Type'. break.0". // Подготовка асинхронного запроса методом POST link. if (txt == "") { window.getElementById("text1"). "MSXML2. link.onreadystatechange = function() { f_razborRequest(link).XMLHttpRequest) { link = new XMLHttpRequest(). i++) { try { // Обработка исключений link = new ActiveXObject(XMLHTTP[i]). for (var i=0. "Microsoft.ActiveXObject) { var XMLHTTP = ["MSXML2. '/ajax. i<4. return false. } function f_POST() { // Отправка запроса методом POST var link.innerHTML = "Загрузка. } // Передаваемые параметры param = "text1=" + encodeURIComponent(txt).0". // Если объект создан. } if (window.XMLHTTP. true).php'.}. то выход из цикла } catch (e) {} } } } if (!link) { window.alert("Ваш Web-браузер не поддерживает технологию Ajax").send(null). } else { if (window. // Добавляем HTTP-заголовок link. // Отправляем запрос document..XMLHTTP". 'application/x-www-form-urlencoded'). var param. "MSXML2.".getElementById("otvet")..6. return false. .3.open('POST'.XMLHTTP"]. var txt = document.

getElementById("text1").}. charset=utf-8').getElementById("otvet"). } } } //--> </script> </head> <body> <input type="text" id="text1"><br> <input type="button" value="Отправить методом GET" onclick="f_GET().readyState == 4) { if (link. } else { echo 'Данные не получены'.php <?php header('Content-Type: text/html. document...responseText.getElementById("otvet")."> <br> <input type="button" value="Отправить методом POST" onclick="f_POST().status == 200) { // Запрос успешно обработан var otvet = link.innerHTML = otvet.". } function f_razborRequest(link) { // Обрабатываем асинхронный запрос if (link.6. if (isset($_GET['text1'])) { echo 'Метод GET – '. link. $_POST['text1'].value = "".innerHTML = "Ошибка".send(param). document.getElementById("otvet"). // Отправляем запрос document. $_GET['text1']. } else { document. } else { if (isset($_POST['text1'])) { echo 'Метод POST – '. Исходный код файла ajax.innerHTML = "Загрузка."> <div id="otvet"></div> </body> </html> Листинг 10. .

var txt1 = document.7.php?text1=" + encodeURIComponent(txt1). return false.dtd"> <html> <head> <title>Обмен данными в формате XML</title> <script type="text/javascript"> <!-function f_GET() { // Отправка запроса методом GET var link. i++) { try { // Обработка исключений link = new ActiveXObject(XMLHTTP[i]).01 Transitional//EN" "http://www.XMLHTTP. то выход из цикла } catch (e) {} } } } if (!link) { window.3. var txt2 = document.value. "MSXML2.ActiveXObject) { var XMLHTTP = ["MSXML2. return false.XMLHttpRequest) { link = new XMLHttpRequest().0".w3.alert("Не заполнено поле").getElementById("text1"). var url.getElementById("text2"). . break. } else { if (window.6. Обмен данными в формате XML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. } if (window. "Microsoft.0". if (txt1 == "" || txt2 == "") { window.XMLHTTP". "MSXML2. } url = "/ajax. for (var i=0. // Если объект создан.alert("Ваш Web-браузер не поддерживает технологию Ajax").} } ?> Листинг 10.XMLHTTP.value. i<4.org/TR/html4/loose.XMLHTTP"].

url += "&text2=" + encodeURIComponent(txt2);
// Подготовка асинхронного запроса методом GET
link.open('GET', url, true);
link.onreadystatechange = function() {
f_razborRequest(link);
};
link.send(null); // Отправляем запрос
document.getElementById("otvet").innerHTML = "Загрузка...";
}
function f_razborRequest(link) {
// Обрабатываем асинхронный запрос
if (link.readyState == 4) {
if (link.status == 200) { // Запрос успешно обработан
var xml = link.responseXML;
var otvet = xml.getElementsByTagName("otvet");
var text1 = otvet.item(0).getElementsByTagName("text1").item(0);
var text2 = otvet.item(0).getElementsByTagName("text2").item(0);
var msg = text1.firstChild.data + "<br>" +
text2.firstChild.data;
document.getElementById("text1").value = "";
document.getElementById("text2").value = "";
document.getElementById("otvet").innerHTML = msg;
}
else {
document.getElementById("otvet").innerHTML = "Ошибка";
}
}
}
//-->
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="text" id="text2"><br>
<input type="button" value="Отправить методом GET" onclick="f_GET();">
<br><div id="otvet"></div>
</body>
</html>

Листинг 10.8. Исходный код файла ajax.php
<?php

header('Content-Type: text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8" ?>', "\n";
echo "<ajax>\n";
echo "
<otvet>\n";
if (isset($_GET['text1']) && isset($_GET['text2'])) {
echo "
<text1>";
echo 'Поле 1 – ';
echo htmlspecialchars($_GET['text1'], ENT_COMPAT, 'UTF-8');
echo "</text1>\n";
echo "
<text2>";
echo 'Поле 2 – ';
echo htmlspecialchars($_GET['text2'], ENT_COMPAT, 'UTF-8');
echo "</text2>\n";
}
else {
echo 'Данные не получены';
}
echo "
</otvet>\n";
echo "</ajax>\n";
?>

Листинг 10.9. XML-документ формируемый в качестве
ответа сервера
<?xml version="1.0" encoding="utf-8" ?>
<ajax>
<otvet>
<text1>Поле 1 – Строка 1</text1>
<text2>Поле 2 – Строка 2</text2>
</otvet>
</ajax>

Листинг 10.10. Обмен данными в формате JSON
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Обмен данными в формате JSON</title>
<script type="text/javascript">
<!-function f_GET() {
// Отправка запроса методом GET
var link;

var url;
var txt1 = document.getElementById("text1").value;
var txt2 = document.getElementById("text2").value;
if (txt1 == "" || txt2 == "") {
window.alert("Не заполнено поле");
return false;
}
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
if (!link) {
window.alert("Ваш Web-браузер не поддерживает технологию Ajax");
return false;
}
url = "/ajax.php?text1=" + encodeURIComponent(txt1);
url += "&text2=" + encodeURIComponent(txt2);
// Подготовка асинхронного запроса методом GET
link.open('GET', url, true);
link.onreadystatechange = function() {
f_razborRequest(link);
};
link.send(null); // Отправляем запрос
document.getElementById("otvet").innerHTML = "Загрузка...";
}
function f_razborRequest(link) {
// Обрабатываем асинхронный запрос
if (link.readyState == 4) {
if (link.status == 200) { // Запрос успешно обработан
var json = link.responseText;

ENT_COMPAT. document. echo json_encode($arr).innerHTML = "Ошибка". 'text2' => ''). } else { document."> <br> <div id="otvet"></div> </body> </html> Листинг 10. Исходный код файла ajax.value = "". ENT_COMPAT.getElementById("text2").getElementById("otvet").text2.text1 + "<br>" + otvet.innerHTML = msg. 'text2' => $text2). SQL-запрос для создания таблицы CREATE TABLE `films` ( `id` int(11) auto_increment. var msg = otvet. if (isset($_GET['text1']) && isset($_GET['text2'])) { $text1 = htmlspecialchars($_GET['text1']. document. charset=utf-8').getElementById("text1"). echo json_encode($arr). } else { $arr = array('text1' => 'Данные не получены'. 'UTF-8'). . } } } //--> </script> </head> <body> <input type="text" id="text1"><br> <input type="text" id="text2"><br> <input type="button" value="Отправить методом GET" onclick="f_GET(). document.1. $text2 = htmlspecialchars($_GET['text2'].getElementById("otvet"). } ?> Листинг 11.php <?php header('Content-Type: text/plain. 'UTF-8').var otvet = eval('(' + json + ')').value = "".11. $arr = array('text1' => $text1.

`descr`) VALUES (1. header('Last-Modified: ' .text() == "") { div. PRIMARY KEY (`id`) ) engine=MYISAM character set `utf8` collate `utf8_general_ci`. 'Описание фильма 3'). (3. 'Фильм 2'.dtd"> <html> <head> <title>Метод load()</title> <meta http-equiv="Content-Type" content="text/html. Листинг 11.01 Transitional//EN" "http://www. INSERT INTO `films` (`id`. textStatus) { if (textStatus == 'error') { div. (2. ' GMT').load("/ajax.js" type="text/javascript"></script> <script type="text/javascript"> <!-function f_show(id. if (div.php <?php // Запрещаем кеширование header('Expires: Sun. mysql_select_db('test') or die('Такой базы данных нет'). } . 'Фильм 3'.w3.`name` varchar(255) character set `utf8` collate `utf8_general_ci`. // Подключаемся к базе $db = mysql_connect('localhost'. `descr` text character set `utf8` collate `utf8_general_ci`. 27 May 2007 01:00:00 GMT'). must-revalidate'). gmdate('D. { "id": id }. charset=utf-8"> <script src="jquery.html("Ошибка при загрузке").org/TR/html4/loose. 'Описание фильма 1'). function(responseText. `name`. d M Y H:i:s') . '123456') or die('Не удалось установить подключение'). 'Фильм 1'. Содержимое файла index. header('Cache-Control: no-store. header('Pragma: no-cache'). elem) { var div = $("#div" + id). // Указываем кодировку header('Content-Type: text/html. var link = $(elem). mysql_query('SET NAMES `utf8`'). 'Описание фильма 2'). charset=utf-8').is(":hidden")) { if (div.php". 'root'. no-cache. // Кодировка соединения ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.2.

link. echo '<div id="div' . } if (isset($_POST['id'])) $id = (int)$_POST['id']. } else { div.php <?php // Указываем кодировку header('Content-Type: text/html. '.">'. $row[0] . if ($res = mysql_query($query)) { while ($row = mysql_fetch_row($res)) { echo '<a href="#" onclick="f_show(' .slideDown(300). echo "</div>\n".html("Показать"). 'UTF-8').slideUp(300).">Показать</a> <b>'. } } //--> </script> </head> <body> <?php $query = 'SELECT `id`. ?> </body> </html> Листинг 11. Содержимое файла ajax. $row[0] .html("Скрыть").3. if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) { exit('Данные отправлены не через AJAX'). . echo "</b><br>\n".div.slideDown(300). } } mysql_close($db). ENT_COMPAT. this). echo htmlspecialchars($row[1]. }). '. '" style="display:none. link.html("Скрыть"). } } else { div. `name` FROM `films` ORDER BY `name`'. link. charset=utf-8'). echo 'return false.

// Выводим описание } else { echo 'Фильм не найден'. } mysql_close($db). } } else { echo 'Ошибка при выполнении запроса'.01 Transitional//EN" "http://www.param1 + "<br>" + "param2 = " + jsonObject. ?> Листинг 11. 'root'.dtd"> <html> <head> <title>Функция $. mysql_select_db('test') or die('Такой базы данных нет'). } ). echo $row[0]. '123456') or die('Не удалось установить подключение').php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.getJSON("/ajax.4.org/TR/html4/loose. Содержимое файла index.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). function(jsonObject) { $("#div1").html("param1 = " + jsonObject.ready(function() { $(":button"). . { txt: "test" }. // Кодировка соединения $query = 'SELECT `descr` FROM `films` WHERE `id`=' . $id.click(function() { $. }).getJSON() и JSON</title> <meta http-equiv="Content-Type" content="text/html. // Подключаемся к базе $db = mysql_connect('localhost'. if ($id === 0) exit('Параметр id содержит ошибку'). charset=utf-8"> <script src="jquery. mysql_query('SET NAMES `utf8`'). if ($res = mysql_query($query)) { if (mysql_num_rows($res) != 0) { $row = mysql_fetch_row($res). }).else $id = 0.param2).w3.php".

Содержимое файла http://localhost/index.org/TR/html4/loose. Содержимое файла ajax.6.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). gmdate('D.5. charset=utf-8"> <script src="jquery.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. function(jsonObject) { .//--> </script> </head> <body> <div id="div1"></div> <input type="button" value="Получить данные"> </body> </html> Листинг 11. if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) { exit('Данные отправлены не через AJAX'). charset=utf-8'). header('Cache-Control: no-store. param2: "<?php echo $_GET['txt']. } if (!isset($_GET['txt'])) { exit('Некорректные параметры запроса').w3. ' GMT'). header('Pragma: no-cache'). d M Y H:i:s') .getJSON() и JSONP</title> <meta http-equiv="Content-Type" content="text/html.php <?php header('Expires: Sun. ?>" } Листинг 11.01 Transitional//EN" "http://www.php?txt=test&callback=?". header('Content-Type: text/javascript.getJSON("http://site1/ajax. 27 May 2007 01:00:00 GMT'). header('Last-Modified: ' . no-cache. must-revalidate').dtd"> <html> <head> <title>Функция $. } ?> { param1: "Значение 1".ready(function() { $(":button").click(function() { $.

} echo $_GET['callback'].js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). param2: "<?php echo $_GET['txt'].param1 + "<br>" + "param2 = " + jsonObject.8. }). function() { if (typeof myStatus != "undefined") alert("Данные успешно получены").getScript("http://site1/script.dtd"> <html> <head> <title>Функция $. Листинг 11.7. if (!isset($_GET['callback'])) { exit('Некорректные параметры запроса'). }).$("#div1"). .html("param1 = " + jsonObject.org/TR/html4/loose.getScript()</title> <meta http-equiv="Content-Type" content="text/html. ?>({ param1: "Данные с другого домена". charset=utf-8"> <script src="jquery.ready(function() { $(":button"). ?>" }). charset=utf-8').param2).w3.js". Содержимое файла http://localhost/index. //--> </script> </head> <body> <div id="div1"></div> <input type="button" value="Получить данные"> </body> </html> Листинг 11.php <?php header('Content-Type: text/javascript.01 Transitional//EN" "http://www. } ).click(function() { $.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Содержимое файла http://site1/ajax.

INSERT INTO `categories` VALUES (1. 'Подраздел 3.2'. no-cache.js var myStatus = "OK". 'Подраздел 3. 3). 'Подраздел 1. 2).11. INSERT INTO `categories` VALUES (5. SQL-запрос для создания таблицы CREATE TABLE `categories` ( `id` int(11) auto_increment. Листинг 11. `parentID` int(11). d M Y H:i:s') . INSERT INTO `categories` VALUES (4.1'. 3). must-revalidate'). }). .1'. 'Раздел 1'. Листинг 11.2'. 2). 1). 'Подраздел 3.else alert("Проблемы"). Содержимое файла http://site1/script. } ). INSERT INTO `categories` VALUES (7. INSERT INTO `categories` VALUES (3.2'. 0). 0). 'Подраздел 2. INSERT INTO `categories` VALUES (8. 0).3'. 'Подраздел 2.10. 'Подраздел 1. 'Раздел 3'. INSERT INTO `categories` VALUES (6. alert("Это данные с другого домена"). 27 May 2007 01:00:00 GMT'). header('Cache-Control: no-store. 'Раздел 2'. header('Last-Modified: ' . INSERT INTO `categories` VALUES (9. `name` varchar(255). ' GMT'). header('Pragma: no-cache'). 3). INSERT INTO `categories` VALUES (2. INSERT INTO `categories` VALUES (10.php <?php // Запрещаем кеширование header('Expires: Sun. 1).1'. Содержимое файла index.9. gmdate('D. }). //--> </script> </head> <body> <input type="button" value="Получить данные"> </body> </html> Листинг 11. PRIMARY KEY (`id`) ) engine=MYISAM character set `utf8` collate `utf8_general_ci`.

$. { id: $("#sel1").show(300). $("#sel2"). else alert(data).dtd"> <html> <head> <title>Функция $.stop(). 'root'.// Указываем кодировку header('Content-Type: text/html.val() }. // Кодировка соединения ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.stop().js" type="text/javascript"></script> <script type="text/javascript"> <!-function f_result(data) { if (data.php". } $(document).hide(300).w3. } $("#div1"). charset=utf-8"> <script src="jquery.ready(function() { $("#sel1").get("/ajax. }).attr("disabled". #sel2 { width:150px.get()</title> <meta http-equiv="Content-Type" content="text/html. } else { if (data == "") alert("Ошибка запроса").org/TR/html4/loose. // Подключаемся к базе $db = mysql_connect('localhost'.01 Transitional//EN" "http://www.indexOf("ERROR") == -1) { var el. }). true).change(function() { $("#div1").replaceWith(el). mysql_query('SET NAMES `utf8`'). f_result). $("#sel2"). mysql_select_db('test') or die('Такой базы данных нет'). el = '<select size="4" id="sel2">' + data + '</select>'. charset=utf-8'). //--> </script> <style type="text/css"> #sel1. '123456') or die('Не удалось установить подключение'). } </style> </head> <body> .

if ($res = mysql_query($query)) { while ($row = mysql_fetch_row($res)) { echo '<option value="' . if ($id === 0) exit('ERROR: Параметр id содержит ошибку'). '">'.<select size="4" id="sel1"> <?php $query = 'SELECT `id`. } if (isset($_GET['id'])) $id = (int)$_GET['id']. else $id = 0."> </select> <div id="div1" style="display:none. mysql_select_db('test') or die('ERROR: Такой базы данных нет').= 'WHERE `parentID`=' . // Подключаемся к базе $db = mysql_connect('localhost'. header('Pragma: no-cache'). // Указываем кодировку header('Content-Type: text/html. 'UTF-8'). Содержимое файла ajax.12. if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) { exit('ERROR: Данные отправлены не через AJAX'). echo "</option>\n".. mysql_query('SET NAMES `utf8`'). header('Last-Modified: ' . no-cache. } } mysql_close($db). ?> </select>&nbsp. charset=utf-8'). echo htmlspecialchars($row[1]. must-revalidate'). if ($res = mysql_query($query)) { .">Загрузка. `name` FROM `categories` '. 27 May 2007 01:00:00 GMT').&nbsp.&nbsp. ' GMT'). 'root'.= 'WHERE `parentID`=0 ORDER BY `name`'. ' ORDER BY `name`'. `name` FROM `categories` '. ENT_COMPAT. '123456') or die('ERROR: Не удалось установить подключение'). header('Cache-Control: no-store. // Кодировка соединения $query = 'SELECT `id`. d M Y H:i:s') .</div> </body> </html> Листинг 11. $query ..php <?php // Запрещаем кеширование header('Expires: Sun. $row[0] . $id . <select size="4" id="sel2" style="display:none. $query . gmdate('D.

} } else { echo 'ERROR: Ошибка выполнения'. header('Cache-Control: no-store. 'UTF-8'). gmdate('D.php <?php // Запрещаем кеширование header('Expires: Sun. '">'. } mysql_close($db).01 Transitional//EN" "http://www. `name` varchar(255) default ''. } } else { echo '<option value="0">Разделов нет</option>'. `msg` text. no-cache. PRIMARY KEY (`id`) ) engine=MYISAM character set `utf8` collate `utf8_general_ci` Листинг 11.dtd"> <html> . header('Last-Modified: ' . 27 May 2007 01:00:00 GMT'). `date_msg` datetime.w3. `tema` varchar(255) default ''.org/TR/html4/loose. // Указываем кодировку header('Content-Type: text/html. `status` enum('new'. d M Y H:i:s') . $row[0] . charset=utf-8'). SQL-запрос для создания таблицы CREATE TABLE `mail` ( `id` int(11) auto_increment. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. `email` varchar(255) default ''. echo "</option>\n".14. echo htmlspecialchars($row[1]. ' GMT'). 'old').13. ?> Листинг 11.if (mysql_num_rows($res) != 0) { while ($row = mysql_fetch_row($res)) { echo '<option value="' . must-revalidate'). ENT_COMPAT. Содержимое файла index. header('Pragma: no-cache').

$("#div1").html(msg). $("#tema")."). charset=utf-8"> <script src="jquery. } }).. $("#frm"). $("#emails").keypress(function(e) { if (e.keyCode==13) { $("#msg").val("").val(""). return false.val("").keypress(function(e) { if (e. xml). return false.focus().ready(function() { $("#frm"). $. xml). return false. return false.js" type="text/javascript"></script> <script type="text/javascript"> <!-function f_result(xml) { var status = $("status". } }). if (status == "ok") { $("#author").post()</title> <meta http-equiv="Content-Type" content="text/html.keyCode==13) { $("#tema").text().keypress(function(e) { if (e.html("Загрузка. }). $("#btn").<head> <title>Функция $. } $("#div1").post("/ajax. $("#author"). } }).keyCode==13) { $("#emails").submit(function() { $("#btn"). } $(document).serialize().focus().val(""). $("#msg").removeAttr("disabled").php".attr("disabled". $("#tema").eq(0).. "xml"). $("#emails").text(). . true). var msg = $("msg".focus(). f_result.eq(0).

27 May 2007 01:00:00 GMT').15. no-cache. if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) { header('Content-Type: text/html. else $emails = ''. charset=utf-8'). // Получаем данные if (isset($_POST['emails'])) $emails = $_POST['emails']. //--> </script> </head> <body> <div id="div1"></div> <form method="POST" action="ajax. must-revalidate'). header('Cache-Control: no-store. // Здесь обрабатываем данные. if (isset($_POST['author'])) $author = $_POST['author']. если отключен JavaScript exit('Данные отправлены не через AJAX'). gmdate('D. height:150px"> </textarea><br><br> <input type="submit" id="btn" value="Отправить"> </form> </body> </html> Листинг 11.php <?php // Запрещаем кеширование header('Expires: Sun.}).php" id="frm"> <b>Имя:</b><br> <input type="text" name="author" id="author" size="40"><br> <b>E-mail:</b><br> <input type="text" name="emails" id="emails" size="40"><br> <b>Тема:</b><br> <input type="text" name="tema" id="tema" size="40"><br> <b>Сообщение:</b><br> <textarea name="msg" id="msg" style="width:300px. else $tema = ''. d M Y H:i:s') . else $author = ''. header('Pragma: no-cache'). } else { // Если отправлено через AJAX // Указываем тип документа и кодировку header('Content-Type: text/xml. if (isset($_POST['tema'])) $tema = $_POST['tema']. header('Last-Modified: ' . Содержимое файла ajax. . ' GMT'). charset=utf-8').

if (isset($_POST['msg'])) $msg = $_POST['msg']. // то удаляем защитные слеши перед спецсимволами if (get_magic_quotes_gpc()) { $author = stripslashes($author). } if ($err_msg == '') { // Подключаемся к базе if (!@$db = mysql_connect('localhost'. '123456')) { $err_msg .= 'Длина поля Тема более 50 символов!<br>'. } if (mb_strlen($emails.= 'Не удалось установить подключение!<br>'. 'UTF-8') > 65000) { $err_msg .6}$/isu'. 'root'.= 'Поле Имя не заполнено!<br>'. 'UTF-8') > 60) { $err_msg .= 'Поле Сообщение не заполнено!<br>'. 'UTF-8') == 0) { $err_msg . // Удаляем пробельные символы $author = trim($author). $msg = stripslashes($msg). } if (mb_strlen($msg.= 'Недопустимый адрес E-mail !<br>'. } if (mb_strlen($author. $err_msg = ''. if (!preg_match($pattern. $tema = trim($tema). 'UTF-8') == 0) { $err_msg .)+[a-z]{2. 'UTF-8') > 50) { $err_msg . . 'UTF-8') > 30) { $err_msg . // Если директива magic_quotes_gpc включена. } if (mb_strlen($tema.= 'Длина поля Сообщение более 65000 символов!<br>'.= 'Длина поля Имя более 30 символов!<br>'. $emails)) { $err_msg .= 'Поле Тема не заполнено!<br>'. $tema = stripslashes($tema). } $pattern = '/^[a-z0-9_. else $msg = ''.= 'Длина E-mail больше 60 символов!<br>'. } if (mb_strlen($author. $msg = trim($msg).-]+@([a-z0-9-]+\. 'UTF-8') == 0) { $err_msg . } if (mb_strlen($tema. } if (mb_strlen($msg.

16.">' . $q . '$author'. $otvet = '<span style="color:red. $err_msg .= 'Не удалось сохранить сообщение<br>'. } mysql_close($db). } } } if ($err_msg == '') { // Если ошибок нет.= 'Такой базы данных нет!<br>'. $otvet . ENT_COMPAT. '$msg'. } else { $status = 'ok'. "</status>\n". $status . } else { $err_msg .org/TR/html4/loose. $q = "INSERT INTO `mail` VALUES (NULL. $tema = mysql_real_escape_string($tema).">'. font-weight:bold. $otvet = '<span style="color:green. NOW(). if (!mysql_query($q)) { $err_msg . Последовательность событий AJAX <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.} else { if (mysql_select_db('test')) { mysql_query('SET NAMES `utf8`'). '</span>'.dtd"> . echo "</ajax>\n". $otvet .01 Transitional//EN" "http://www. echo '<status>' . "</msg>\n". 'new')". } if ($err_msg != '') { $status = 'error'. ". $msg = mysql_real_escape_string($msg). } ?> Листинг 11. '$emails'. 'UTF-8'). } $otvet = htmlspecialchars($otvet. то сохраняем сообщение // При желании можно отправить на E-mail с помощью функции mail() $author = mysql_real_escape_string($author).= "'$tema'.= 'Сообщение успешно сохранено</span>'. echo '<msg>' . echo "<ajax>\n".

ajaxStart(function() { $(this).append("Локальное событие success<br>").ajax({ url: "/ajax.append("Глобальное событие ajaxStop<br>").click(function() { $. }. }). return data. success: function() { $("#div1"). }).append("Локальное событие complete<br>").append("Глобальное событие ajaxSend<br>").append("Глобальное событие ajaxError<br>"). dataType: "html". }. $(":button"). data: { id:1. }. dataFilter: function(data) { $("#div1"). }).ajaxSend(function() { $(this).append("Локальное событие dataFilter<br>").append("Глобальное событие ajaxComplete<br>"). error: function() { $("#div1").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).<html> <head> <title>Последовательность событий AJAX</title> <meta http-equiv="Content-Type" content="text/html.append("Локальное событие beforeSend<br>").ajaxSuccess(function() { $(this). cache: false.append("Глобальное событие ajaxStart<br>").ajaxError(function() { $(this). txt:"Данные" } .ajaxStop(function() { $(this). complete: function() { $("#div1").ajaxComplete(function() { $(this). }.php". beforeSend: function() { $("#div1").append("Глобальное событие ajaxSuccess<br>").ready(function() { $("#div1"). }.append("Локальное событие error<br>"). }). charset=utf-8"> <script src="jquery. }). }).

width:100px.w3. charset=utf-8"> <script src="js/jquery-1. height:100px.js" type="text/javascript"></script> <script src="js/jquery-ui-1. UI Draggable. Перемещение элементов</title> <meta http-equiv="Content-Type" content="text/html. добавляемый при перемещении элемента */ background-color:#008800.custom.3.min. } body { font-size:8pt. } </style> <script type="text/javascript"> <!-- .dtd"> <html> <head> <title>UI Draggable. border:2px solid #000000.ui-draggable { /* Класс.2.org/TR/html4/loose. добавляемый после применения метода draggable() */ background-color:#E8E8E8. top:50px.1. sans-serif. padding:2px.01 Transitional//EN" "http://www. } .min.js" type="text/javascript"></script> <style type="text/css"> * { margin:0. padding:0. }). } .ui-draggable-dragging { /* Класс.}).2. //--> </script> </head> <body> <div id="div1"></div> <input type="button" value="Получить данные"> </body> </html> Листинг 12. Перемещение элементов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. font-family:Verdana. } #draggable { position:absolute. left:50px.7. }).

charset=utf-8"> <script src="js/jquery-1.js" type="text/javascript"></script> <script src="js/jquery-ui-1. Различные варианты настроек <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. height:100px. //--> </script> </head> <body> <div id="draggable"><p>Передвинь меня с помощью мыши</p></div> </body> </html> Листинг 12.dtd"> <html> <head> <title>UI Draggable.ui-draggable { /* Класс. } </style> <script type="text/javascript"> .ready(function() { $("#draggable").min.min.2.w3. border:2px solid #000000. } .01 Transitional//EN" "http://www.draggable().js" type="text/javascript"></script> <style type="text/css"> * { margin:0. font-family:Verdana. padding:0.3.7. text-align:center. добавляемый при перемещении элемента */ background-color:#008800.2. } . }).drag { position:absolute.org/TR/html4/loose. UI Draggable. sans-serif. Различные варианты настроек</title> <meta http-equiv="Content-Type" content="text/html.2. padding:2px.ui-draggable-dragging { /* Класс.$(document). добавляемый после применения метода draggable() */ background-color:#fff4dd. } body { font-size:8pt. width:100px. } .custom.

draggable({ snap: true. // Отключаем добавление класса ui-draggable axis: "x". $("#draggable7"). // Вид курсора при перемещении delay: 200 // Задержка перед перемещением }).ready(function() { $("#draggable1"). $("#draggable2").draggable({ cursor: "crosshair". $("#draggable9"). // Вид курсора при перемещении cursorAt: { top: 0. #draggable13"). $("#draggable10").<!-$(document). }).3 // Прозрачность при перемещении }). $("#draggable5"). snapTolerance: 30 }). $("#draggable15"). //--> </script> . $("#draggable12.draggable({ cancel: "#div3" }).draggable({ zIndex: 9000 }). $("#draggable3"). // Возврат на прежнее место по окончанию перемещения cursor: "e-resize".draggable({ cursor: "move". 60] // Привязка к сетке }). $("#draggable6").draggable({ addClasses: false. $("#draggable4").draggable({ stack: { group: "#div2 div".draggable({ scroll: false }). $("#draggable14"). snapMode: "inner" }). min: 5 } }). // Перемещение только по горизонтали revert: true. opacity: 0.draggable({ snap: "#div1" }). left: 0 } // Местоположение курсора }).draggable({ helper: "clone".draggable({ scrollSensitivity: 100.draggable({ snap: "#div1". // Отключение прокрутки $("#draggable8"). handle: "#div3" }).draggable({ // Перемещение в пределах родительского элемента containment: "parent". $("#draggable11"). // После окончания перемещения возврат на прежнее место revert: true }). scrollSpeed: 20 }).draggable({ grid: [40. // Перемещение копии элемента // Копию вставляем к конец содержимого элемента BODY appendTo: "body".

left:700px. left:350px.left:250px. left:500px."> Блок можно перемещать только за верхний левый угол</div> <div id="div2" style="position:absolute. height:150px."> Блок прилипнет к границе любого перемещаемого элемента</div> <div id="draggable5" class="drag" style="top:350px.</head> <body> <div style="height:1500px. left:50px. left:750px. width:550px. left:150px."> Блок будет расположен над другим элементом в этой группе</div> </div> <div id="draggable14" class="drag" style="top:350px."> При перемещении за рамки окна прокрутки не будет</div> <div id="draggable8" class="drag" style="top:5px.">Заголовок</div> <br>Блок можно переместить только с помощью заголовка</div> .height:130px."> Блок будет расположен над другим элементом в этой группе</div> <div id="draggable13" class="drag" style="top:15px. left:700px. border:2px solid #000000. top:500px."> Блок прилипнет к границе элемента с id=div1. border:2px solid #000000. left:50px. left:600px. top:160px. left:250px."> Родительский элемент id=div1 <div id="draggable2" class="drag" style="top:15px.">Группа <div id="draggable12" class="drag" style="top:15px. left:450px. left:50px."> Блок прилипнет к границе элемента с id=div1</div> <div id="draggable6" class="drag" style="top:350px."> Блок можно передвинуть только по горизонтали</div> <div id="div1" style="position:absolute. left:200px."></div> <div id="draggable11" class="drag" style="top:200px."> Блок можно передвинуть только в пределах родительского элемента</div> </div> <div id="draggable3" class="drag" style="top:5px."> Блок будет расположен над другими элементами при перемещении</div> <div id="draggable1" class="drag" style="top:5px. left:350px."> Прокрутка начнется при расстоянии 100px от края окна до указателя мыши</div> <div id="draggable9" class="drag" style="top:5px. left:50px."> Блок можно передвинуть не менее чем на 40px по горизонтали или не менее чем на 60px по вертикали</div> <div id="draggable4" class="drag" style="top:350px."> <div id="div3" style="background-color:#ff9600. но только с внутренней стороны</div> <div id="draggable7" class="drag" style="top:5px. width:5px. height:150px."> Перемещаться будет копия блока</div> <div id="draggable10" class="drag" style="top:350px. width:550px.

добавляемый после применения метода draggable() */ background-color:#fff4dd. UI Draggable.7.3. sans-serif. } . drag: function(e. width:100px. ui) { . }."> <div id="div3" style="background-color:#ff9600. text-align:center.<div id="draggable15" class="drag" style="top:500px.ui-draggable-dragging { /* Класс. padding:2px. } .min.org/TR/html4/loose.ui-draggable { /* Класс.3. Обработка событий</title> <meta http-equiv="Content-Type" content="text/html.custom. height:100px. left:50px.">Заголовок</div> <br>Блок с помощью заголовка переместить нельзя</div> </body> </html> Листинг 12. Обработка событий <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. добавляемый при перемещении элемента */ background-color:#008800.append("Событие start<br>"). } .dtd"> <html> <head> <title>UI Draggable. } </style> <script type="text/javascript"> <!-$(document).draggable({ start: function() { $("#div2").js" type="text/javascript"></script> <style type="text/css"> body { font-size:8pt.js" type="text/javascript"></script> <script src="js/jquery-ui-1. font-family:Verdana.01 Transitional//EN" "http://www.w3.drag { position:absolute. top:10px.min.ready(function() { $("#draggable"). charset=utf-8"> <script src="js/jquery-1.2.2. border:2px solid #000000. left:700px.

сверху: " + ui. }).position. ui. $("#btn2"). }). border:2px solid #000000.html("Событие dragstart<br>"). stop: function(e. function() { $("#div2"). top:160px.top.append("Событие drag<br>"). }).click(function() { $("#draggable"). msg += ui. }).offset. function() { $("#div2").top + " px.left + " px<br>".draggable("enable").offset.сверху: " + ui.html("<p>Объект остановился</p>"). function() { $("#div2"). }).append("Событие dragstop<br>"). слева: " + ui."> Родительский элемент <div id="draggable" class="drag"><p>Передвинь меня с помощью мыши</p></div> </div> </body> </html> .draggable("disable"). //--> </script> </head> <body> <input type="button" value="Запретить" id="btn1"> <input type="button" value="Разрешить" id="btn2"><br><br> <div id="div1"></div><div id="div2"></div> <div style="position:absolute.bind("dragstart".append("Событие stop<br>").$("#div2").helper.position.bind("drag".html(msg).left + " px<br>". msg += " px. $("#btn1"). var msg = "Положение:<br> position . }). $("#div1"). }. } }).bind("dragstop". msg += "offset . height:150px. ui) { $("#div2"). слева: ". left:250px.click(function() { $("#draggable"). width:550px.append("Событие drag (bind)<br>").

3. элементов</title> <meta http-equiv="Content-Type" content="text/html.droppable({ drop: function() { alert("Попали. } }). $("#droppable1").w3. zIndex: 9000 }). } }). top:10px.01 Transitional//EN" "http://www. scope: "test"..dtd"> <html> <head> <title>UI Droppable. // Ограничение области видимости drop: function() { alert("Попали.Листинг 12.org/TR/html4/loose. . }). charset=utf-8"> <script src="js/jquery-1."). //--> </script> <style type="text/css"> body { font-size:8pt.. "Сбрасывание" элементов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. // Ограничение области видимости zIndex: 9000 }). text-align:center.draggable({ helper: "clone".custom.2. font-family:Verdana.ready(function() { $("#draggable1"). &quot. height:100px.2. left:50px.min.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). width:100px. border:2px solid #000000.droppable({ scope: "test"..js" type="text/javascript"></script> <script src="js/jquery-ui-1.min. $("#draggable2"). } div { position:absolute.Сбрасывание&quot. sans-serif.draggable({ helper: "clone". $("#droppable2"). UI Droppable.7.").4.. padding:2px.

custom. addClasses: false. // Перемещаем копию элемента zIndex: 9000 }).7. // Отключаем добавление класса ui-droppable activeClass: "cls1".left:350px.</div> </body> </html> Листинг 12. charset=utf-8"> <script src="js/jquery-1."> Блок можно сбросить только на красный квадрат</div> <div id="droppable1" style="top:50px.</div> <div id="draggable2" style="top:250px. добавляемый если сбрасывание объекта будет успешным hoverClass: "cls2".2.left:50px.js" type="text/javascript"></script> <script src="js/jquery-ui-1. drop: function() { .min. Использование опции greedy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3. UI Droppable.background-color:red.01 Transitional//EN" "http://www.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).background-color:green.droppable({ // Сбросить можно только элемент с id=draggable1 accept: "#draggable1". добавляемый при перемещении // Класс.">&nbsp.min.5.3. // Класс. $("#droppable1").background-color:#fff4dd.left:50px."> &nbsp.ready(function() { $("#draggable1"). // Объект должен целиком располагаться над элементом tolerance: "fit".left:350px.org/TR/html4/loose.dtd"> <html> <head> <title>UI Droppable.draggable({ helper: "clone". Использование опции greedy</title> <meta http-equiv="Content-Type" content="text/html."> Блок можно сбросить только на зеленый квадрат</div> <div id="droppable2" style="top:250px. } </style> </head> <body> <div id="draggable1" style="top:50px.2.

droppable("option". false) . } . border:2px solid #000000. padding:2px. } else { $("#droppable2"). } }). } . drop: function() { alert("Попали во вложенный блок"). добавляемый при перемещении элемента */ background-color:#ff9600. } .ui-draggable-dragging { /* Класс. width:100px. sans-serif. }).droppable("option".html("Вложенный блок<br>greedy = false"). true) . font-family:Verdana.alert("Попали в родительский блок").droppable("option".html("Вложенный блок<br>greedy = true"). } }). "greedy".cls1 { background-color:#ff0000. "greedy". } }).droppable({ greedy: true. "greedy")) { $("#droppable2"). activeClass: "cls1". $("#btn1"). $("#droppable2"). } div { position:absolute.cls2 { background-color:#008800. text-align:center.click(function() { if ($("#droppable2"). hoverClass: "cls2". //--> </script> <style type="text/css"> body { font-size:8pt. } </style> </head> <body><br><br> . height:100px. background-color:#fff4dd.

"#fff4dd"). ui.js" type="text/javascript"></script> <script src="js/jquery-ui-1.org/TR/html4/loose. UI Droppable.<input type="button" value="Поменять значение опции greedy" id="btn1"> <div id="draggable1" style="top:150px.6.append("Событие over<br>").css("background-color". $("#droppable").append("Событие activate<br>").left:20px.2.min. ui) { $("#span1").draggable({ revert: "invalid".height:120px. "#ff9600").helper. zIndex: 9000 }). .w3.css("background-color".css("background-color".7. deactivate: function(e.ready(function() { $("#draggable1"). $(this). over: function() { $("#span1"). zIndex: 9000 }).min. "#008800").height:250px.draggable({ revert: "valid". }.3. $("#draggable3").width:250px. ui.css("background-color"."> Вложенный блок<br>greedy = true</div> </div> </body> </html> Листинг 12. $("#draggable2").draggable({ helper: "clone".dtd"> <html> <head> <title>UI Droppable.custom. Обработка событий</title> <meta http-equiv="Content-Type" content="text/html.left:350px. zIndex: 9000 }).droppable({ activate: function(e.01 Transitional//EN" "http://www. }.helper.append("Событие deactivate<br>"). "#fff4dd").width:200px."> Блок-цель <div id="droppable2" style="top:110px. ui) { $("#span1"). charset=utf-8"> <script src="js/jquery-1.left:50px.2.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). Обработка событий <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. $(this)."> Сбрось меня на вложенный блок</div> <div id="droppable1" style="top:50px. }.

top +" px.offset.append("Событие dropout<br>"). border:2px solid #000000. sans-serif.сверху: " + ui. }.css("background-color". } div { position:absolute.append("Событие dropdeactivate<br>"). "#fff4dd").append("Событие dropover<br>"). }). $("#btn2").bind("dropactivate". }).position.position. drop: function(e. }).html("Событие dropactivate<br>").droppable("enable").top + " px.left.bind("dropdeactivate". function() { $("#span1").bind("drop".click(function() { $("#droppable"). function() { $("#span1"). }). font-family:Verdana.append("Событие drop<br>" + msg). text-align:center.offset. function() { $("#span1").append("Событие drop (bind)<br>"). } }). msg += ui. слева: " + ui.bind("dropout". height:100px. background-color:#fff4dd. }). } </style> </head> <body> <input type="button" value="Запретить" id="btn1"> <input type="button" value="Разрешить" id="btn2"><br><br> . function() { $("#span1").out: function() { $("#span1"). function() { $("#span1"). //--> </script> <style type="text/css"> body { font-size:8pt. слева: ". $(this). $("#btn1").сверху: ". }). }).append("Событие out<br>"). ui) { var msg = "Координаты сброса:<br> position . msg += ui.click(function() { $("#droppable"). padding:2px.left + " px<br>".droppable("disable").bind("dropover". width:100px. }). msg += " px<br>offset . $("#span1").

<span id="span1"></span> <div id="draggable1" style="top:50px. } . } </style> <script type="text/javascript"> <!-$(document).left:600px. height:18px. border: 1px solid #000000. } . padding: 5px 5px 5px 20px. } ul { margin:0.3.01 Transitional//EN" "http://www. font-weight:bold..width:250px.min.disableSelection().7. $("#draggable li").w3.2. //--> . sans-serif. width:200px.js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.left:600px.ready(function() { $("#sortable"). list-style-type:none.left:250px.2.sortable().org/TR/html4/loose.js" type="text/javascript"></script> <script src="js/jquery-ui-1.min. sans-serif."> Блок-цель</div> </body> </html> Листинг 12. padding:0.itemColor1 { background-color:#fff4dd. Сортировка элементов списка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.itemColor2 { background-color:#d5dee7. font-family:Verdana.draggable({ helper: "clone".z-index:5"> Перемещаемый блок 2<br>revert = valid</div> <div id="draggable3" style="top:350px.disableSelection().z-index:5"> Перемещаемый блок 1<br>revert = invalid</div> <div id="draggable2" style="top:200px. // Перемещение копии элемента // Пункты можно добавить в список с id=sortable connectToSortable: "#sortable" }).dtd"> <html> <head> <title>UI Sortable.custom. font-size:16px.7. color:#000000.height:250px. font-family:Verdana.z-index:5"> Перемещаемый блок 3<br>helper = clone</div> <div id="droppable" style="top:50px. } li { margin: 0 3px 3px 20px.. UI Sortable. Сортировка элементов списка</title> <meta http-equiv="Content-Type" content="text/html. // Запрещаем выделение текста пунктов }).left:600px. charset=utf-8"> <script src="js/jquery-1.

color:#000000. width:200px.min.org/TR/html4/loose.itemColor1 { background-color:#fff4dd.3.01 Transitional//EN" "http://www. font-family:Verdana. font-size:16px. UI Sortable. } </style> <script type="text/javascript"> <!-- .w3. list-style-type:none.2. background-color:#ffe9b3. } .8. } li { margin: 0 3px 3px 20px.2.custom. height:18px. sans-serif.cls1 { border: dotted 1px black. Различные варианты настроек <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. } .">Из этого списка можно добавить пункты в сортируемый список</span><br><br> <ul id="draggable"> <li class="itemColor2">Пункт 1</li> <li class="itemColor2">Пункт 2</li> <li class="itemColor2">Пункт 3</li> <li class="itemColor2">Пункт 4</li> </ul> </body> </html> Листинг 12.">Сортируемый список</span><br><br> <ul id="sortable"> <li class="itemColor1">Пункт 1</li> <li class="itemColor1">Пункт 2</li> <li class="itemColor1">Пункт 3</li> <li class="itemColor1">Пункт 4</li> </ul><br><br> <span style="font-weight:bold. font-weight:bold. font-family:Verdana.js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.7.itemColor2 { background-color:#d5dee7. Различные варианты настроек</title> <meta http-equiv="Content-Type" content="text/html. } ul { margin:0.</script> </head> <body> <span style="font-weight:bold.min.dtd"> <html> <head> <title>UI Sortable.js" type="text/javascript"></script> <script src="js/jquery-ui-1. border: 1px solid #000000. charset=utf-8"> <script src="js/jquery-1. sans-serif. padding:0. padding: 5px 5px 5px 20px. } .

</span> </li> <li class="itemColor1">Пункт 2</li> <li class="itemColor1">Пункт 3</li> <li class="itemColor1">Пункт 4</li> </ul><br><br> <span style="font-weight:bold.&nbsp. // Куда можно переместить delay: 200 // Задержка перед перемещением }). //--> </script> </head> <body> <span style="font-weight:bold.#sortable3". // Степень прозрачности helper: "clone". // Вид курсора при перемещении cancel: "span".sortable({ connectWith: "#sortable1.">&nbsp. // Перемещение с анимацией containment: "window".">Сортируемый список 2</span><br><br> <ul id="sortable2"> <li class="itemColor2">Пункт 1</li> <li class="itemColor2">Пункт 2</li> <li class="itemColor2">Пункт 3</li> <li class="itemColor2">Пункт 4</li> . // Куда можно переместить dropOnEmpty: false. // Перемещение копии пункта списка placeholder: "cls1". // Перемещение в пределах окна opacity: 0. // Перемещение только по вертикали cursor: "s-resize". // За элемент SPAN переместить нельзя connectWith: "#sortable2.&nbsp.ready(function() { $("#sortable1").disableSelection(). }).disableSelection().#sortable2" // Куда можно переместить }).sortable({ revert: true. $("#sortable3"). // Добавить элементы в пустой список нельзя cursorAt: { top: 0 } // Перемещение за верхнюю границу }).&nbsp. $("#sortable2"). // Класс для "заглушки" connectWith: "#sortable1.">Сортируемый список 1</span><br> За красный прямоугольник переместить элемент нельзя<br><br> <ul id="sortable1"> <li class="itemColor1">Пункт 1 <span style="background-color:red.5.disableSelection().sortable({ items: "li".$(document).#sortable3". // Перемещаем элементы LI axis: "y".

width: 300px. // Куда можно переместить start: function(e. .sortable({ items: "div". background-color: #fffbef. margin: 0 0 5px 0.ready(function() { $("#sections"). height: 100px.</ul><br><br> <span style="font-weight:bold.3.margin:5px. border: 1px solid #000000.7. color: #000000.padding:5px. } body { font-size:10pt. charset=utf-8"> <script src="js/jquery-1. ui. sans-serif.min.01 Transitional//EN" "http://www. font-size: 12pt. } . // Сортируемые элементы handle: "h2". #sections2 { width: 400px.css("background-color".find("h2"). "#ff0000").html("Событие start<br>"). } h2 { background-color: #ffe9b3. } </style> <script type="text/javascript"> <!-$(document). padding: 0.w3. // Перемещение только за заголовок revert: true.2.js" type="text/javascript"></script> <script src="js/jquery-ui-1.2. Обработка событий <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. // Перемещение с анимацией connectWith: "#sections2".section { margin: 0 0 15px 5px.9. font-weight: bold.dtd"> <html> <head> <title>UI Sortable." id="sortable3"> </ul> </body> </html> Листинг 12. font-family:Verdana. UI Sortable.custom.org/TR/html4/loose. ui) { $("#div1"). Обработка событий</title> <meta http-equiv="Content-Type" content="text/html.width:250px.min. padding: 3px 3px 3px 10px.">Сортируемый список 3</span><br> Добавить элементы в этот пустой список можно только из списка 1<br><br> <ul style="background-color:#fff4dd. } #sections.js" type="text/javascript"></script> <style type="text/css"> div { margin: 0.helper.

expression: /_(. change: function() { $("#div1").append("Событие remove<br>"). }. }. }. i++) msg += "[" + i + "] => " + arr[i] + "\n". stop: function() {$("#div1"). key: "myParam[]". }). sort: function() { $("#div1"). deactivate: function() { $("#div1").append("Событие beforeStop<br>"). }. }.find("p"). // Сортируемые элементы handle: "h2".click(function() { $("#sections").append("Событие activate<br>"). for (var i=0. { attribute: "id". // Перемещение только за заголовок connectWith: "#sections" // Куда можно переместить }). activate: function() { $("#div1"). "#ffe9b3").find("h2").html("Элемент перемещен из другого списка"). $("#btn3").sortable("disable"). }. }. over: function() { $("#div1"). }).helper. }. alert(msg). i<count. var msg = "".}.sortable("toArray". }).click(function() { $("#sections").click(function() { $("#sections"). }.append("Событие change<br>").append("Событие update<br>").append("Событие stop<br>"). receive: function(e.append("Событие deactivate<br>"). $("#btn4"). out: function() { $("#div1").click(function() { alert($("#sections").sortable({ items: "div". update: function() { $("#div1").item.css("background-color".sortable("cancel"). $("#btn1"). }. $("#btn2"). }). var arr = $("#sections").sortable("enable"). //--> </script> .sortable("serialize".append("Событие sort<br>"). } }).+)/ })). ui. { attribute: "id" }). ui.append("Событие receive<br>"). count=arr. ui) { $("#div1").append("Событие over<br>"). beforeStop: function(e.length. }). ui) { $("#div1"). $("#sections2"). remove: function() { $("#div1").append("Событие out<br>").

Выделение элементов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.js" type="text/javascript"></script> <script src="js/jquery-ui-1.js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.w3.custom. sans-serif.01 Transitional//EN" "http://www. font-family:Verdana.min. charset=utf-8"> <script src="js/jquery-1. } .</head> <body> <input type="button" value="Запретить" id="btn1"> <input type="button" value="Разрешить" id="btn2"> <input type="button" value="Отменить сортировку списка 1" id="btn3"> <input type="button" value="Положение элементов списка 1" id="btn4"> <br><br> Переместить элементы можно только за заголовок<br><br> <table border="0"><tr><td valign="top"> <div id="sections"> <div class="section" id="item_1"> <h2>Секция 1</h2><p> Содержимое секции 1</p></div> <div class="section" id="item_2"> <h2>Секция 2</h2><p> Содержимое секции 2</p></div> <div class="section" id="item_3"> <h2>Секция 3</h2><p> Содержимое секции 3</p></div> </div> </td><td valign="top"> <div id="sections2"> <div class="section" id="item_4"> <h2>Секция 4</h2><p> Содержимое секции 4</p></div> <div class="section" id="item_5"> <h2>Секция 5</h2><p> Содержимое секции 5</p></div> <div class="section" id="item_6"> <h2>Секция 6</h2><p> Содержимое секции 6</p></div> </div></td><td valign="top"> <div id="div1"></div> </td></tr></table> </body> </html> Листинг 12.7.dtd"> <html> <head> <title>UI Selectable.org/TR/html4/loose. UI Selectable.min. Выделение элементов</title> <meta http-equiv="Content-Type" content="text/html.3.2.10.2.

min.org/TR/html4/loose. charset=utf-8"> <script src="js/jquery-1.ui-selected { background-color: #ff9600.js" type="text/javascript"></script> <style type="text/css"> . //--> </script> </head> <body> Нажмите левую кнопку мыши над элементом и не отпуская ее выделяйте элементы.min. font-family:Verdana. font-weight:bold. color:#000000.ready(function() { $("#selectable"). border: 1px solid #000000. list-style-type:none. height:18px. color: #ffffff. }).w3.01 Transitional//EN" "http://www.2. чтобы добавить новые элементы. <br>Удерживайте нажатой клавишу Ctrl. font-size:16px.3. } .7.ui-selecting { background-color: #ffe9b3. Обработка событий <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. UI Selectable. padding: 5px 5px 5px 20px. } . padding:15px.js" type="text/javascript"></script> <script src="js/jquery-ui-1.dtd"> <html> <head> <title>UI Selectable. width:300px. Обработка событий</title> <meta http-equiv="Content-Type" content="text/html. } </style> <script type="text/javascript"> <!-$(document).2. sans-serif.11.selectable().ul { margin:0. } li { margin: 0 3px 3px 20px.<br> <ul id="selectable"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Пункт 6</li> <li>Пункт 7</li> <li>Пункт 8</li> </ul> </body> </html> Листинг 12.custom.

} . padding:15px.}. } . // Выделяемые элементы cancel: "#id3".ui-selectee { /* Класс. width:300px. добавляемый при инициализации */ margin: 0 3px 3px 20px. list-style-type:none.append("Событие selecting<br>"). .each(function() { elem.ready(function() { $("#selectable"). } </style> <script type="text/javascript"> <!-$(document). если любая пункта точка попала в область выделения tolerance: "touch". selected: function() {$("#div1"). font-size:16px.append("Событие unselected<br>").body { font-size:10pt. color:#000000.selectable({ filter: "li". color: #ffffff.append("Событие start<br>").ui-selected"). start: function() { $("#div1"). border: 1px solid #000000. height:18px.ui-selecting { /* Класс.append(" " + this. }. }.size() > 0) sel.append("Событие stop<br>").ui-selected { /* Класс. // Над элементом с id=id3 нельзя начать выделение // Выделяем.append("Событие unselecting<br>").id). font-family:Verdana. } ul { margin:0.append("Событие selected<br>"). font-weight:bold. // Выводим идентификаторы всех выделенных пунктов var elem = $("#selectedItems"). } . font-family:Verdana. }. sans-serif. добавляемый если элемент попал в область выделения */ background-color: #ffe9b3. }). sans-serif. var sel = $("#selectable li. добавляемый если элемент был выделен */ background-color: #ff9600. }. padding: 5px 5px 5px 20px. if (sel.empty(). unselecting: function() { $("#div1"). selecting: function() { $("#div1"). unselected: function() { $("#div1"). stop: function() { $("#div1").

font-family:Verdana.org/TR/html4/loose. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.js" type="text/javascript"></script> <script src="js/jquery-ui-1. }).01 Transitional//EN" "http://www. //--> </script> </head> <body> <input type="button" value="Запретить" id="btn1"> <input type="button" value="Разрешить" id="btn2"><br><br> <b>ID выделенных элементов:</b> <span id="selectedItems">Нет</span><br> <ul id="selectable"> <li id="id1">Пункт 1</li> <li id="id2">Пункт 2</li> <li id="id3">Пункт 3</li> <li id="id4">Пункт 4</li> <li id="id5">Пункт 5</li> <li id="id6">Пункт 6</li> </ul> <div id="div1"></div> </body> </html> Листинг 12. $("#btn2").click(function() { $ ("#selectable").else elem. }). } . } }).7. }).min.3.css"> <script src="js/jquery-1.bind("selectablestart".2. $("#btn1").js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.selectable("enable"). Изменение размеров</title> <meta http-equiv="Content-Type" content="text/html.dtd"> <html> <head> <title>UI Resizable.append("Нет"). }).selectable("disable"). sans-serif.2. UI Resizable.html("Событие selectablestart<br>"). Изменение размеров <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.7.min.custom.click(function() { $ ("#selectable").12.w3.2. function() { $("#div1").custom.

} </style> <script type="text/javascript"> <!-$(document).custom.css"> <script src="js/jquery-1.custom.</div> </body> </html> Листинг 12.ready(function() { $("#resizable").min. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1. Различные настройки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose. padding:15px.resizable().2. } .01 Transitional//EN" "http://www.#resizable { width:300px. height:150px.2. Различные настройки</title> <meta http-equiv="Content-Type" content="text/html.cls1 { border:1px dotted #000000. }).js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.min. UI Resizable. // Ограничение границами родителя // Показывать маркер только когда курсор расположен над элементом . // Максимальная высота maxWidth: 1200. z-index:5000.resizable { width:300px.dtd"> <html> <head> <title>UI Resizable.13.2. } .3.7. // Минимальная ширина containment: "parent". font-family:Verdana. // Минимальная высота minWidth: 100. padding:15px. } </style> <script type="text/javascript"> <!-$(document). height:150px.js" type="text/javascript"></script> <script src="js/jquery-ui-1.ready(function() { $("#resizable").w3. sans-serif. // Максимальная ширина minHeight: 100.7.resizable({ maxHeight: 600. //--> </script> </head> <body> <div id="resizable" class="ui-widget-content"> Размеры этого блока можно изменять с помощью мыши.

// Продолжительность animateEasing: "swing".resizable({ animate: true. }).originalSize. // Изменение размера за любую границу // За нижнюю границу изменить размер нельзя cancel: ". msg += "." + ui. } }).size. msg += "<b>Размеры после:</b> ширина . // Изменение размеров с анимацией animateDuration: 1000. height:500px.html(msg). ui) { var msg="<b>Размеры до:</b> ширина .size.width.width. // Пропорциональное изменение размеров stop: function(e. msg += ". $("#resizable3"). высота . aspectRatio: true." + ui.height + "<br>".autoHide: true." + ui. $("#resizable2")." + ui. высота . //--> </script> </head> <body> <div style="width:900px.originalSize. border:1px solid #000000"> <div id="resizable" class="resizable ui-widget-content"> Пропорциональное изменение размеров в пределах родительского элемента <div id="div1"></div></div> </div><br><br> <div id="resizable2" class="resizable ui-widget-content"> Использование помощника при изменении размеров<br> Изменение размеров производится с анимацией</div><br><br> <div id="resizable3" class="resizable ui-widget-content"> Синхронное изменение размеров с нижним элементом</div><br><br> <div id="resizable4" class="resizable ui-widget-content"> Изменить размер можно за любую границу. $("#resizable4").height + "<br>".ui-resizable-s" }).resizable({ handles: "all". кроме нижней</div><br><br> </body> </html> . // Эффект замедления helper: "cls1" // Стилевой класс для помощника }).resizable({ alsoResize: "#resizable4" }). $("#div1").

15. Панель навигации с помощью модуля UI Accordion <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.7.org/TR/html4/loose. Компонент Аккордеон с параметрами по умолчанию <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/start/jquery-ui-1.3.2.2.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).14.js" type="text/javascript"></script> <script src="js/jquery-ui-1.w3.ready(function() { $("#accordion").min.Листинг 12.css"> <script src="js/jquery-1.dtd"> <html> <head> <title>Модуль jQuery UI Accordion</title> <meta http-equiv="Content-Type" content="text/html.dtd"> <html> <head> . //--> </script> </head> <body style="font-size:10pt. }).2.01 Transitional//EN" "http://www.accordion({ header: "h3" }).custom.01 Transitional//EN" "http://www.w3. font-family:Verdana"> <div id="accordion"> <h3><a href="#">Вкладка 1</a></h3> <div>Содержимое вкладки 1</div> <h3><a href="#">Вкладка 2</a></h3> <div>Содержимое вкладки 2</div> <h3><a href="#">Вкладка 3</a></h3> <div>Содержимое вкладки 3</div> </div> </body> </html> Листинг 12.7.custom.min.

//--> </script> </head> <body style="font-size:10pt.7.css"> <script src="js/jquery-1. height:250px.ready(function() { $("#accordion").html()). $("#btn1").2. navigation: true. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/start/jquery-ui-1. icons: { header: "ui-icon-arrow-1-e". }). headerSelected: "ui-icon-arrow-1-s" }. font-family:Verdana"> <h2>Панель навигации</h2> <table border="0"><tr><td valign="top"> <div style="width:150px.custom. }).<title>Панель навигации с помощью модуля UI Accordion</title> <meta http-equiv="Content-Type" content="text/html.7.js" type="text/javascript"></script> <script src="js/jquery-ui-1.min.text($("#div1").js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).3. fillSpace: true }).accordion({ event: "mouseover". header: "h3".2.click(function() { $("#div2").2." id="div1"> <div id="accordion"> <h3><a href="#">Раздел 1</a></h3> <ul> <li><a href="?1">Ссылка 1</a></li> </ul> <h3><a href="#">Раздел 2</a></h3> <ul> <li><a href="?2">Ссылка 2</a></li> </ul> <h3><a href="#">Раздел 3</a></h3> <ul> <li><a href="?3">Ссылка 3</a></li> .custom.min.

js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).dtd"> <html> <head> <title>Cобытия в модуле UI Accordion</title> <meta http-equiv="Content-Type" content="text/html.3.oldHeader.css"> <script src="js/jquery-1.2.newHeader.accordion({ header: "h3". function() { $("#div1").bind("accordionchangestart". $("#accordion").custom. }). charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/start/jquery-ui-1.</ul> </div> </div> </td><td valign="top"> Перейдите по этим ссылкам.min.custom.find("a").org/TR/html4/loose.01 Transitional//EN" "http://www. чтобы увидеть эффект<br> <a href="?1">Ссылка на раздел 1</a><br> <a href="?2">Ссылка на раздел 2</a><br> <a href="?3">Ссылка на раздел 3</a><br><br> <input type="button" value="Показать исходный код" id="btn1"> <div id="div2"></div> </td></tr></table> </body> </html> Листинг 12.append("Событие accordionchangestart<br>").js" type="text/javascript"></script> <script src="js/jquery-ui-1.html("Открытая вкладка").min.html("Закрытая вкладка").append("Событие change<br>").2.append("Событие changestart<br>"). ui) { $("#div1").16.ready(function() { $("#accordion").find("a"). ui. Cобытия в модуле UI Accordion <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.7.2.7.bind("accordionchange". change: function(e. }. } }). changestart: function() { $("#div1"). ui.w3. function() { .

min.7.2.3. //--> </script> </head> <body style="font-size:10pt.2.js" type="text/javascript"></script> <script src="js/jquery-ui-1.dtd"> <html> <head> <title>Панель с вкладками</title> <meta http-equiv="Content-Type" content="text/html.7.append("Событие accordionchange<br>").tabs(). font-family:Verdana"> <div id="accordion"> <h3><a href="#">Вкладка 1</a></h3> <div>Содержимое вкладки 1</div> <h3><a href="#">Вкладка 2</a></h3> <div>Содержимое вкладки 2</div> <h3><a href="#">Вкладка 3</a></h3> <div>Содержимое вкладки 3</div> </div> <div id="div1"></div> </body> </html> Листинг 12.custom.17. font-family:Verdana"> <div id="tabs"> <ul> <li><a href="#tabs1"><span>Вкладка 1</span></a></li> .ready(function() { $('#tabs').$("#div1").css"> <script src="js/jquery-1.w3.01 Transitional//EN" "http://www. //--> </script> </head> <body style="font-size:10pt.min.custom.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). }). charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/redmond/jquery-ui-1. }). Панель с вкладками <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.2. }).org/TR/html4/loose.

click(function() { $("#tabs"). // Делаем только один запрос на сервер spinner: "Загрузка.dtd"> <html> <head> <title>Заполнение вкладок с помощью AJAX</title> <meta http-equiv="Content-Type" content="text/html.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).click(function() { $("#tabs").2.org/TR/html4/loose.2.7.3.7. // Запоминаем номер открытой вкладки ajaxOptions: { cache: false }. $("#btn2"). disabled: [2] // Делаем третью вкладку недоступной }).css"> <script src="js/jquery-1.18.min.js" type="text/javascript"></script> <script src="development-bundle/external/cookie/jquery.php". // Получаем последние данные cache: true.<li><a href="#tabs2"><span>Вкладка 2</span></a></li> <li><a href="#tabs3"><span>Вкладка 3</span></a></li> </ul> <div id="tabs1"><p>Содержимое вкладки 1</p></div> <div id="tabs2"><p>Содержимое вкладки 2</p></div> <div id="tabs3"><p>Содержимое вкладки 3</p></div> </div> </body> </html> Листинг 12. "ajax3.min.custom. $("#btn3").tabs("add".min.tabs("disable". }).ready(function() { $("#tabs"). charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/redmond/jquery-ui-1. }). $("#btn1").. "Новая вкладка").tabs".01 Transitional//EN" "http://www.w3.cookie. .tabs({ cookie: { expires: 7 }.. []).click(function() { $("#tabs").js" type="text/javascript"></script> <script src="js/jquery-ui-1. Заполнение вкладок с помощью AJAX <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.2.custom.data("disabled. }).". 1).

custom.dtd"> <html> <head> <title>События в модуле UI Tabs</title> <meta http-equiv="Content-Type" content="text/html.org/TR/html4/loose.php"><span>Вкладка 3</span></a></li> </ul> <div id="tabs1"><p>Содержимое вкладки 1</p></div> </div> <input type="button" value="Сделать вторую вкладку недоступной" id="btn1"> <input type="button" value="Сделать все доступными" id="btn2"> <input type="button" value="Добавить вкладку" id="btn3"> </body> </html> Листинг 12.2.js" type="text/javascript"></script> <script src="js/jquery-ui-1.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document). // Делаем только один запрос на сервер spinner: "Загрузка. События в модуле UI Tabs <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.min.19.css"> <script src="js/jquery-1. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/redmond/jquery-ui-1.php"><span>Вкладка 2</span></a></li> <li><a href="ajax2.}).2.ready(function() { $("#tabs").7.w3.3.min.custom.01 Transitional//EN" "http://www. ui) { // Делаем недоступной первую вкладку if (ui. // Выбор вкладки при наведении курсора selected: 1.2.. // Делаем вторую вкладку активной cache: true. font-family:Verdana"> <div id="tabs"> <ul> <li><a href="#tabs1"><span>Вкладка 1</span></a></li> <li><a href="ajax1.". //--> </script> </head> <body style="font-size:10pt.index == 0) return false.tabs({ event: "mouseover". select: function(e.7. ..

2. msg += "Текст содержимого: " + ui. }).2.min. //--> </script> </head> <body style="font-size:10pt.custom.innerHTML + "<br>".}. font-family:Verdana"> <div id="tabs"> <ul> <li><a href="#tabs1"><span>Вкладка 1</span></a></li> <li><a href="#tabs2"><span>Вкладка 2</span></a></li> <li><a href="ajax1.panel. Диалоговое окно с параметрами по умолчанию <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. $("#div1").append("Событие load<br>"). charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.7. Окно по умолчанию</title> <meta http-equiv="Content-Type" content="text/html.w3.01 Transitional//EN" "http://www.3.css"> <script src="js/jquery-1.innerHTML + "<br>".2. } }). load: function() { // Событие после загрузки данных $("#div1").7.min. show: function(e.php"><span>Вкладка 3</span></a></li> </ul> <div id="tabs1"><p>Содержимое вкладки 1</p></div> <div id="tabs2"><p>Содержимое вкладки 2</p></div> </div> <div id="div1"></div> </body> </html> Листинг 12. }. msg += "Текст заголовка: " + ui.custom.js" .js" type="text/javascript"></script> <script src="js/jquery-ui-1.org/TR/html4/loose. msg += "Индекс вкладки: " + ui.20.index + "<br>".dtd"> <html> <head> <title>Модуль jQuery UI Dialog.tab.append(msg). ui) { // Событие при отображении вкладки var msg = "Событие show<br>".

2.dtd"> <html> <head> <title>Модуль jQuery UI Dialog</title> <meta http-equiv="Content-Type" content="text/html. } </style> </head> <body> <div id="dialog" title="Заголовок окна"> <p>Это текст внутри окна</p> </div> </body> </html> Листинг 12. sans-serif.2.} . Вывод диалогового окна при нажатии на кнопку <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.custom. }).01 Transitional//EN" "http://www.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1. font-weight: bold.2.type="text/javascript"></script> <script type="text/javascript" src="development-bundle1/external/bgiframe/jquery.min.ready(function() { $("#dialog").bgiframe.7.custom. font-family: "Verdana".js"> </script> <script type="text/javascript"> <!-- .dialog().min. //--> </script> <style type="text/css"> .3.7.ui-dialog { font-size: 8pt.w3.ui-dialog-content { font-size: 10pt.org/TR/html4/loose.bgiframe.js" type="text/javascript"></script> <script type="text/javascript" src="development-bundle1/external/bgiframe/jquery.21.min.ui-dialog-title { font-size: 10pt. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.js"> </script> <script type="text/javascript"> <!-$(document).css"> <script src="js/jquery-1. } .

ui-dialog { font-size: 8pt. // Высота окна draggable: false. $("#txt1").ui-dialog-titlebar"). // Решение проблемы с IE6 closeOnEscape: true. "Изменить заголовок": function() { $(this).click(function() { $("#dialog").ready(function() { $("#dialog"). // Закрывать ли при нажатии Esc title: "Новый заголовок". font-family: "Verdana". // Эффект при закрытии окна buttons: { // Описание кнопок "Закрыть": function() { $(this). // Модальное окно или нет show: null. // $(".ui-dialog-titlebar-close").$(document).dialog({ autoOpen: false.dialog("option".ui-dialog-content { font-size: 10pt. // Открывать ли окно сразу bgiframe: true.val()). }). "title". // Эффект при открытии окна hide: null.dialog("close"). } </style> </head> <body> <div id="dialog" title="Заголовок окна"> .dialog("open"). // Изменение размера modal: false. // Закрыть окно }. // Открыть окно }).val(""). $("#btn2"). sans-serif. // Перемещение resizable: false. font-weight: bold.} . // Ширина окна height: "auto". 50].ui-dialog-title { font-size: 10pt.hide().ui-dialog").html()).click(function() { $("#div1"). // Заголовок position: ["center". // Спрятать заголовок // $(". } . $("#txt1"). // Местоположение окна width: 500. }). } } }).text($(". //--> </script> <style type="text/css"> .hide(). // Спрятать крестик $("#btn1").

return false.min. .3em.01 Transitional//EN" "http://www.2.js" type="text/javascript"></script> <script src="js/jquery-ui-1.dialog({ draggable: true.<br><br> Новый текст заголовка:<br> <input type="text" id="txt1" size="40"></p> </div> <input type="button" value="Открыть окно" id="btn1"> <input type="button" value="Вывести исходный код окна" id="btn2"> <div id="div1"></div> </body> </html> Листинг 12.custom.7. } }.position. bgiframe: true.2.<p><span class="ui-icon ui-icon-info" style="float:left. Cобытия в модуле UI Dialog <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.3. resizable: true.22.w3. msg += "position. ui) { var msg = "position.min.ready(function() { $("#dialog").is(":checked")) { alert("Для закрытия необходимо установить флажок.bgiframe. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.position.").left = " + ui.js"> </script> <script type="text/javascript"> <!-$(document).top + "<br>".min..css"> <script src="js/jquery-1. dragStop: function(e..left + "<br>".dtd"> <html> <head> <title>Cобытия в модуле UI Dialog</title> <meta http-equiv="Content-Type" content="text/html.js" type="text/javascript"></script> <script type="text/javascript" src="development-bundle1/external/bgiframe/jquery.2.org/TR/html4/loose.7.custom. beforeclose: function() { if (!$("#ckb1").top = " + ui."></span> Это текст внутри окна. margin-right:.

position.offset.position. }.2.top = " + ui.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.dialog("close").width + "<br>". Календарь по умолчанию</title> <meta http-equiv="Content-Type" content="text/html.org/TR/html4/loose.append(msg + "<br>").offset.left + "<br>".append(msg + "<br>"). //--> </script> </head> <body style="font-size:8pt. font-family:Verdana.msg += "offset.js" type="text/javascript"></script> <script type="text/javascript" src="development-bundle/ui/i18n/ui. Календарь с параметрами по умолчанию <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.top + "<br>".top = " + ui.width = " + ui.left + "<br>". msg += "size.23. $("#div1"). msg += "offset.custom.3. }).2.css"> <script src="js/jquery-1.size. ui) { var msg = "position.top + "<br>".min.dtd"> <html> <head> <title>UI Datepicker.w3. msg += "position. buttons: { "Закрыть окно": function() { $(this).2. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/humanity/jquery-ui-1.01 Transitional//EN" "http://www. resizeStop: function(e. } } }). $("#div1").js"></script> .left = " + ui.height + "<br>".height = " + ui.datepicker-ru. msg += "size.custom.left = " + ui.size.7. }.7."> <div id="dialog" title="Заголовок окна"> <input type="checkbox" id="ckb1"> Я хочу закрыть окно </div> <div id="div1"></div> </body> </html> Листинг 12.

datepicker.extend($.<script type="text/javascript"> <!-$(document).datepicker().ready(function() { $.2. //--> </script> </head> <body style="font-size:8pt.js" type="text/javascript"></script> <script type="text/javascript" src="development-bundle/ui/i18n/ui. nextText: "MM".2. Варианты календарей <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.custom. { prevText: "MM".js"></script> <script type="text/javascript"> <!-$(document).y" }) ).datepicker. }). currentText: "dd.3.setDefaults( // Настройки для всех календарей $.yy".regional["ru"].7.2. Варианты календарей</title> <meta http-equiv="Content-Type" content="text/html. $("#datepicker2"). dateFormat: "dd.mm.ready(function() { $("#datepicker1").js" type="text/javascript"></script> <script src="js/jquery-ui-1. .org/TR/html4/loose.w3.datepicker().7.datepicker-ru. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/humanity/jquery-ui-1.mm.24.css"> <script src="js/jquery-1.min.min.custom.dtd"> <html> <head> <title>UI Datepicker.01 Transitional//EN" "http://www. font-family:Verdana"> <table border="0"><tr><td> <div id="datepicker1"></div> </td><td valign="top"> <input type="text" id="datepicker2"> </td></tr></table> </body> </html> Листинг 12.

// Максимальная дата minDate: "-12w". // Диапазон в списке с годами showOn: "button". Пример использования различных методов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.25. // Использовать изображение вместо кнопки appendText: " Обязательное поле". // Открывать при щелчке на кнопке buttonImage: "calendar.datepicker("option".click(function() { // Изменение формата даты $("#datepicker2"). // Календарь. // Показать панель с кнопками numberOfMonths: 3. // Статичный календарь // Календарь. // Выпадающий список с годами yearRange: "1970:2009". // Адрес изображения buttonImageOnly: true. // Минимальная дата showButtonPanel: true.datepicker().datepicker({ changeMonth: true. font-family:Verdana"> <div id="datepicker1"></div><br><br> <input type="text" id="datepicker2"> <input type="button" value="Изменить формат" id="btn1"><br><br> <input type="text" id="datepicker3"> <input type="text" id="txt1"> </body> </html> Листинг 12.01 Transitional//EN" . navigationAsDateFormat: true }). открывающийся с помощью щелчка на изображении и // заполняющий дополнительное текстовое поле $("#datepicker3").$("#datepicker1"). // Показывать сразу 3 месяца stepMonths: 3. }). // Сдвигать календарь на 3 месяца hideIfNoPrevNext: true. "dateFormat". }). // Выпадающий список с месяцами changeYear: true. "dd M yy"). $("#btn1").gif".datepicker({ maxDate: "+1y". //--> </script> </head> <body style="font-size:8pt. // Ссылка на дополнительное поле altFormat: "dd M yy" // Формат даты в дополнительном поле }). показывающий сразу три месяца и имеющий ограничения $("#datepicker2"). altField: "#txt1".

click(function() { if ($("#datepicker").datepicker("setDate".custom. }).2.datepicker-ru.2.datepicker("enable").click(function() { $("#datepicker").org/TR/html4/loose.3.min. $("#btn8").js" type="text/javascript"></script> <script src="js/jquery-ui-1.click(function() { . }). charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/humanity/jquery-ui-1.7.custom. }).css"> <script src="js/jquery-1. $("#btn2"). $("#btn3").js"></script> <script type="text/javascript"> <!-$(document).7.click(function() { alert($("#datepicker").js" type="text/javascript"></script> <script type="text/javascript" src="development-bundle/ui/i18n/ui.w3.min.click(function() { $("#datepicker").click(function() { $("#datepicker").dtd"> <html> <head> <title>UI Datepicker.datepicker("getDate")). $("#btn6"). $("#btn7"). Методы</title> <meta http-equiv="Content-Type" content="text/html. $("#btn4"). }).datepicker("isDisabled")) { alert("Запрещено"). $("#btn5").datepicker("disable").datepicker(). }). }).click(function() { $("#datepicker").click(function() { $("#datepicker"). "+1y")."http://www. $("#btn1"). } }).datepicker("show").2. } else { alert("Разрешено").ready(function() { $("#datepicker").datepicker("hide").

function(dateText) { alert("Выбрана дата: " + dateText). Cобытия в модуле UI Datepicker <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.css"> <script src="js/jquery-1. }). // Выпадающий список с годами yearRange: "1970:2009".2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/humanity/jquery-ui-1.js"></script> <script type="text/javascript"> <!-$(document).datepicker({ changeMonth: true.2. // Выпадающий список с месяцами changeYear: true.ready(function() { $("#datepicker"). //--> </script> </head> <body style="font-size:8pt.26. { changeMonth: true.2. }. }). // Диапазон в списке с годами .custom.datepicker-ru.datepicker("dialog".w3.01 Transitional//EN" "http://www.2009".org/TR/html4/loose.js" type="text/javascript"></script> <script type="text/javascript" src="development-bundle/ui/i18n/ui.7.dtd"> <html> <head> <title>UI Datepicker. font-family:Verdana"> <input type="button" value="Запретить" id="btn1"> <input type="button" value="Разрешить" id="btn2"> <input type="button" value="Проверить статус" id="btn3"> <input type="button" value="Открыть" id="btn4"> <input type="button" value="Закрыть" id="btn5"> <input type="button" value="Выбрать дату" id="btn6"> <input type="button" value="Получить дату" id="btn7"> <input type="button" value="Открыть диалог" id="btn8"><br><br> <input type="text" id="datepicker"> </body> </html> Листинг 12. [200.$("#datepicker").custom.7. Обработка событий</title> <meta http-equiv="Content-Type" content="text/html.06.3. changeYear: true }.min. 200]). "27.

css("background-color". "#fff4dd"). // Минимальная дата beforeShow: function(elem) { $("#div1"). onSelect: function(d.". }. } . //--> </script> <style type="text/css"> . obj) { var msg = "Событие onClose<br>".currentDay == 0) msg += "Дата не выбрана<br>".css("background-color".currentYear.mm. onChangeMonthYear: function(y. onClose: function(d. "#ffffff"). // Если дата является текущей.formatDate("dd. m. var dat = $.yy". то указываем для ячейки с датой // класс cls1. msg += "Год: " + y + "<br>Месяц: " + m + "<br>" $("#div1").yy". }. if (obj. // Максимальная дата minDate: "-12w". d). а также задаем текст подсказки if (dat == curd) return [true. else return [true.css("background-color". obj) { var msg = "Событие onSelect<br>Выбранная дата: " + d.append(msg + "<br>"). msg += "<br>". $(this). то делаем дату неактивной else if (d.getDate() == 10) return [false. obj) { var msg = "Событие onChangeMonthYear<br>". // Если число месяца равно 10. }. "#ffffff"). }. "cls1". $("#div1").append(msg).cls1 { background-color: red. new Date()).maxDate: "+1y".currentDay + ". } $("#div1").datepicker. } }). "cls2"].datepicker. $(elem). "cls2"].formatDate("dd.html("Событие beforeShow<br>")." + obj. }).append(msg). beforeShowDay: function(d) { var curd = $.currentMonth + 1) + ".mm.cls2 { } . msg += (obj. "Это сегодня"]. else { msg += "Выбранная дата: " + obj.

dtd"> <html> <head> <title>UI Progressbar. font-family:Verdana"> <input type="text" id="datepicker"> <div id="div1"></div> </body> </html> Листинг 12.w3.js" type="text/javascript"></script> <script src="js/jquery-ui-1. charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/sunny/jquery-ui-1.js" type="text/javascript"></script> <script type="text/javascript"> <!-$(document).01 Transitional//EN" "http://www. UI Progressbar.ready(function() { $("#progressbar"). }).min.css"> <script src="js/jquery-1.01 Transitional//EN" "http://www.org/TR/html4/loose.custom.7.custom.7.w3.3.min.progressbar({ value: 60 }).28. UI Progressbar.2. Индикатор процесса <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Индикатор процесса</title> <meta http-equiv="Content-Type" content="text/html.</style> </head> <body style="font-size:8pt.2. charset=utf-8"> ."><div id="progressbar"></div></div> </body> </html> Листинг 12. //--> </script> </head> <body style="font-size:8pt.org/TR/html4/loose.2. События и методы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd"> <html> <head> <title>UI Progressbar.27. События и методы</title> <meta http-equiv="Content-Type" content="text/html. font-family:Verdana"> <div style="width: 500px.

<link type="text/css" rel="stylesheet"
href="css/sunny/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
<!-$(document).ready(function() {
$("#progressbar").progressbar({
value: 60,
change: function() {
$("#div1").append("Событие change<br>");
}
}).bind("progressbarchange", function() {
$("#div1").append("Событие progressbarchange<br>");
});
$("#btn1").click(function() {
var val = parseInt($("#txt1").val());
if (!isNaN(val)) {
$("#progressbar").progressbar("option", "value", val);
//$("#progressbar").progressbar("value", val);
}
else alert("Необходимо ввести число");
});
$("#btn2").click(function() {
alert($("#progressbar").progressbar("option", "value"));
});
$("#btn3").click(function() {
$("#progressbar").progressbar("disable");
});
$("#btn4").click(function() {
$("#progressbar").progressbar("enable");
});
});
//-->
</script>
<style type="text/css">
/* Выводим анимированную картинку вместо полосы */
.ui-progressbar-value { background-image:url(animate.gif); }
</style>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div style="width: 500px;"><div id="progressbar"></div></div>

<br><br>
Введите новое значение: <input type="text" id="txt1"><br><br>
<input type="button" value="Изменить значение" id="btn1">
<input type="button" value="Получить значение" id="btn2"><br><br>
<input type="button" value="Запретить" id="btn3">
<input type="button" value="Разрешить" id="btn4"><br><br>
<div id="div1"></div>
</body>
</html>

Листинг 12.29. UI Slider. Шкала с бегунком
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>UI Slider. Шкала с бегунком</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet"
href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
<!-$(document).ready(function() {
$("#slider1").slider({
range: true,
values: [10, 65]
});
$("#slider2").slider({
range: false,
value: 50
});
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana"><br><br>
<div style="width: 500px;">
<div id="slider1"></div><br><br>
<div id="slider2"></div>
</div><br><br>
</body>

</html>

Листинг 12.30. UI Slider. Опции, события и методы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>UI Slider. Опции, события и методы</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet"
href="css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
<!-$(document).ready(function() {
$("#slider1").slider({
max: 200, // Максимальное значение шкалы
min: 0, // Минимальное значение шкалы
range: true, // Выделение участка между двумя бегунками
values: [10, 65], // Местоположение бегунков
orientation: "auto",
step: 10, // Шаг
animate: true // Плавное изменение положения бегунка
});
$("#slider2").slider({
range: "min", // Выделение участка слева бегунка
value: 40, // Начальное положение бегунка на шкале
orientation: "horizontal", // Горизонтальное расположение шкалы
change: function(e, ui) {
alert("Установлено значение: " + ui.value);
}
});
$("#slider3").slider({
values: [25, 50, 75], // Начальное положение трех бегунков
change: function(e, ui) {
alert("Установлены значения: " + ui.values);
}
});
$("#slider4").slider({
range: "max", // Выделение участка выше бегунка
value: 60, // Начальное положение бегунка на шкале

click(function() { var val = parseInt($("#txt2").slider("option". "value")). function() { $("#div1"). val).click(function() { var arr = $("#slider3").val()). function() { $("#div1").append("Событие slidestop<br>").bind("slide".bind("slidestart". }). $("#btn2"). "values"). if (!isNaN(val)) { // $("#slider2"). "value".click(function() { var val = parseInt($("#txt1"). } else alert("Необходимо ввести число").append("Событие stop<br>").html("Событие slidestart<br>"). function() { $("#div1"). }).append("Событие slidechange<br>").slider("value". val). function() { $("#div1"). } else alert("Необходимо ввести число").click(function() { alert($("#slider2"). }. }). slide: function() { $("#div1").append("Событие slide<br>"). }). // alert($("#slider2"). }). .bind("slidestop".slider("value")).val()). $("#btn1"). }. if (!isNaN(val)) { $("#slider3").bind("slidechange".append("Событие change<br>"). }. 1. }).slider("values". // Вертикальное расположение шкалы start: function() { $("#div1"). stop: function() { $("#div1"). }).append("Событие slide (bind)<br>"). $("#btn4").slider("option". change: function() { $("#div1"). val).append("Событие start<br>"). $("#btn3").orientation: "vertical". } }).slider("option". $("#slider2").

color:#e8e8e8.custom.w3.31.min.01 Transitional//EN" "http://www.min. text-align:center. height:100px. } </style> .alert(arr[1]).2.7.js" type="text/javascript"></script> <script src="js/jquery-ui-1. top:50px. } #div1 { position:absolute. }). 1)). background-color:#000000.dtd"> <html> <head> <title>UI Effects. //--> </script> </head> <body style="font-size:8pt. }). font-family:Verdana"><br><br> <div style="width: 600px. left:50px. width:100px.slider("values". Плавное изменение цвета <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. charset=utf-8"> <script src="js/jquery-1. UI Effects."> <div id="slider1"></div><br><br> <div id="slider2"></div><br> <input type="text" id="txt1"> <input type="button" value="Изменить положение бегунка" id="btn1"> <input type="button" value="Получить значение" id="btn2"><br><br><br> <div id="slider3"></div><br> <input type="text" id="txt2"> <input type="button" value="Изменить положение второго бегунка" id="btn3"> <input type="button" value="Получить значение" id="btn4"><br><br><br> <div id="slider4"></div> </div><br><br> <div id="div1"></div> </body> </html> Листинг 12. padding:2px. Плавное изменение цвета</title> <meta http-equiv="Content-Type" content="text/html. border:1px solid #000000. sans-serif.js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.org/TR/html4/loose.3. font-family:Verdana. // alert($("#slider3").2.

} </style> <script type="text/javascript"> <!-$(document). text-align:center. //--> </script> </head> <body> Цвет: <input type="text" id="txt1"> <input type="button" value="Задать значение цвета" id="btn1"><br><br> <div id="div1">Плавное изменение цвета</div> </body> </html> Листинг 12.js" type="text/javascript"></script> <script src="js/jquery-ui-1. else $("#div1").w3. charset=utf-8"> <script src="js/jquery-1. } . top:50px.cls2 { background-color:#FF0000.min. } . padding:2px.org/TR/html4/loose. Управление классами стилей</title> <meta http-equiv="Content-Type" content="text/html. width:100px.<script type="text/javascript"> <!-$(document).2.click(function() { // Добавить класс var elem = $("#div1"). if (color.3.2.val(). } #div1 { position:absolute. }). font-family:Verdana. Управление классами стилей <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. left:50px. height:100px. }).dtd"> <html> <head> <title>UI Effects.01 Transitional//EN" "http://www. border:1px solid #000000.min. color:#008800. sans-serif.7.cls1 { background-color:#000000.custom.animate({ backgroundColor: color }.js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt.length == 0) alert("Не заполнено поле").ready(function() { $("#btn1"). 2000).32. UI Effects. .ready(function() { $("#btn1").click(function() { var color = $("#txt1"). color:#ffffff.

}).if (!elem. if (elem. }).2.js" type="text/javascript"></script> <script src="js/jquery-ui-1. charset=utf-8"> <script src="js/jquery-1. Методы show().is(".switchClass("cls2".min. if (elem.cls1") && !elem.cls2")) elem.switchClass("cls1". 1000). 1000).w3.33. hide() и toggle() <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. }).cls1")) elem. Методы show(). hide() и toggle()</title> <meta http-equiv="Content-Type" content="text/html. UI Effects.js" type="text/javascript"></script> <script type="text/javascript"> .custom.7.click(function() { // Заменить класс var elem = $("#div1").removeClass("cls2". 1000).3. "cls1".is(".is(".dtd"> <html> <head> <title>UI Effects.toggleClass("cls1".2.addClass("cls2".addClass("cls1".cls1")) elem.01 Transitional//EN" "http://www. 1000).cls2")) elem. else if (elem. else elem.is(". $("#btn4"). 1000). else elem. }).cls2")) elem. $("#btn2"). 1000).is(".click(function() { // Удалить класс var elem = $("#div1").removeClass("cls2".click(function() { // Переключить var elem = $("#div1"). if (elem.is(". 1000). }).removeClass("cls1".org/TR/html4/loose.is(". 1000). else if (elem. "cls2".min. $("#btn3").cls2")) elem. //--> </script> </head> <body> <input type="button" value="Добавить класс" id="btn1"> <input type="button" value="Удалить класс" id="btn2"> <input type="button" value="Переключить" id="btn3"> <input type="button" value="Заменить класс" id="btn4"><br><br> <div id="div1">Управление классами стилей</div> </body> </html> Листинг 12.

click(function() { $("#img1").dtd"> <html> <head> <title>UI Effects.click(function() { $("#img1").val().org/TR/html4/loose.val().34. }). { }.click(function() { $("#img1"). charset=utf-8"> .show($("#effect"). { }.hide($("#effect"). 2000). //--> </script> </head> <body> <b>Выберите эффект из списка и нажмите одну из кнопок</b><br><br> <select id="effect"> <option value="blind">Blind</option> <option value="clip">Clip</option> <option value="drop">Drop</option> <option value="explode">Explode</option> <option value="fold">Fold</option> <option value="puff">Puff</option> <option value="pulsate">Pulsate</option> <option value="scale">Scale</option> <option value="slide">Slide</option> </select> <input type="button" value="show()" id="btn1"> <input type="button" value="hide()" id="btn2"> <input type="button" value="toggle()" id="btn3"> <br><br> <img src="img.01 Transitional//EN" "http://www. { }. Эффект Transfer</title> <meta http-equiv="Content-Type" content="text/html.w3.ready(function() { $("#btn1").gif" id="img1" style="width:300px. }). Эффект Transfer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.toggle($("#effect").val(). height:225px."> </body> </html> Листинг 12. $("#btn3"). }).<!-$(document). 2000). }). UI Effects. 2000). $("#btn2").

{className: "cls1". 2000). background-color:#0000ff. text-align:center. border:1px solid #000000.js" type="text/javascript"></script> <style type="text/css"> body { font-size:10pt. height:50px. background-color:#ff0000.ready(function() { $("#div1"). //--> </script> </head> <body> <div id="div1">Щелкните мышью на этом блоке</div> <div id="div2"></div> </body> </html> . background-color:#000000.2. to: "#div2"}. color:#ffffff. sans-serif.<script src="js/jquery-1.click(function() { $(this).min.effect("transfer".7. padding:2px.3. }). font-family:Verdana. } #div2 { position:absolute. } . height:100px.js" type="text/javascript"></script> <script src="js/jquery-ui-1. } #div1 { width:100px. top:250px.2. } </style> <script type="text/javascript"> <!-$(document). border:1px solid #000000.custom. width:50px.min.cls1 { border:1px dotted #000000. left:450px. }).