==================================================================
Листинг 1.1. Последовательность обработки событий
==================================================================
<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. Обработка ситуации конфликта имен
==================================================================
<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-текст в качестве параметра функции $()
==================================================================
<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-адресов всех ссылок
==================================================================
<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. Выделение ссылок в зависимости от текста
==================================================================
<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>
<a href="link4.html">Ссылка 4</a>
</body>
</html>

==================================================================
Листинг 5.1. Методы width() и height()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы width() и height()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function showValue() {
   var elem1 = $("#div1");
   var msg = "Высота: " + elem1.height() + "<br>inner: Ширина:
";
   msg += elem1.innerWidth() + " Высота: " +
elem1.innerHeight();
   msg += "<br>outer: Ширина: " + elem1.outerWidth(true) + "
Высота: ";
   msg += elem1.outerHeight(true);
   $("#div2")
      .html("Ширина: " + elem1.width() + " ")
      .append(msg);
}
$(document).ready(function() {
   $(":button").click(function() {
      var w = $("#txt1").val();
      var h = $("#txt2").val();
      var elem = $("#div1");
      if (w != '') {
         w = parseInt(w);
         if (!isNaN(w)) {
            elem.width(w);
            $("#txt1").val("");
         }
         else alert("Необходимо ввести число!");
      }
      if (h != '') {
         h = parseInt(h);
         if (!isNaN(h)) {
            elem.height(h);
            $("#txt2").val("");
         }
         else alert("Необходимо ввести число!");
      }
      showValue();
   });
   showValue();
});
//-->
</script>
<style>
#div1 {
   padding:5px; margin:5px;
   width:300px; height:200px;
   border: black 2px dotted;
}
</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.2. Методы addClass(), removeClass() и
==================================================================
toggleClass()
<html>
<head>
<title>Методы addClass(), removeClass() и
toggleClass()</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() {
   $("#div1").hover(
      function() { // Если навести курсор
         $(this).removeClass().addClass("cls2");
      },
      function() { // Если убрать курсор
         $(this).removeClass().addClass("cls1");
      }
   );
   $("#div2").hover(
      function() { // Если навести курсор
         $(this).toggleClass("cls2");
      },
      function() { // Если убрать курсор
         $(this).toggleClass("cls2");
      }
   );
});
</script>
<style>
.cls1 { color:#000000; text-decoration:none; }
.cls2 { color:#ff0000; text-decoration:underline; }
</style>
</head>
<body>
<div id="div1" class="cls1">Наведите курсор на этот
текст</div><br>
<div id="div2" class="cls1">Наведите курсор на этот
текст</div>
</body>
</html>

==================================================================
Листинг 5.3. Получение значений списка с множественным выбором
==================================================================
<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">
$(document).ready(function() {
   $("#btn1").click(function() { // Способ 1
      var vals = $("#sel1").val() || [];
      var count = vals.length;
      if (count > 0) {
         var elem = $("#div1").empty();
         for (var i=0; i<count; i++) {
            elem.append(vals[i] + " =&gt; " +
            $("#sel1 option[value='" + vals[i] + "']").text()
+
            "<br>");
         }
      }
      else {
         $("#div1").html("Ничего не выделено");
      }
   });
   $("#btn2").click(function() { // Способ 2
      var sels = $("#sel1 option:selected");
      var count = sels.size();
      if (count > 0) {
         var elem = $("#div1").empty();
         for (var i=0; i<count; i++) {
            elem.append(sels.eq(i).val() + " =&gt; " +
            sels.eq(i).text() + "<br>");
         }
      }
      else {
         $("#div1").html("Ничего не выделено");
      }
   });
   $("#btn3").click(function() { // Способ 3
      var elem = $("#div1").empty();
      $("#sel1 option:selected").each(function() {
         elem.append(this.value + " =&gt; " + this.text +
"<br>");
      });
      if (elem.text() == "") {
         elem.html("Ничего не выделено");
      }
   });
});
</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>
<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.4. Методы offset() и position()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы offset() и position()</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() {
   $("p").one("click", function() {
      var elem = $(this);
      var obj1 = elem.offset();
      var obj2 = elem.position();
      var msg = "Offset top: " + obj1.top + " left: " +
obj1.left;
      msg += " Position top: " + obj2.top + " left: " +
obj2.left;
      elem.html(msg);
   });
});
//-->
</script>
</head>
<body>
<p>Абзац 1</p>
<div style="margin:20px;padding:15px;border: black 2px
dotted;">
<p style="margin:10px;">Абзац 2</p>
</div>
Щелкните на абзаце
</body>
</html>

==================================================================
Листинг 5.5. Методы scrollTop() и scrollLeft()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы scrollTop() и scrollLeft()</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() {
   $("#div1").click(function() {
      var elem = $("body");
      $(this)
      .html("top: " + elem.scrollTop() + " left: " +
elem.scrollLeft());
      elem.scrollTop(0).scrollLeft(0);
   });
});
//-->
</script>
<style>
#div1 {
   margin:20px;padding:15px;
   width:1500px; height:1500px;
   border: black 2px dotted;
   background-color:silver;
}
</style>
</head>
<body>
<div id="div1">Переместите полосы прокрутки и щелкните на
сером фоне
чтобы увидеть значения<br>
После щелчка значения будут приравнены к 0</div>
</body>
</html>

==================================================================
Листинг 6.1. Вывод ширины и высоты окна при изменении размера
==================================================================
<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">
<!--
$(document).ready(function() {
   $(window).resize(function() {
      var elem = $(window);
      $("#div1").html("Ширина: " + elem.width() + "<br>")
         .append("Высота: " + elem.height());
   });
});
//-->
</script>
</head>
<body><div id="div1"></div>

</body>
</html>

==================================================================
Листинг 6.2. Особенности использования метода hover()
==================================================================
<html>
<head>
<title>Особенности использования метода hover()</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() {
   $("#div1").mouseover(function() {
      $("#log1").append("Событие onmouseover<br>");
   });
   $("#div1").mouseout(function() {
      $("#log1").append("Событие onmouseout<br>");
   });
   $("#div2").hover(
      function() {
         $("#log2").append("Событие onmouseover<br>");
      },
      function() {
         $("#log2").append("Событие onmouseout<br>");
      }
   );
});
//-->
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</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.3. События клавиатуры
==================================================================
<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">
<!--
$(document).ready(function() {
   $(":text").keyup(function(e){
      $("#div1").append("keyup " + e.keyCode + "<br>");
   });
   $(":text").keydown(function(e){
      $("#div1").append("keydown " + e.keyCode + "<br>");
   });
   $(":text").keypress(function(e){
      $("#div1").append("keypress " + e.keyCode + "<br>");
   });

});
//-->
</script>
</head>
<body>
<input type="text">
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 6.4. События формы
==================================================================
<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">
<!--
$(document).ready(function() {
   $(":text").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
   $("#sel1").change(function(){
      alert("Значение выбранного пункта " + $(this).val());
   });
   $("form").submit(function(){
      if (window.confirm("Отправить данные формы?")) {
         return true;
      }
      else return false;
   });
   $(":text").select(function(){
      alert("Выделен фрагмент");
   });
   $("#btn1").click(function(){
      $("#txt1").select();
   });
   $("#btn2").click(function(){
      $("#txt1").focus();
   });
   $("#btn3").click(function(){
      $("#txt1").blur();
   });
   $("#btn4").click(function(){
      $("#frm").submit();
   });
});
//-->
</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.5. События mouseenter и mouseleave
==================================================================
<html>
<head>
<title>События mouseenter и mouseleave</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() {
   $("#div1").bind("mouseover", function() {
      $("#log1").append("Событие mouseover<br>");
   });
   $("#div1").bind("mouseout", function() {
      $("#log1").append("Событие mouseout<br>");
   });
   $("#div2").bind("mouseenter", function() {
      $("#log2").append("Событие mouseenter<br>");
   });
   $("#div2").bind("mouseleave", function() {
      $("#log2").append("Событие mouseleave<br>");
   });
});
//-->
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
   padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b>События mouseover и mouseout:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 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.6. Всплывание событий
==================================================================
<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">
<!--
$(document).ready(function() {
   $("*").click(function(e) {
      $("#div1")
        .append("Элемент " + $(this)[0].tagName + "<br>");
   });
});
//-->
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 6.7. Прерывание всплывания событий
==================================================================
<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">
<!--
$(document).ready(function() {
   $("*").click(function(e) {
      $("#div1")
        .append("Элемент " + $(this)[0].tagName + "<br>");
      return false;
   });
});
//-->
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 6.8. Прерывание всплывания с помощью метода
==================================================================
stopPropagation()
<html>
<head>
<title>Прерывание всплывания с помощью метода
stopPropagation()</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() {
   $("*").click(function(e) {
      $("#div1")
        .append("Элемент " + $(this)[0].tagName + "<br>");
      if (e.stopPropagation) e.stopPropagation();
      else e.cancelBubble = true;
   });
});
//-->
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 6.9. Прерывание действий по умолчанию
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#frm").submit(function() {
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/i;
      if (p.test($("#email").val())) {
         if (window.confirm("Отправить данные формы?")) {
            return true;
         }
         else return false;
      }
      else {
         alert("E-mail введен не правильно");
         return false;
      }
   });
   $("a").click(function() {
      alert("Перехода по ссылке не будет");
      return false;
   });
   $("#email").focus(function() {
      $(this).css("background-color", "#fffbef");
   }).blur(function() {
      $(this).css("background-color", "#ffffff");
   });
});
//-->
</script>
</head>
<body>
<form action="file.php" method="GET" id="frm">
E-mail:<br>
<input type="text" name="email" id="email"><br>
<input type="submit" value="Отправить">
</form>
<a href="file.html">Нажмите для перехода по ссылке</a><br><br>
</body>
</html>

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

==================================================================
Листинг 7.1. Сокрытие и отображение элементов
==================================================================
<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">
<!--
$(document).ready(function() {
   $("a.menu").click(function() {
      // Находим элемент, расположенный сразу после ссылки
      var elem = $(this).nextAll("div.elem:first");
      if (elem.is(":hidden")) { // Если элемент скрыт
         // Скрываем видимые элементы
         $("div.elem:visible").hide();
         // Отображаем элемент, расположенный сразу после
ссылки
         elem.show();
      }
      else { // Если элемент был отображен ранее
         elem.hide(); // Скрываем элемент
      }
      return false; // Прерываем переход по ссылке
   });
});
//-->
</script>
<style>
.menu { color:black; }
.elem { display:none; }
</style>
</head>
<body>
<a href="#" class="menu">Отобразить или скрыть элемент
1</a><br>
<div class="elem">Скрытый элемент 1</div>
<a href="#" class="menu">Отобразить или скрыть элемент
2</a><br>
<div class="elem">Скрытый элемент 2</div>
<a href="#" class="menu">Отобразить или скрыть элемент
3</a><br>
<div class="elem">Скрытый элемент 3</div>
<a href="#" class="menu">Отобразить или скрыть элемент
4</a><br>
<div class="elem">Скрытый элемент 4</div>
</body>
</html>

==================================================================
Листинг 7.2. Перемещение элементов
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ left: "-=" + $("#txt1").val()},
1000);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ left: "+=" + $("#txt1").val()},
1000);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ top: "-=" + $("#txt1").val()},
1000);
   });
   $("#btn4").click(function() {
      $("#div1").animate({ top: "+=" + $("#txt1").val()},
1000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:100px;
   background-color:black;
}
</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.3. Изменение ширины элементов
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1").animate({ width: "hide" }, 300);
   });
   $("#btn2").click(function() {
      $("#div1").animate({ width: "show" }, 300);
   });
   $("#btn3").click(function() {
      $("#div1").animate({ width: "toggle" }, "slow");
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:150px;
   height:100px;
   background-color:black;
}
</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.4. Параллельное и последовательное выполнение анимации
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px"
})
      .animate({ width: "450px", height: "100px" },
         { queue: false, duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
   $("#btn2").click(function() {
      $("#div1")
      .css({ width: "100px", height: "20px", fontSize: "10px"
})
      .animate({ width: "450px", height: "100px" },
         { duration: 2000 })
      .animate({ fontSize: "32px" }, 2000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</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.5. Прерывание анимации
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      if ($("#chc1").is(":checked")) {
         $("#div1").stop().animate({ width: "0.1px" }, 3000);
      }
      else {
         $("#div1").animate({ width: "0.1px" }, 3000);
      }
   });
   $("#btn2").click(function() {
      if ($("#chc1").is(":checked")) {
         $("#div1").stop().animate({ width: "450px" }, 3000);
      }
      else {
         $("#div1").animate({ width: "450px" }, 3000);
      }
   });
   $("#btn3").click(function() {
      $("#div1").stop();
   });
   $("#btn4").click(function() {
      $("#div1").stop(true);
   });
   $("#btn5").click(function() {
      $("#div1").stop(true, true);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:450px;
   height:100px;
   background-color:black;
}
</style>
</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.6. Добавление функции в очередь
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#div1");
      elem.css({ width:"100px", height:"20px", fontSize:"10px"
});
      elem.text("Текст");
      elem.animate({ width:"450px", height:"100px" }, 2000);
      elem.queue(function() {
          $(this).text("Наш новый текст").dequeue();
      });
      elem.animate({ fontSize:"32px" }, 2000);
   });
});
//-->
</script>
<style>
.cls1 {
   position:absolute;
   top:50px;
   left:10px;
   width:100px;
   height:20px;
   background-color:white;
   border:black thin dotted;
   font-size:10px;
}
</style>
</head>
<body>
<input type="button" value="Показать" id="btn1"><br>
<div id="div1" class="cls1">Текст<div>
</body>
</html>

==================================================================
Листинг 8.1. Проверка правильности ввода почтового адреса и пароля
==================================================================
<html>
<head>
<title>Проверка правильности ввода E-mail и пароля</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() {
   $(":text,:password").css("background-color", "#ffffff");
   $("form").submit(function() {
      var pole1 = $("#pole1");
      var pole2 = $("#pole2");
      pole1.css("background-color", "#ffffff");
      pole2.css("background-color", "#ffffff");
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,4}$/i;
      if (!p.test(pole1.val())) {
         alert("Неверный адрес E-mail");
         pole1.css("background-color",
"#ffe4e1").focus().select();
         return false;
      }
      p = /^[a-z0-9_\.\-]{6,16}$/i;
      if (!p.test(pole2.val())) {
         alert("Неверный пароль");
         pole2.css("background-color",
"#ffe4e1").focus().select();
         return false;
      }
      var msg = "Вы ввели следующие данные:\n\n E-mail: ";
      msg += pole1.val() + "\n Пароль: " + pole2.val();
      alert(msg);
      return true;
   });
});
//-->
</script>
</head>
<body>
<form action="test.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.2. Атрибуты readOnly и disabled
==================================================================
<html>
<head>
<title>Атрибуты readOnly и disabled</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() {
   $(":text").css("background-color", "#ffffff");
   $("#pole2").attr("readonly", true);
   $("#btn1").attr("disabled", true);
   $("#pole1").keyup(function() {
      var pole1 = $("#pole1").val();
      var btn1 = $("#btn1");
      if (pole1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled",
true);
      }
      else {
         if (btn1.is(":disabled"))
btn1.removeAttr("disabled");
      }
      $("#pole2").val(pole1);
   });
   $("#btn1").click(function() {
      $("#pole1").val("").keyup();
   });
   $("#pole3").focus(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "[Подсказка]") pole3.val("");
   }).blur(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "") pole3.val("[Подсказка]");
   });
});
//-->
</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.3. Добавление слов из текстового поля в поле
==================================================================
<TEXTAREA>
<html>
<head>
<title>Добавление слов из текстового поля в поле
TEXTAREA</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_click() {
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var txt1 = pole1.val();
   var txt2 = pole2.val();
   if (txt1 != "") {
      pole2.val(txt2 + txt1 + "\n");
      pole1.val("").focus();
   }
   else {
      alert("Поле не заполнено!");
      pole1.focus();
   }
}
$(document).ready(function() {
   $("#pole1").focus();
   $("form").submit(function() {
      var val = $("#pole2").val();
      alert("Текущее значение: \n" + val);
      $("#pole1").focus();
      return false;
   });
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
});
//-->
</script>
</head>
<body>
<form action="test.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.4. Обработка списков
==================================================================
<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">
<!--
var arr = [];
arr[1] = ["Тема1 Элемент1", "Тема1 Элемент2"];
arr[2] = ["Тема2 Элемент1", "Тема2 Элемент2", "Тема2
Элемент3"];
var val = [];
val[1] = ["1", "2"];
val[2] = ["3", "4", "5"];
function f_click() {
   // Добавление пункта в список
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var text1 = pole1.val();
   var text2 = pole2.val();
   if (text1 != "" && text2 != "") {
      var sel1 = $("#select1").get(0);
      var i = sel1.length++;
      sel1.options[i].text = text1;
      sel1.options[i].value = text2;
      pole1.val("");
      pole2.val("");
      pole1.focus();
   }
   else {
      alert("Поле не заполнено!");
      pole1.focus();
   }
}
$(document).ready(function() {
   // Добавление пункта в список
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         $("#pole2").focus();
         return false;
      }
   });
   $("#pole2").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
   // Список со множественным выбором
   $("#btn2").click(function() {
      var msg = "";
      $("#select2 option:selected").each(function() {
         msg += this.value + " - " + this.text + "\n";
      });
      if (msg == "") alert("Выбранных пунктов нет");
      else alert(msg);
   });
   // Взаимосвязанные списки
   $("#select3").change(function() {
      var index = this.value;
      var count = arr[index].length;
      var el = $("#select4").get(0);
      el.length = count;
      for (i=0; i<count; i++) {
         el.options[i].value = val[index][i];
         el.options[i].text = arr[index][i];
      }
   });
   $("#select4").change(function() {
      var msg = "";
      $("#select4 option:selected").each(function() {
         msg = "Значение: " + this.value;
         msg += "\nТекст: " + this.text;
      });
      alert(msg);
   });
   // Переход на указанный сайт
   $("#select5").change(function() {
      var url = $(this).val();
      if (url != 0) {
         window.location.href = url;
      }
   });
});
//-->
</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.mail.ru/">Mail.ru</option>
<option value="http://www.rambler.ru/">Рамблер</option>
</select><br>
</body>
</html>

==================================================================
Листинг 8.5. Обработка флажков и переключателей
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var msg = "";
      var elem = $("#check1");
      if (elem.is(":checked")) {
         msg = "Флажок установлен\n";
         msg += "Значение: " + elem.val() + "\n";
      }
      else {
         msg = "Флажок снят\n";
      }
      var value1 = $("input[id='radio1']:checked").val();
      if (value1 == "male") {
         msg += "Пол: Мужской\n";
      }
      else {
         msg += "Пол: Женский\n";
      }
      alert(msg);
   });
   $("#c0").click(function() {
      if ($("#c0").is(":checked")) {
         $("#frm2 :checkbox").attr("checked", true);
      }
      else {
         $("#frm2 :checkbox").removeAttr("checked");
      }
   });
   $("#btn2").click(function() {
      var msg = "";
      $("#frm2 input[id='c[]']:checked").each(function() {
         msg += "Значение: " + this.value + "\n";
      });
      if (msg == "") alert("Флажки не установлены");
      else alert(msg);
   });
});
//-->
</script>
</head>
<body>
<form action="test.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.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.6. Обработка щелчка на кнопке
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#txt1");
      this.value = elem.val();
      elem.val("");
      $(this).attr("disabled", true);
   });
   $("#txt1").keyup(function() {
      var txt1 = $("#txt1").val();
      var btn1 = $("#btn1");
      if (txt1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled",
true);
      }
      else {
         if (btn1.is(":disabled"))
btn1.removeAttr("disabled");
      }
   });
});
//-->
</script>
</head>
<body>
<input type="text" id="txt1"><br>
<input type="button" value="Изменить текст на кнопке"
   id="btn1" disabled>
</body>
</html>

==================================================================
Листинг 8.7. Вывод порядкового индекса кнопки, на котор.был щелчок
==================================================================
<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">
<!--
$(document).ready(function() {
   $(":button").click(function() {
      alert("Индекс: " + $(":button").index(this));
   });
});
//-->
</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.8. Методы serialize(), serializeArray() и $.param()
==================================================================
<html>
<head>
<title>Методы serialize(), serializeArray() и
$.param()</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() {
   $("#btn1").click(function() {
      $("#div1").text($("#frm1").serialize());
      var arr = $("#frm1").serializeArray();
      var txt = "";
      for (var i=0, count=arr.length; i<count; i++) {
         txt += i + " =&gt; " + arr[i].name + " = ";
         txt += arr[i].value + "<br>";
      }
      $("#div2").html(txt);
      $("#div3").text($.param(arr));
   });
});
//-->
</script>
</head>
<body>
<form action="test.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>$.param():</b><br>
<div id="div3"></div>
</body>
</html>

==================================================================
Листинг 9.1. Функция $.makeArray()
==================================================================
<html>
<head>
<title>Функция $.makeArray()</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() {
   $("#div1").click(function() {
      var arr = $.makeArray($("p").get()).reverse();
      $("#div1").append(arr);
   });
});
//-->
</script>
</head>
<body>
<div id="div1">Нажмите здесь</div>
<p>Абзац1</p>
<p>Абзац2</p>
<p>Абзац3</p>
<p>Абзац4</p>
</body>
</html>

==================================================================
Листинг 9.2. Функция $.unique()
==================================================================
<html>
<head>
<title>Функция $.unique()</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() {
   var arr1 = $("a[href$='.php']").get();
   var arr2 = $(".cls1").get();
   $("#div1").append("Элементов в arr1: " + arr1.length +
"<br>");
   $("#div1").append("Элементов в arr2: " + arr2.length +
"<br>");
   // Объединяем два массива
   var arr3 = arr1.concat(arr2);
   $("#div1").append("Элементов в arr3: " + arr3.length +
"<br>");
   // Оставляем только уникальные значения
   arr3 = $.unique(arr3);
   $("#div1").append("Уникальных элементов: " + arr3.length +
"<br>");
});
</script>
<style>
.cls1 { color:red; }
</style>
</head>
<body>
<div id="div1"></div>
<a href="link1.html" class="cls1">Ссылка 1</a><br>
<a href="link2.php" class="cls1">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.php">Ссылка 4</a><br>
<p class="cls1">Абзац</p>
</body>
</html>

==================================================================
Листинг 9.3. Сохранение, получение и удаление данных
==================================================================
<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">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var elem = $("#div1").get(0);
      $.data(elem, "myData", $("#txt1").val());
      $("#div2").text("Данные сохранены");
   });
   $("#btn2").click(function() {
      var elem = $("#div1").get(0);
      $("#div2").text("Данные: " + $.data(elem, "myData"));
   });
   $("#btn3").click(function() {
      var elem = $("#div1").get(0);
      $.removeData(elem, "myData");
      $("#div2").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>

==================================================================
Листинг 9.4. Методы data() и removeData()
==================================================================
<html>
<head>
<title>Методы data() и removeData()</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() {
   $("#btn1").click(function() {
      $("#div1").data("myData", $("#txt1").val());
      $("#div2").text("Данные сохранены");
   });
   $("#btn2").click(function() {
      $("#div2").text("Данные: " + $("#div1").data("myData"));
   });
   $("#btn3").click(function() {
      $("#div1").removeData("myData");
      $("#div2").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>

==================================================================
Листинг 9.5. Определение блочной модели
==================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xml:lang="en" lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<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">
<!--
$(document).ready(function() {
   if ($.boxModel) {
      $("#div1").html("Строгий режим");
   }
   else {
      $("#div1").html("Простой режим");
   }
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 10.1. Использование тега <iframe>
==================================================================
<html>
<head>
<title>Использование тега &lt;iframe&gt;</title>
</head>
<body>
<form action="ajax.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.php" width="0"
height="0" style="display:none">
</body>
</html>

==================================================================
Листинг 10.2. Исходный код файла ajax.php
==================================================================
<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['text1'])) {
   $msg = 'Данные - ' . $_GET['text1'];
   echo '<script language="JavaScript">', "\n";
   echo "<!--\n";
   echo 'parent.document.getElementById("text1").value = "";',
"\n";
   echo 'parent.document.getElementById("otvet").innerHTML =
"';
   echo htmlspecialchars($msg, ENT_COMPAT, 'UTF-8'), '";';
   echo "\n//-->\n";
   echo "</script>\n";
}
else {
   echo 'Данные не получены';
}
?>

==================================================================
Листинг 10.3. Исходный код, возвращаемый сервером
==================================================================
<script language="JavaScript">
<!--
parent.document.getElementById("text1").value = "";
parent.document.getElementById("otvet").innerHTML = "Данные -
Строка";
//-->
</script>

==================================================================
Листинг 10.4. Создание объекта XMLHttpRequest
==================================================================
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) {}
      }
   }
}

==================================================================
Листинг 10.5. Обмен данными в текстовом формате
==================================================================
<html>
<head>
<title>Обмен данными в текстовом формате</title>
<script language="JavaScript">
<!--
function f_GET() {
   // Отправка запроса методом GET
   var link;
   var url;
   var txt = document.getElementById("text1").value;
   if (txt == "") {
      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("Ваш веб-браузер не поддерживает технологию
Ajax");
      return false;
   }
   url = "/ajax.php?text1=" + encodeURIComponent(txt);
   // Подготовка асинхронного запроса методом GET
   link.open('GET', url, true);
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(null); // Отправляем запрос
   document.getElementById("otvet").innerHTML = "Загрузка...";
}

function f_POST() {
   // Отправка запроса методом POST
   var link;
   var param;
   var txt = document.getElementById("text1").value;
   if (txt == "") {
      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("Ваш веб-браузер не поддерживает технологию
Ajax");
      return false;
   }
   // Передаваемые параметры
   param = "text1=" + encodeURIComponent(txt);
   // Подготовка асинхронного запроса методом POST
   link.open('POST', '/ajax.php', true);
   // Добавляем HTTP-заголовок
   link.setRequestHeader('Content-Type',
      'application/x-www-form-urlencoded');
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(param); // Отправляем запрос
   document.getElementById("otvet").innerHTML = "Загрузка...";
}

function f_razborRequest(link) {
   // Обрабатываем асинхронный запрос
   if (link.readyState == 4) {
      if (link.status == 200) { // Запрос успешно обработан
         var otvet = link.responseText;
         document.getElementById("text1").value = "";
         document.getElementById("otvet").innerHTML = otvet;
      }
      else {
         document.getElementById("otvet").innerHTML =
"Ошибка";
      }
   }
}
//-->
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="button" value="Отправить методом GET"
onclick="f_GET();">
<br>
<input type="button" value="Отправить методом POST"
onclick="f_POST();">
<div id="otvet"></div>
</body>
</html>

==================================================================
Листинг 10.6. Исходный код файла ajax.php
==================================================================
<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['text1'])) {
   echo 'Метод GET – ', $_GET['text1'];
}
else {
   if (isset($_POST['text1'])) {
      echo 'Метод POST – ', $_POST['text1'];
   }
   else {
      echo 'Данные не получены';
   }
}
?>

==================================================================
Листинг 10.7. Обмен данными в формате XML
==================================================================
<html>
<head>
<title>Обмен данными в формате XML</title>
<script language="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("Ваш веб-браузер не поддерживает технологию
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 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
==================================================================
<html>
<head>
<title>Обмен данными в формате JSON</title>
<script language="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("Ваш веб-браузер не поддерживает технологию
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;
         var otvet = eval('(' + json + ')');
         var msg = otvet.text1 + "<br>" + otvet.text2;
         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.11. Исходный код файла ajax.php
==================================================================
<?php
header('Content-Type: text/plain; charset=utf-8');
if (isset($_GET['text1']) && isset($_GET['text2'])) {
   $text1 = htmlspecialchars($_GET['text1'], ENT_COMPAT, 'UTF-
8');
   $text2 = htmlspecialchars($_GET['text2'], ENT_COMPAT, 'UTF-
8');
   $arr = array('text1' => $text1, 'text2' => $text2);
   echo json_encode($arr);
}
else {
   $arr = array('text1' => 'Данные не получены', 'text2' =>
'');
   echo json_encode($arr);
}
?>

==================================================================
Листинг 11.1. SQL-запрос для создания таблицы
==================================================================
CREATE TABLE `films` (
   `id` int(11) auto_increment,
   `name` varchar(255) character set `utf8` collate
`utf8_general_ci`,
   `descr` text character set `utf8` collate
`utf8_general_ci`,
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate
`utf8_general_ci`;
INSERT INTO `films` (`id`, `name`, `descr`) VALUES
(1, 'Фильм 1', 'Описание фильма 1'),
(2, 'Фильм 2', 'Описание фильма 2'),
(3, 'Фильм 3', 'Описание фильма 3');

==================================================================
Листинг 11.2. Содержимое файла index.php
==================================================================
<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
      or die('Не удалось установить подключение');
mysql_select_db('test') or die('Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
?>
<html>
<head>
<title>Метод load()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_show(id, elem) {
   var div = $("#div" + id);
   var link = $(elem);
   if (div.is(":hidden")) {
      if (div.text() == "") {
         div.load("/ajax.php", { "id": id },
         function(responseText, textStatus) {
            if (textStatus == 'error') {
               div.html("Ошибка при загрузке");
            }
            div.slideDown(300);
            link.html("Скрыть");
         });
      }
      else {
         div.slideDown(300);
         link.html("Скрыть");
      }
   }
   else {
      div.slideUp(300);
      link.html("Показать");
   }
}
//-->
</script>
</head>
<body>
<?php
$query = 'SELECT `id`, `name` FROM `films` ORDER BY `name`';
if ($res = mysql_query($query)) {
   while ($row = mysql_fetch_row($res)) {
      echo '<a href="#" onclick="f_show(' . $row[0] . ',
this); ';
      echo 'return false;">Показать</a> <b>';
      echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
      echo "</b><br>\n";
      echo '<div id="div' . $row[0] . '"
style="display:none;">';
      echo "</div>\n";
   }
}
mysql_close($db);
?>
</body>
</html>

==================================================================
Листинг 11.3. Содержимое файла ajax.php
==================================================================
<?php
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('Данные отправлены не через AJAX');
}
if (isset($_POST['id'])) $id = (int)$_POST['id'];
else $id = 0;
if ($id === 0) exit('Параметр id содержит ошибку');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
      or die('Не удалось установить подключение');
mysql_select_db('test') or die('Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
$query = 'SELECT `descr` FROM `films` WHERE `id`=' . $id;
if ($res = mysql_query($query)) {
   if (mysql_num_rows($res) != 0) {
      $row = mysql_fetch_row($res);
      echo $row[0]; // Выводим описание
   }
   else {
      echo 'Фильм не найден';
   }
}
else {
   echo 'Ошибка при выполнении запроса';
}
mysql_close($db);
?>

==================================================================
Листинг 11.4. Содержимое файла index.php
==================================================================
<html>
<head>
<title>Функция $.getJSON() и JSON</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() {
   $(":button").click(function() {
      $.getJSON("/ajax.php", { txt: "test" },
         function(jsonObject) {
            $("#div1").html("param1 = " + jsonObject.param1 +
               "<br>" + "param2 = " + jsonObject.param2);
         }
      );
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>

==================================================================
Листинг 11.5. Содержимое файла ajax.php
==================================================================
<?php
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/javascript; charset=utf-8');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   exit('Данные отправлены не через AJAX');
}
if (!isset($_GET['txt'])) {
   exit('Некорректные параметры запроса');
}
?>
{
param1: "Значение 1",
param2: "<?php echo $_GET['txt']; ?>"
}

==================================================================
Листинг 11.6. Содержимое файла http://localhost/index.php
==================================================================
<html>
<head>
<title>Функция $.getJSON() и JSONP</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() {
   $(":button").click(function() {
      $.getJSON("http://site1/ajax.php?txt=test&callback=?",
         function(jsonObject) {
            $("#div1").html("param1 = " + jsonObject.param1 +
               "<br>" + "param2 = " + jsonObject.param2);
         }
      );
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>

==================================================================
Листинг 11.7. Содержимое файла http://site1/ajax.php
==================================================================
<?php
header('Content-Type: text/javascript; charset=utf-8');
if (!isset($_GET['callback'])) {
   exit('Некорректные параметры запроса');
}
echo $_GET['callback']; ?>({
param1: "Данные с другого домена",
param2: "<?php echo $_GET['txt']; ?>"
});

==================================================================
Листинг 11.8. Содержимое файла http://localhost/index.php
==================================================================
<html>
<head>
<title>Функция $.getScript()</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() {
   $(":button").click(function() {
      $.getScript("http://site1/script.js",
         function() {
            if (typeof myStatus != "undefined")
               alert("Данные успешно получены");
            else alert("Проблемы");
         }
      );
   });
});
//-->
</script>
</head>
<body>
<input type="button" value="Получить данные">
</body>
</html>

==================================================================
Листинг 11.9. Содержимое файла http://site1/script.js
==================================================================
var myStatus = "OK";
alert("Это данные с другого домена");

==================================================================
Листинг 11.10. SQL-запрос для создания таблицы
==================================================================
CREATE TABLE `categories` (
   `id` int(11) auto_increment,
   `name` varchar(255),
   `parentID` int(11),
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate
`utf8_general_ci`;
INSERT INTO `categories` VALUES (1, 'Раздел 1', 0);
INSERT INTO `categories` VALUES (2, 'Раздел 2', 0);
INSERT INTO `categories` VALUES (3, 'Раздел 3', 0);
INSERT INTO `categories` VALUES (4, 'Подраздел 1.1', 1);
INSERT INTO `categories` VALUES (5, 'Подраздел 1.2', 1);
INSERT INTO `categories` VALUES (6, 'Подраздел 2.1', 2);
INSERT INTO `categories` VALUES (7, 'Подраздел 2.2', 2);
INSERT INTO `categories` VALUES (8, 'Подраздел 3.1', 3);
INSERT INTO `categories` VALUES (9, 'Подраздел 3.2', 3);
INSERT INTO `categories` VALUES (10, 'Подраздел 3.3', 3);

==================================================================
Листинг 11.11. Содержимое файла index.php
==================================================================
<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
// Подключаемся к базе
$db = mysql_connect('localhost', 'root', '123456')
      or die('Не удалось установить подключение');
mysql_select_db('test') or die('Такой базы данных нет');
mysql_query('SET NAMES `utf8`'); // Кодировка соединения
?>
<html>
<head>
<title>Функция $.get()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_result(data) {
   if (data.indexOf("ERROR") == -1) {
      var el;
      el = '<select size="4" id="sel2">' + data + '</select>';
      $("#sel2").replaceWith(el);
   }
   else {
      if (data == "") alert("Ошибка запроса");
      else alert(data);
   }
   $("#div1").stop().hide(300);
}
$(document).ready(function() {
   $("#sel1").change(function() {

      $("#div1").stop().show(300);
      $("#sel2").attr("disabled", true);
      $.get("/ajax.php", { id: $("#sel1").val() }, f_result);
   });
});
//-->
</script>
<style>
#sel1, #sel2 { width:150px; }
</style>
</head>
<body>
<select size="4" id="sel1">
<?php
$query = 'SELECT `id`, `name` FROM `categories` ';
$query .= 'WHERE `parentID`=0 ORDER BY `name`';
if ($res = mysql_query($query)) {
   while ($row = mysql_fetch_row($res)) {
      echo '<option value="' . $row[0] . '">';
      echo htmlspecialchars($row[1], ENT_COMPAT, 'UTF-8');
      echo "</option>\n";
   }
}
mysql_close($db);
?>
</select>&nbsp;&nbsp;&nbsp;
<select size="4" id="sel2" style="display:none;">
</select>
<div id="div1" style="display:none;">Загрузка...</div>
</body>
</html>

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

==================================================================
Листинг 11.13. SQL-запрос для создания таблицы
==================================================================
CREATE TABLE `mail` (
   `id` int(11) auto_increment,
   `name` varchar(255) default '',
   `email` varchar(255) default '',
   `tema` varchar(255) default '',
   `msg` text,
   `date_msg` datetime,
   `status` enum('new', 'old'),
   PRIMARY KEY (`id`)
) engine=MYISAM character set `utf8` collate `utf8_general_ci`

==================================================================
Листинг 11.14. Содержимое файла index.php
==================================================================
<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем кодировку
header('Content-Type: text/html; charset=utf-8');
?>
<html>
<head>
<title>Функция $.post()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function f_result(xml) {
   var status = $("status", xml).eq(0).text();
   var msg = $("msg", xml).eq(0).text();
   if (status == "ok") {
      $("#author").val("");
      $("#emails").val("");
      $("#tema").val("");
      $("#msg").val("");
   }
   $("#div1").html(msg);
   $("#btn").removeAttr("disabled");
}
$(document).ready(function() {
   $("#frm").submit(function() {
      $("#btn").attr("disabled", true);
      $("#div1").html("Загрузка...");
      $.post("/ajax.php", $("#frm").serialize(), f_result,
"xml");
      return false;
   });
   $("#author").keypress(function(e) {
      if (e.keyCode==13) {
         $("#emails").focus();
         return false;
      }
   });
   $("#emails").keypress(function(e) {
      if (e.keyCode==13) {
         $("#tema").focus();
         return false;
      }
   });
   $("#tema").keypress(function(e) {
      if (e.keyCode==13) {
         $("#msg").focus();
         return false;
      }
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<form method="POST" action="ajax.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;
height:150px">
</textarea><br><br>
<input type="submit" id="btn" value="Отправить">
</form>
</body>
</html>

==================================================================
Листинг 11.15. Содержимое файла ajax.php
==================================================================
<?php
// Запрещаем кеширование
header('Expires: Sun, 27 May 2007 01:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
   header('Content-Type: text/html; charset=utf-8');
   // Здесь обрабатываем данные, если отключен JavaScript
   exit('Данные отправлены не через AJAX');
}
else { // Если отправлено через AJAX
   // Указываем тип документа и кодировку
   header('Content-Type: text/xml; charset=utf-8');
   // Получаем данные
   if (isset($_POST['emails'])) $emails = $_POST['emails'];
   else $emails = '';
   if (isset($_POST['author'])) $author = $_POST['author'];
   else $author = '';
   if (isset($_POST['tema'])) $tema = $_POST['tema'];
   else $tema = '';
   if (isset($_POST['msg'])) $msg = $_POST['msg'];
   else $msg = '';
   $err_msg = '';
   // Удаляем пробельные символы
   $author = trim($author);
   $tema = trim($tema);
   $msg = trim($msg);
   // Если директива magic_quotes_gpc включена,
   // то удаляем защитные слеши перед спецсимволами
   if (get_magic_quotes_gpc()) {
       $author = stripslashes($author);
       $tema = stripslashes($tema);
       $msg = stripslashes($msg);
   }
   $pattern = '/^[a-z0-9_.-]+@([a-z0-9-]+\.)+[a-z]{2,6}$/isu';
   if (!preg_match($pattern, $emails)) {
      $err_msg .= 'Недопустимый адрес E-mail !<br>';
   }
   if (mb_strlen($emails, 'UTF-8') > 60) {
      $err_msg .= 'Длина E-mail больше 60 символов!<br>';
   }
   if (mb_strlen($author, 'UTF-8') == 0) {
      $err_msg .= 'Поле Имя не заполнено!<br>';
   }
   if (mb_strlen($author, 'UTF-8') > 30) {
      $err_msg .= 'Длина поля Имя более 30 символов!<br>';
   }
   if (mb_strlen($tema, 'UTF-8') == 0) {
      $err_msg .= 'Поле Тема не заполнено!<br>';
   }
   if (mb_strlen($tema, 'UTF-8') > 50) {
      $err_msg .= 'Длина поля Тема более 50 символов!<br>';
   }
   if (mb_strlen($msg, 'UTF-8') == 0) {
      $err_msg .= 'Поле Сообщение не заполнено!<br>';
   }
   if (mb_strlen($msg, 'UTF-8') > 65000) {
      $err_msg .= 'Длина поля Сообщение более 65000
символов!<br>';
   }
   if ($err_msg == '') {
      // Подключаемся к базе
      if (!@$db = mysql_connect('localhost', 'root',
'123456')) {
         $err_msg .= 'Не удалось установить подключение!<br>';
      }
      else {
         if (mysql_select_db('test')) {
            mysql_query('SET NAMES `utf8`');
         }
         else {
            $err_msg .= 'Такой базы данных нет!<br>';
         }
      }
   }
   if ($err_msg == '') {
      // Если ошибок нет, то сохраняем сообщение
      // При желании можно отправить на E-mail с помощью
функции mail()
      $author = mysql_real_escape_string($author);
      $tema = mysql_real_escape_string($tema);
      $msg = mysql_real_escape_string($msg);
      $q = "INSERT INTO `mail` VALUES (NULL, '$author',
'$emails', ";
      $q .= "'$tema', '$msg', NOW(), 'new')";
      if (!mysql_query($q)) {
         $err_msg .= 'Не удалось сохранить сообщение<br>';
      }
      mysql_close($db);
   }
   if ($err_msg != '') {
      $status = 'error';
      $otvet = '<span style="color:red;">' . $err_msg .
'</span>';
   }
   else {
      $status = 'ok';
      $otvet = '<span style="color:green; font-
weight:bold;">';
      $otvet .= 'Сообщение успешно сохранено</span>';
   }
   $otvet = htmlspecialchars($otvet, ENT_COMPAT, 'UTF-8');

   echo "<ajax>\n";
   echo '<status>' . $status . "</status>\n";
   echo '<msg>' . $otvet . "</msg>\n";
   echo "</ajax>\n";
}
?>

==================================================================
Листинг 11.16. Последовательность событий AJAX
==================================================================
<html>
<head>
<title>Последовательность событий AJAX</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() {
   $("#div1").ajaxStart(function() {
      $(this).append("Глобальное событие ajaxStart<br>");
   }).ajaxSend(function() {
      $(this).append("Глобальное событие ajaxSend<br>");
   }).ajaxSuccess(function() {
      $(this).append("Глобальное событие ajaxSuccess<br>");
   }).ajaxError(function() {
      $(this).append("Глобальное событие ajaxError<br>");
   }).ajaxComplete(function() {
      $(this).append("Глобальное событие ajaxComplete<br>");
   }).ajaxStop(function() {
      $(this).append("Глобальное событие ajaxStop<br>");
   });
   $(":button").click(function() {
      $.ajax({
         url: "/ajax.php",
         dataType: "html",
         cache: false,
         beforeSend: function() {
            $("#div1").append("Локальное событие
beforeSend<br>");
         },
         dataFilter: function(data) {
            $("#div1").append("Локальное событие
dataFilter<br>");
            return data;
         },
         success: function() {
            $("#div1").append("Локальное событие
success<br>");
         },
         error: function() {
            $("#div1").append("Локальное событие error<br>");
         },
         complete: function() {
            $("#div1").append("Локальное событие
complete<br>");
         },
         data: { id:1, txt:"Данные" }
      });
   });
});
//-->
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>

==================================================================
Листинг 12.1. UI Draggable. Перемещение элементов
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Draggable. Перемещение элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
* { margin:0; padding:0; }
body { font-size:8pt; font-family:Verdana, sans-serif; }
#draggable {
   position:absolute;
   top:50px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
}
.ui-draggable {
   /* Класс, добавляемый после применения метода draggable()
*/
   background-color:#E8E8E8;
}
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#008800;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable").draggable();
});
//-->
</script>
</head>
<body>
<div id="draggable"><p>Передвинь меня с помощью мыши</p></div>
</body>
</html>

==================================================================
Листинг 12.2. Модуль UI Draggable, различные варианты настроек
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Draggable. Различные варианты настроек</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
* { margin:0; padding:0; }
body { font-size:8pt; font-family:Verdana, sans-serif; }
.drag {
   position:absolute;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
}
.ui-draggable {
   /* Класс, добавляемый после применения метода draggable()
*/
   background-color:#fff4dd;
}
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#008800;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable1").draggable({
      addClasses: false, // Отключаем добавление класса ui-
draggable
      axis: "x", // Перемещение только по горизонтали
      revert: true, // Возврат на прежнее место по окончании
перемещения
      cursor: "e-resize", // Вид курсора при перемещении
      delay: 200 // Задержка перед перемещением
   });
   $("#draggable2").draggable({
      // Перемещение в пределах родительского элемента
      containment: "parent",
      opacity: 0.3 // Прозрачность при перемещении
   });
   $("#draggable3").draggable({
      grid: [40, 60] // Привязка к сетке
   });
   $("#draggable4").draggable({ snap: true, snapTolerance: 30
});
   $("#draggable5").draggable({ snap: "#div1" });
   $("#draggable6").draggable({ snap: "#div1", snapMode:
"inner" });
   $("#draggable7").draggable({ scroll: false }); //
Отключение прокрутки
   $("#draggable8").draggable({ scrollSensitivity: 100,
scrollSpeed: 20 });
   $("#draggable9").draggable({
      helper: "clone", // Перемещение копии элемента
      // Копию вставляем в конец содержимого элемента BODY
      appendTo: "body",
      // После окончания перемещения возврат на прежнее место
      revert: true
   });
   $("#draggable10").draggable({
      cursor: "crosshair", // Вид курсора при перемещении
      cursorAt: { top: 0, left: 0 } // Местоположение курсора
   });
   $("#draggable11").draggable({ zIndex: 9000 });
   $("#draggable12, #draggable13").draggable({
      stack: { group: "#div2 div", min: 5 }
   });
   $("#draggable14").draggable({ cursor: "move", handle:
"#div3" });
   $("#draggable15").draggable({ cancel: "#div3" });
});
//-->
</script>
</head>
<body>
<div style="height:1500px; width:5px;"></div>
<div id="draggable11" class="drag" style="top:200px;
left:700px;">
Блок будет расположен над другими элементами при
перемещении</div>
<div id="draggable1" class="drag" style="top:5px; left:50px;">
Блок можно передвинуть только по горизонтали</div>
<div id="div1" style="position:absolute; top:160px; left:50px;
width:550px; height:150px; border:2px solid #000000;">
Родительский элемент id=div1
<div id="draggable2" class="drag" style="top:15px;
left:250px;">
Блок можно передвинуть только в пределах родительского
элемента</div>
</div>
<div id="draggable3" class="drag"
style="top:5px;left:250px;height:130px;">
Блок можно передвинуть не менее чем на 40px по горизонтали
или не менее чем на 60px по вертикали</div>
<div id="draggable4" class="drag" style="top:350px;
left:50px;">
Блок прилипнет к границе любого перемещаемого элемента</div>
<div id="draggable5" class="drag" style="top:350px;
left:200px;">
Блок прилипнет к границе элемента с id=div1</div>
<div id="draggable6" class="drag" style="top:350px;
left:350px;">
Блок прилипнет к границе элемента с id=div1, но только с
внутренней стороны</div>
<div id="draggable7" class="drag" style="top:5px;
left:450px;">
При перемещении за рамки окна прокрутки не будет</div>
<div id="draggable8" class="drag" style="top:5px;
left:600px;">
Прокрутка начнется при расстоянии 100px от края окна до
указателя мыши</div>
<div id="draggable9" class="drag" style="top:5px;
left:750px;">
Перемещаться будет копия блока</div>
<div id="draggable10" class="drag" style="top:350px;
left:500px;">
Блок можно перемещать только за верхний левый угол</div>
<div id="div2" style="position:absolute; top:500px; left:50px;
width:550px; height:150px; border:2px solid #000000;">Группа
<div id="draggable12" class="drag" style="top:15px;
left:150px;">
Блок будет расположен над другим элементом в этой группе</div>
<div id="draggable13" class="drag" style="top:15px;
left:350px;">
Блок будет расположен над другим элементом в этой группе</div>

</div>
<div id="draggable14" class="drag" style="top:350px;
left:700px;">
<div id="div3" style="background-
color:#ff9600;">Заголовок</div>
<br>Блок можно переместить только с помощью заголовка</div>/
<div id="draggable15" class="drag" style="top:500px;
left:700px;">
<div id="div3" style="background-
color:#ff9600;">Заголовок</div>
<br>Блок с помощью заголовка переместить нельзя</div>
</body>
</html>

==================================================================
Листинг 12.3. Модуль UI Draggable, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Draggable. Обработка событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
.drag {
   position:absolute;
   top:10px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
}
.ui-draggable {
   /* Класс, добавляемый после применения метода draggable()
*/
   background-color:#fff4dd;
}
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#008800;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#draggable").draggable({
      start: function() {
         $("#div2").append("Событие start<br>");
      },
      drag: function(e, ui) {
         $("#div2").append("Событие drag<br>");
         var msg = "Положение:<br> position - сверху: " +
                   ui.position.top;
         msg += " px, слева: " + ui.position.left + " px<br>";
         msg += "offset - сверху: " + ui.offset.top + " px,
слева: ";
         msg += ui.offset.left + " px<br>";
         $("#div1").html(msg);
      },
      stop: function(e, ui) {
         $("#div2").append("Событие stop<br>");
         ui.helper.html("<p>Объект остановился</p>");
      }
   }).bind("dragstart", function() {
      $("#div2").html("Событие dragstart<br>");
   }).bind("drag", function() {
      $("#div2").append("Событие drag (bind)<br>");
   }).bind("dragstop", function() {
      $("#div2").append("Событие dragstop<br>");
   });
   $("#btn1").click(function() {
      $("#draggable").draggable("disable");
   });
   $("#btn2").click(function() {
      $("#draggable").draggable("enable");
   });
});
//-->
</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; top:160px; left:250px;
width:550px; height:150px; border:2px solid #000000;">
Родительский элемент
<div id="draggable" class="drag"><p>Передвинь меня с помощью
мыши</p></div>
</div>
</body>
</html>

==================================================================
Листинг 12.4. Модуль UI Droppable, “сбрасывание” элементов
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Droppable. &quot;Сбрасывание&quot; элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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() {
   $("#draggable1").draggable({
      helper: "clone",
      scope: "test", // Ограничение области видимости
      zIndex: 9000
   });
   $("#droppable1").droppable({
      scope: "test", // Ограничение области видимости
      drop: function() {
         alert("Попали...");
      }
   });
   $("#draggable2").draggable({ helper: "clone", zIndex: 9000
});
   $("#droppable2").droppable({
      drop: function() {
         alert("Попали...");
      }
   });
});
//-->
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
   position:absolute;
   top:10px; left:50px;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
   background-color:#fff4dd;
}
</style>
</head>
<body>
<div id="draggable1" style="top:50px;left:50px;">
Блок можно сбросить только на красный квадрат</div>
<div id="droppable1" style="top:50px;left:350px;background-
color:red;">
&nbsp;</div>
<div id="draggable2" style="top:250px;left:50px;">
Блок можно сбросить только на зеленый квадрат</div>
<div id="droppable2"
style="top:250px;left:350px;background-
color:green;">&nbsp;</div>
</body>
</html>

==================================================================
Листинг 12.5. Модуль UI Droppable, использование опции greedy
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Droppable. Использование опции greedy</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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() {
   $("#draggable1").draggable({
      helper: "clone", // Перемещаем копию элемента
      zIndex: 9000
   });
   $("#droppable1").droppable({
      // Сбросить можно только элемент с id=draggable1
      accept: "#draggable1",
      addClasses: false, // Отключаем добавление класса ui-
droppable
      activeClass: "cls1", // Класс, добавляемый при
перемещении
      // Класс, добавляемый, если сбрасывание объекта будет
успешным
      hoverClass: "cls2",
      // Объект должен целиком располагаться над элементом
      tolerance: "fit",
      drop: function() {
         alert("Попали в родительский блок");
      }
   });
   $("#droppable2").droppable({
      greedy: true,
      activeClass: "cls1",
      hoverClass: "cls2",
      drop: function() {
         alert("Попали во вложенный блок");
      }
   });
   $("#btn1").click(function() {
      if ($("#droppable2").droppable("option", "greedy")) {
         $("#droppable2").droppable("option", "greedy", false)
         .html("Вложенный блок<br>greedy = false");
      }
      else {
         $("#droppable2").droppable("option", "greedy", true)
         .html("Вложенный блок<br>greedy = true");
      }
   });
});
//-->
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
   position:absolute;
   width:100px; height:100px;
   padding:2px;
   border:2px solid #000000;
   text-align:center;
   background-color:#fff4dd;
}
.cls1 { background-color:#ff0000; }
.cls2 { background-color:#008800; }
.ui-draggable-dragging {
   /* Класс, добавляемый при перемещении элемента */
   background-color:#ff9600;
}
</style>
</head>
<body><br><br>
<input type="button" value="Поменять значение опции greedy"
id="btn1">
<div id="draggable1" style="top:150px;left:50px;">
Сбрось меня на вложенный блок</div>
<div id="droppable1"
style="top:50px;left:350px;width:250px;height:250px;">
Блок-цель
<div id="droppable2"
style="top:110px;left:20px;width:200px;height:120px;">
Вложенный блок<br>greedy = true</div>
</div>
</body>
</html>

==================================================================
Листинг 12.6. Модуль UI Droppable, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Droppable. Обработка событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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() {
   $("#draggable1").draggable({ revert: "invalid", zIndex:
9000 });
   $("#draggable2").draggable({ revert: "valid", zIndex: 9000
});
   $("#draggable3").draggable({ helper: "clone", zIndex: 9000
});
   $("#droppable").droppable({
      activate: function(e, ui) {
         $("#span1").append("Событие activate<br>");
         ui.helper.css("background-color", "#ff9600");
      },
      deactivate: function(e, ui) {
         $("#span1").append("Событие deactivate<br>");
         ui.helper.css("background-color", "#fff4dd");
         $(this).css("background-color", "#fff4dd");
      },
      over: function() {
         $("#span1").append("Событие over<br>");
         $(this).css("background-color", "#008800");
      },
      out: function() {
         $("#span1").append("Событие out<br>");
         $(this).css("background-color", "#fff4dd");
      },
      drop: function(e, ui) {
         var msg = "Координаты сброса:<br> position - сверху:
";
         msg += ui.position.top +" px, слева: " +
ui.position.left;
      msg += " px<br>offset - сверху: " + ui.offset.top + "
px, слева: ";
         msg += ui.offset.left + " px<br>";
         $("#span1").append("Событие drop<br>" + msg);
      }
   }).bind("dropactivate", function() {
      $("#span1").html("Событие dropactivate<br>");
   }).bind("dropdeactivate", function() {
      $("#span1").append("Событие dropdeactivate<br>");
   }).bind("dropover", function() {
      $("#span1").append("Событие dropover<br>");
   }).bind("dropout", function() {
      $("#span1").append("Событие dropout<br>");
   }).bind("drop", function() {
      $("#span1").append("Событие drop (bind)<br>");
   });
   $("#btn1").click(function() {
      $("#droppable").droppable("disable");
   });
   $("#btn2").click(function() {
      $("#droppable").droppable("enable");
   });
});
//-->
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
   position:absolute; width:100px; height:100px; padding:2px;
   border:2px solid #000000; text-align:center;
   background-color:#fff4dd;
}
</style>
</head>
<body>
<input type="button" value="Запретить" id="btn1">
<input type="button" value="Разрешить" id="btn2"><br><br>
<span id="span1"></span>
<div id="draggable1" style="top:50px;left:600px;z-index:5">
Перемещаемый блок 1<br>revert = invalid</div>
<div id="draggable2" style="top:200px;left:600px;;z-index:5">
Перемещаемый блок 2<br>revert = valid</div>
<div id="draggable3" style="top:350px;left:600px;;z-index:5">
Перемещаемый блок 3<br>helper = clone</div>
<div id="droppable"
style="top:50px;left:250px;width:250px;height:250px;">
Блок-цель</div>
</body>
</html>

==================================================================
Листинг 12.7. Модуль UI Sortable, сортировка элементов списка
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Sortable. Сортировка элементов списка</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:0; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:200px;
     font-size:16px; font-family:Verdana, sans-serif;
height:18px;
     border: 1px solid #000000; color:#000000; font-
weight:bold; }
.itemColor1 { background-color:#fff4dd; }
.itemColor2 { background-color:#d5dee7; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#sortable").sortable().disableSelection();
   $("#draggable li").draggable({
      helper: "clone", // Перемещение копии элемента
      // Пункты можно добавить в список с id=sortable
      connectToSortable: "#sortable"
   }).disableSelection(); // Запрещаем выделение текста
пунктов
});
//-->
</script>
</head>
<body>
<span style="font-weight:bold;">Сортируемый
список</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;">Из этого списка можно добавить
пункты
в сортируемый список</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.8. Модуль UI Sortable, различные варианты пар.настройки
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Sortable. Различные варианты настроек</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:0; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:200px;
   font-size:16px; font-family:Verdana, sans-serif;
height:18px;
   border: 1px solid #000000; color:#000000; font-weight:bold;
}
.itemColor1 { background-color:#fff4dd; }
.itemColor2 { background-color:#d5dee7; }
.cls1 { border: dotted 1px black; background-color:#ffe9b3; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#sortable1").sortable({
      items: "li", // Перемещаем элементы LI
      axis: "y", // Перемещение только по вертикали
      cursor: "s-resize", // Вид курсора при перемещении
      cancel: "span", // За элемент SPAN переместить нельзя
      connectWith: "#sortable2,#sortable3", // Куда можно
переместить
      delay: 200 // Задержка перед перемещением
   }).disableSelection();
   $("#sortable2").sortable({
      revert: true, // Перемещение с анимацией
      containment: "window", // Перемещение в пределах окна
      opacity: 0.5, // Степень прозрачности
      helper: "clone", // Перемещение копии пункта списка
      placeholder: "cls1", // Класс для "заглушки"
      connectWith: "#sortable1,#sortable3", // Куда можно
переместить
      dropOnEmpty: false, // Добавить элементы в пустой список
нельзя
      cursorAt: { top: 0 } // Перемещение за верхнюю границу
   }).disableSelection();
   $("#sortable3").sortable({
      connectWith: "#sortable1,#sortable2" // Куда можно
переместить
   }).disableSelection();
});
//-->
</script>
</head>
<body>
<span style="font-weight:bold;">Сортируемый список
1</span><br>
За красный прямоугольник переместить элемент нельзя<br><br>
<ul id="sortable1">
<li class="itemColor1">Пункт 1
<span style="background-
color:red;">&nbsp;&nbsp;&nbsp;&nbsp;</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;">Сортируемый список
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>
</ul><br><br>
<span style="font-weight:bold;">Сортируемый список
3</span><br>
Добавить элементы в этот пустой список можно только из списка
1<br><br>
<ul style="background-
color:#fff4dd;margin:5px;padding:5px;width:250px;"
id="sortable3">
</ul>
</body>
</html>

==================================================================
Листинг 12.9. Модуль UI Sortable, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Sortable. Обработка событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
div { margin: 0; padding: 0; }
body { font-size:10pt; font-family:Verdana, sans-serif; }
h2 { background-color: #ffe9b3; font-size: 12pt;
   padding: 3px 3px 3px 10px; margin: 0 0 5px 0;
}
.section {
   margin: 0 0 15px 5px; width: 300px; height: 100px;
   background-color: #fffbef; border: 1px solid #000000;
   color: #000000; font-weight: bold;
}
#sections, #sections2 { width: 400px; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#sections").sortable({
      items: "div", // Сортируемые элементы
      handle: "h2", // Перемещение только за заголовок
      revert: true, // Перемещение с анимацией
      connectWith: "#sections2", // Куда можно переместить
      start: function(e, ui) {
         $("#div1").html("Событие start<br>");
         ui.helper.find("h2").css("background-color",
"#ff0000");
      },
      sort: function() { $("#div1").append("Событие
sort<br>"); },
      change: function() { $("#div1").append("Событие
change<br>"); },
      beforeStop: function(e, ui) {
         $("#div1").append("Событие beforeStop<br>");
         ui.helper.find("h2").css("background-color",
"#ffe9b3");
      },
      stop: function() {$("#div1").append("Событие stop<br>");
},
      update: function() { $("#div1").append("Событие
update<br>"); },
      receive: function(e, ui) {
         $("#div1").append("Событие receive<br>");
         ui.item.find("p").html("Элемент перемещен из другого
списка");
      },
      remove: function() { $("#div1").append("Событие
remove<br>"); },
      over: function() { $("#div1").append("Событие
over<br>"); },
      out: function() { $("#div1").append("Событие out<br>");
},
      activate: function() {
         $("#div1").append("Событие activate<br>");
      },
      deactivate: function() {
         $("#div1").append("Событие deactivate<br>");
      }
   });
   $("#sections2").sortable({
      items: "div", // Сортируемые элементы
      handle: "h2", // Перемещение только за заголовок
      connectWith: "#sections" // Куда можно переместить
   });
   $("#btn1").click(function() {
$("#sections").sortable("disable"); });
   $("#btn2").click(function() {
$("#sections").sortable("enable"); });
   $("#btn3").click(function() {
$("#sections").sortable("cancel"); });
   $("#btn4").click(function() {
      alert($("#sections").sortable("serialize", { attribute:
"id",
         key: "myParam[]", expression: /_(.+)/ }));
      var arr = $("#sections").sortable("toArray", {
attribute: "id" });
      var msg = "";
      for (var i=0, count=arr.length; i<count; i++)
         msg += "[" + i + "] => " + arr[i] + "\n";
      alert(msg);
   });
});
//-->
</script>
</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.10. Модуль UI Selectable, выделение элементов
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Selectable. Выделение элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:15px; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:300px;
     font-size:16px; font-family:Verdana, sans-serif;
height:18px;
     border: 1px solid #000000; color:#000000; font-
weight:bold; }
.ui-selecting { background-color: #ffe9b3; }
.ui-selected { background-color: #ff9600; color: #ffffff; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#selectable").selectable();
});
//-->
</script>
</head>
<body>
Нажмите левую кнопку мыши над элементом и, не отпуская ее,
выделяйте
элементы.
<br>Удерживайте нажатой клавишу Ctrl, чтобы добавить новые
элементы.<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.11. Модуль UI Selectable, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Selectable. Обработка событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:15px; list-style-type:none; }
.ui-selectee {
   /* Класс, добавляемый при инициализации */
   margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px;
width:300px;
   font-size:16px; font-family:Verdana, sans-serif;
height:18px;
   border: 1px solid #000000; color:#000000; font-weight:bold;
}
.ui-selecting {
   /* Класс, добавляемый, если элемент попал в область
выделения */   background-color:
#ffe9b3;
}
.ui-selected {
   /* Класс, добавляемый, если элемент был выделен */
   background-color: #ff9600; color: #ffffff;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#selectable").selectable({
      filter: "li", // Выделяемые элементы
      cancel: "#id3", // Над элементом с id=id3 нельзя начать
выделение
      // Выделяем, если любая точка пункта попала в область
выделения
      tolerance: "touch",
      start: function() { $("#div1").append("Событие
start<br>"); },
      selected: function() {$("#div1").append("Событие
selected<br>");},
      selecting: function() {
         $("#div1").append("Событие selecting<br>");
      },
      unselected: function() {
         $("#div1").append("Событие unselected<br>");
      },
      unselecting: function() {
         $("#div1").append("Событие unselecting<br>");
      },
      stop: function() {
         $("#div1").append("Событие stop<br>");
         // Выводим идентификаторы всех выделенных пунктов
         var elem = $("#selectedItems").empty();
         var sel = $("#selectable li.ui-selected");
         if (sel.size() > 0)
            sel.each(function() { elem.append(" " + this.id);
});
         else elem.append("Нет");
      }
   }).bind("selectablestart", function() {
      $("#div1").html("Событие selectablestart<br>");
   });
   $("#btn1").click(function() {
$("#selectable").selectable("disable"); });
   $("#btn2").click(function() {
$("#selectable").selectable("enable"); });
});
//-->
</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.12. Модуль UI Resizable, изменение размеров
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Resizable. Изменение размеров</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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#resizable { width:300px; height:150px; padding:15px; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#resizable").resizable();
});
//-->
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
Размеры этого блока можно изменять с помощью мыши.</div>
</body>
</html>

==================================================================
Листинг 12.13. Модуль UI Resizable, разл. пар.настройки и события
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Resizable. Различные настройки</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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
.resizable { width:300px; height:150px; padding:15px; }
.cls1 { border:1px dotted #000000; z-index:5000; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#resizable").resizable({
      maxHeight: 600, // Максимальная высота
      maxWidth: 1200, // Максимальная ширина
      minHeight: 100, // Минимальная высота
      minWidth: 100, // Минимальная ширина
      containment: "parent", // Ограничение границами родителя
      // Показывать маркер, только когда курсор расположен над
элементом
      autoHide: true,
      aspectRatio: true, // Пропорциональное изменение
размеров
      stop: function(e, ui) {
         var msg="<b>Размеры до:</b> ширина - " +
ui.originalSize.width;
         msg += ", высота - " + ui.originalSize.height +
"<br>";
         msg += "<b>Размеры после:</b> ширина - " +
ui.size.width;
         msg += ", высота - " + ui.size.height + "<br>";
         $("#div1").html(msg);
      }
   });
   $("#resizable2").resizable({
      animate: true, // Изменение размеров с анимацией
      animateDuration: 1000, // Продолжительность
      animateEasing: "swing", // Эффект замедления
      helper: "cls1" // Стилевой класс для помощника
   });
   $("#resizable3").resizable({ alsoResize: "#resizable4" });
   $("#resizable4").resizable({
      handles: "all", // Изм. размера захватом за любую
границу
      // Захватом за нижнюю границу изменить размер нельзя
      cancel: ".ui-resizable-s"
   });
});
//-->
</script>
</head>
<body>
<div style="width:900px; height:500px; 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">
Изменить размер можно захватом за любую границу, кроме
нижней</div><br><br>
</body>
</html>

==================================================================
Листинг 12.14. Компонент Аккордеон с параметрами по умолчанию
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Модуль jQuery UI Accordion</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/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() {
   $("#accordion").accordion({
      header: "h3"
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; 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.15.Панель навигации, созд.с помощью модуля UI Accordion
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Панель навигации с помощью модуля UI Accordion</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/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() {
   $("#accordion").accordion({
      event: "mouseover",
      header: "h3",
      icons: {
         header: "ui-icon-arrow-1-e",
         headerSelected: "ui-icon-arrow-1-s"
      },
      navigation: true,
      fillSpace: true
   });
   $("#btn1").click(function() {
      $("#div2").text($("#div1").html());
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<h2>Панель навигации</h2>
<table border="0"><tr><td valign="top">
<div style="width:150px; height:250px;" 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>
</ul>
</div>
</div>
</td><td valign="top">
Перейдите по этим ссылкам, чтобы увидеть эффект<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.16. Модуль UI Accordion, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cобытия в модуле UI Accordion</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/start/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() {
   $("#accordion").accordion({
      header: "h3",
      changestart: function() {
         $("#div1").append("Событие changestart<br>");
      },
      change: function(e, ui) {
         $("#div1").append("Событие change<br>");
         ui.newHeader.find("a").html("Открытая вкладка");
         ui.oldHeader.find("a").html("Закрытая вкладка");
      }
   });
   $("#accordion").bind("accordionchangestart", function() {
      $("#div1").append("Событие accordionchangestart<br>");
   }).bind("accordionchange", function() {
      $("#div1").append("Событие accordionchange<br>");
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; 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.17. Панель с вкладками, параметры по умолчанию
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Панель с вкладками</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/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() {
   $('#tabs').tabs();
});
//-->
</script>
</head>
<body style="font-size:10pt; 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="#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.18. Заполнение вкладок с помощью AJAX
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заполнение вкладок с помощью AJAX</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/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 src="development-
bundle/external/cookie/jquery.cookie.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#tabs").tabs({
      cookie: { expires: 7 }, // Запоминаем номер открытой
вкладки
      ajaxOptions: { cache: false }, // Получаем последние
данные
      cache: true, // Делаем только один запрос на сервер
      spinner: "Загрузка...",
      disabled: [2] // Делаем третью вкладку недоступной
   });
   $("#btn1").click(function() {
      $("#tabs").tabs("disable", 1);
   });
   $("#btn2").click(function() {
      $("#tabs").data("disabled.tabs", []);
   });
   $("#btn3").click(function() {
      $("#tabs").tabs("add", "ajax3.php", "Новая вкладка");
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; font-family:Verdana">
<div id="tabs">
<ul>
<li><a href="#tabs1"><span>Вкладка 1</span></a></li>
<li><a href="ajax1.php"><span>Вкладка 2</span></a></li>
<li><a href="ajax2.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.19. Модуль UI Tabs, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>События в модуле UI Tabs</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/redmond/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() {
   $("#tabs").tabs({
      event: "mouseover", // Выбор вкладки при наведении
курсора
      selected: 1, // Делаем вторую вкладку активной
      cache: true, // Делаем только один запрос на сервер
      spinner: "Загрузка...",
      select: function(e, ui) {
         // Делаем недоступной первую вкладку
         if (ui.index == 0) return false;
      },
      load: function() { // Событие после загрузки данных
         $("#div1").append("Событие load<br>");
      },
      show: function(e, ui) { // Событие при отображении
вкладки
         var msg = "Событие show<br>";
         msg += "Индекс вкладки: " + ui.index + "<br>";
         msg += "Текст заголовка: " + ui.tab.innerHTML +
"<br>";
         msg += "Текст содержимого: " + ui.panel.innerHTML +
"<br>";
         $("#div1").append(msg);
      }
   });
});
//-->
</script>
</head>
<body style="font-size:10pt; 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.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.20. Диалоговое окно с параметрами по умолчанию
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Модуль jQuery UI Dialog. Окно по умолчанию</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/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"
   src="development-
bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#dialog").dialog();
});
//-->
</script>
<style>
.ui-dialog { font-size: 8pt; font-family: "Verdana", sans-
serif; }
.ui-dialog-title { font-size: 10pt; font-weight: bold;}
.ui-dialog-content { font-size: 10pt; }
</style>
</head>
<body>
<div id="dialog" title="Заголовок окна">
<p>Это текст внутри окна</p>
</div>
</body>
</html>

==================================================================
Листинг 12.21. Вывод диалогового окна после щелчка на кнопке
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Модуль jQuery UI Dialog</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/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"
   src="development-
bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#dialog").dialog({
      autoOpen: false, // Открывать ли окно сразу
      bgiframe: true, // Решение проблемы с IE6
      closeOnEscape: true, // Закрывать ли при нажатии Esc
      title: "Новый заголовок", // Заголовок
      position: ["center", 50], // Местоположение окна
      width: 500, // Ширина окна
      height: "auto", // Высота окна
      draggable: false, // Перемещение
      resizable: false, // Изменение размера
      modal: false, // Модальное окно или нет
      show: null, // Эффект при открытии окна
      hide: null, // Эффект при закрытии окна
      buttons: { // Описание кнопок
         "Закрыть": function() {
            $(this).dialog("close"); // Закрыть окно
         },
         "Изменить заголовок": function() {
            $(this).dialog("option", "title",
$("#txt1").val());
            $("#txt1").val("");
         }
      }
   });
//   $(".ui-dialog-titlebar").hide(); // Спрятать заголовок
//   $(".ui-dialog-titlebar-close").hide(); // Спрятать
крестик
   $("#btn1").click(function() {
      $("#dialog").dialog("open"); // Открыть окно
   });
   $("#btn2").click(function() {
      $("#div1").text($(".ui-dialog").html());
   });
});
//-->
</script>
<style>
.ui-dialog { font-size: 8pt; font-family: "Verdana", sans-
serif; }
.ui-dialog-title { font-size: 10pt; font-weight: bold;}
.ui-dialog-content { font-size: 10pt; }
</style>
</head>
<body>
<div id="dialog" title="Заголовок окна">
<p><span class="ui-icon ui-icon-info"
         style="float:left; margin-right:.3em;"></span>
Это текст внутри окна.<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.22. Модуль UI Dialog, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cобытия в модуле UI Dialog</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/smoothness/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"
   src="development-
bundle1/external/bgiframe/jquery.bgiframe.min.js">
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#dialog").dialog({
      draggable: true,
      resizable: true,
      bgiframe: true,
      beforeclose: function() {
         if (!$("#ckb1").is(":checked")) {
            alert("Для закрытия необходимо установить
флажок...");
            return false;
         }
      },
      dragStop: function(e, ui) {
         var msg = "position.top = " + ui.position.top +
"<br>";
         msg += "position.left = " + ui.position.left +
"<br>";
         msg += "offset.top = " + ui.offset.top + "<br>";
         msg += "offset.left = " + ui.offset.left + "<br>";
         $("#div1").append(msg + "<br>");
      },
      resizeStop: function(e, ui) {
         var msg = "position.top = " + ui.position.top +
"<br>";
         msg += "position.left = " + ui.position.left +
"<br>";
         msg += "size.width = " + ui.size.width + "<br>";
         msg += "size.height = " + ui.size.height + "<br>";
         $("#div1").append(msg + "<br>");
      },
      buttons: {
         "Закрыть окно": function() {
            $(this).dialog("close");
         }
      }
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana;">
<div id="dialog" title="Заголовок окна">
<input type="checkbox" id="ckb1"> Я хочу закрыть окно
</div>
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 12.23. Календарь с параметрами по умолчанию
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker. Календарь по умолчанию</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/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"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#datepicker1").datepicker();
   $("#datepicker2").datepicker();
});
//-->
</script>
</head>
<body style="font-size:8pt; 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.24. Варианты календарей
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker. Варианты календарей</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/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"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $.datepicker.setDefaults( // Настройки для всех календарей
      $.extend($.datepicker.regional["ru"], {
         prevText: "MM",
         nextText: "MM",
         currentText: "dd.mm.yy",
         dateFormat: "dd.mm.y"
      })
   );
   $("#datepicker1").datepicker(); // Статичный календарь
   // Календарь, показывающий сразу три месяца и имеющий
ограничения
   $("#datepicker2").datepicker({
      maxDate: "+1y", // Максимальная дата
      minDate: "-12w", // Минимальная дата
      showButtonPanel: true, // Показать панель с кнопками
      numberOfMonths: 3, // Показывать сразу 3 месяца
      stepMonths: 3, // Сдвигать календарь на 3 месяца
      hideIfNoPrevNext: true,
      navigationAsDateFormat: true
   });
   // Календарь, открывающийся с помощью щелчка на изображении
и
   // заполняющий дополнительное текстовое поле
   $("#datepicker3").datepicker({
      changeMonth: true, // Выпадающий список с месяцами
      changeYear: true, // Выпадающий список с годами
      yearRange: "1970:2009", // Диапазон в списке с годами
      showOn: "button", // Открывать при щелчке на кнопке
      buttonImage: "calendar.gif", // Адрес изображения
      buttonImageOnly: true, // Использовать изображение
вместо кнопки
      appendText: " Обязательное поле",
      altField: "#txt1", // Ссылка на дополнительное поле
      altFormat: "dd M yy" // Формат даты в дополнительном
поле
   });
   $("#btn1").click(function() { // Изменение формата даты
      $("#datepicker2").datepicker("option", "dateFormat", "dd
M yy");
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; 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.25. Пример использования различных методов календаря
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker. Методы</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/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"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#datepicker").datepicker();
   $("#btn1").click(function() {
      $("#datepicker").datepicker("disable");
   });
   $("#btn2").click(function() {
      $("#datepicker").datepicker("enable");
   });
   $("#btn3").click(function() {
      if ($("#datepicker").datepicker("isDisabled")) {
         alert("Запрещено");
      }
      else {
         alert("Разрешено");
      }
   });
   $("#btn4").click(function() {
      $("#datepicker").datepicker("show");
   });
   $("#btn5").click(function() {
      $("#datepicker").datepicker("hide");
   });
   $("#btn6").click(function() {
      $("#datepicker").datepicker("setDate", "+1y");
   });
   $("#btn7").click(function() {
      alert($("#datepicker").datepicker("getDate"));
   });
   $("#btn8").click(function() {
      $("#datepicker").datepicker("dialog", "27.06.2009",
      function(dateText) {
         alert("Выбрана дата: " + dateText);
      }, { changeMonth: true, changeYear: true }, [200, 200]);
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; 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.26. UI Datepicker, обработка событий
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Datepicker. Обработка событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link type="text/css" rel="stylesheet"
      href="css/humanity/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"
      src="development-bundle/ui/i18n/ui.datepicker-
ru.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#datepicker").datepicker({
      changeMonth: true, // Выпадающий список с месяцами
      changeYear: true, // Выпадающий список с годами
      yearRange: "1970:2009", // Диапазон в списке с годами
      maxDate: "+1y", // Максимальная дата
      minDate: "-12w", // Минимальная дата
      beforeShow: function(elem) {
         $("#div1").html("Событие beforeShow<br>");
         $(elem).css("background-color", "#fff4dd");
      },
      beforeShowDay: function(d) {
         var curd = $.datepicker.formatDate("dd.mm.yy", new
Date());
         var dat = $.datepicker.formatDate("dd.mm.yy", d);
         // Если дата является текущей, то указываем для
ячейки с датой
         // класс cls1, а также задаем текст подсказки
         if (dat == curd) return [true, "cls1", "Это
сегодня"];
         // Если число месяца равно 10, то делаем дату
неактивной
         else if (d.getDate() == 10) return [false, "cls2"];
         else return [true, "cls2"];
      },
      onChangeMonthYear: function(y, m, obj) {
         var msg = "Событие onChangeMonthYear<br>";
         msg += "Год: " + y + "<br>Месяц: " + m + "<br>"
         $("#div1").append(msg);
      },
      onSelect: function(d, obj) {
         var msg = "Событие onSelect<br>Выбранная дата: " + d;
         $("#div1").append(msg + "<br>");
      },
      onClose: function(d, obj) {
         var msg = "Событие onClose<br>";
         if (obj.currentDay == 0) msg += "Дата не
выбрана<br>";
         else {
            msg += "Выбранная дата: " + obj.currentDay + ".";
            msg += (obj.currentMonth + 1) + "." +
obj.currentYear;
            msg += "<br>";
         }
         $("#div1").append(msg);
         $(this).css("background-color", "#ffffff");
      }
   }).css("background-color", "#ffffff");
});
//-->
</script>
<style>
.cls1 { background-color: red; }
.cls2 { }
</style>
</head>
<body style="font-size:8pt; font-family:Verdana">
<input type="text" id="datepicker">
<div id="div1"></div>
</body>
</html>

==================================================================
Листинг 12.27. Модуль UI Progressbar, вывод индикат.хода процесса
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Progressbar. Индикатор процесса</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div style="width: 500px;"><div id="progressbar"></div></div>
</body>
</html>

==================================================================
Листинг 12.28. Модуль UI Progressbar, события и методы
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Progressbar. События и методы</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
   /* Выводим анимированную картинку вместо полосы */
   .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//EN"
        "http://www.w3.org/TR/html4/strict.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//EN"
        "http://www.w3.org/TR/html4/strict.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, // Начальное положение бегунка на шкале
      orientation: "vertical", // Вертикальное расположение
шкалы
      start: function() {
         $("#div1").append("Событие start<br>");
      },
      slide: function() {
         $("#div1").append("Событие slide<br>");
      },
      change: function() {
         $("#div1").append("Событие change<br>");
      },
      stop: function() {
         $("#div1").append("Событие stop<br>");
      }
   }).bind("slidestart", function() {
      $("#div1").html("Событие slidestart<br>");
   }).bind("slide", function() {
      $("#div1").append("Событие slide (bind)<br>");
   }).bind("slidechange", function() {
      $("#div1").append("Событие slidechange<br>");
   }).bind("slidestop", function() {
      $("#div1").append("Событие slidestop<br>");
   });
   $("#btn1").click(function() {
      var val = parseInt($("#txt1").val());
      if (!isNaN(val)) {
         // $("#slider2").slider("option", "value", val);
         $("#slider2").slider("value", val);
      }
      else alert("Необходимо ввести число");
   });
   $("#btn2").click(function() {
      alert($("#slider2").slider("option", "value"));
      // alert($("#slider2").slider("value"));
   });
   $("#btn3").click(function() {
      var val = parseInt($("#txt2").val());
      if (!isNaN(val)) {
         $("#slider3").slider("values", 1, val);
      }
      else alert("Необходимо ввести число");
   });
   $("#btn4").click(function() {
      var arr = $("#slider3").slider("option", "values");
      alert(arr[1]);
      // alert($("#slider3").slider("values", 1));
   });
});
//-->
</script>
</head>
<body style="font-size:8pt; font-family:Verdana"><br><br>
<div style="width: 600px;">
<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.31. Модуль UI Effects, плавное изменение цвета
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects. Плавное изменение цвета</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   position:absolute; top:50px; left:50px; width:100px;
height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
   background-color:#000000; color:#e8e8e8;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() {
      var color = $("#txt1").val();
      if (color.length == 0) alert("Не заполнено поле");
      else $("#div1").animate({ backgroundColor: color },
2000);
   });
});
//-->
</script>
</head>
<body>
Цвет: <input type="text" id="txt1">
<input type="button" value="Задать значение цвета"
id="btn1"><br><br>
<div id="div1">Плавное изменение цвета</div>
</body>
</html>

==================================================================
Листинг 12.32. Модуль UI Effects, управление классами стилей
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects. Управление классами стилей</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   position:absolute; top:50px; left:50px; width:100px;
height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
}
.cls1 { background-color:#000000; color:#ffffff; }
.cls2 { background-color:#FF0000; color:#008800; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#btn1").click(function() { // Добавить класс
      var elem = $("#div1");
      if (!elem.is(".cls1") && !elem.is(".cls2"))
         elem.addClass("cls1", 1000);
   });
   $("#btn2").click(function() { // Удалить класс
      var elem = $("#div1");
      if (elem.is(".cls1")) elem.removeClass("cls1", 1000);
      else if (elem.is(".cls2")) elem.removeClass("cls2",
1000);
   });
   $("#btn3").click(function() { // Переключить
      var elem = $("#div1");
      if (elem.is(".cls2")) elem.removeClass("cls2", 1000);
      else elem.toggleClass("cls1", 1000);
   });
   $("#btn4").click(function() { // Заменить класс
      var elem = $("#div1");
      if (elem.is(".cls1")) elem.switchClass("cls1", "cls2",
1000);
      else if (elem.is(".cls2")) elem.switchClass("cls2",
"cls1", 1000);
      else elem.addClass("cls2", 1000);
   });
});
//-->
</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.33. Модуль UI Effects, методы show(), hide() и toggle()
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects. Методы show(), hide() и toggle()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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() {
   $("#btn1").click(function() {
      $("#img1").show($("#effect").val(), { }, 2000);
   });
   $("#btn2").click(function() {
      $("#img1").hide($("#effect").val(), { }, 2000);
   });
   $("#btn3").click(function() {
      $("#img1").toggle($("#effect").val(), { }, 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.gif" id="img1" style="width:300px;
height:225px;">
</body>
</html>

==================================================================
Листинг 12.34. Модуль UI Effects, эффект Transfer
==================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Effects. Эффект Transfer</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<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>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   width:100px; height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
   background-color:#000000; color:#ffffff;
}
#div2 {
   position:absolute; top:250px; left:450px; width:50px;
height:50px;
   border:1px solid #000000; background-color:#0000ff;
}
.cls1 { border:1px dotted #000000; background-color:#ff0000; }
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").click(function() {
      $(this).effect("transfer", {className: "cls1", to:
"#div2"}, 2000);
   });
});
//-->
</script>
</head>
<body>
<div id="div1">Щелкните мышью на этом блоке</div>
<div id="div2"></div>
</body>
</html>

