15. Введение в jQuery
Примеры
Пример 01. Как устроена jQuery
praxis/15/examples/01/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Как устроена jQuery</TITLE>
</HEAD>
<BODY>
<H1>Как устроена jQuery</H1>
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>)
занимается дистанционным обучением
(<A href="http://www.botik.ru/~robot/ru/">ссылка</A>)
и созданием обучающих продуктов.
<P>
<BUTTON id="key">Сменить стиль ссылок</BUTTON>
</P>
<FORM>
<INPUT id="text" type=text value=" Дядя Вася ">
<INPUT id="delkey" type=button value="Убрать пробелы">
(начальные и конечные)
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
window.onload = function ()
{
// Ссылки на элементы
var key = document.getElementById("key"); // Кнопка "Сменить стиль"
var delkey = document.getElementById("delkey"); // Кнопка "Убрать пробелы"
var text = document.getElementById("text"); // Поле ввода текста
// Обработчики событий
key.onclick = swapClass;
delkey.onclick = delBlanks;
// Сброс формы в исходное состояние при загрузке (перезагрузке) страницы
document.forms[0].reset();
// Набор данных для работы скрипта
var classes = ["link1","link2"];
var backs = ["yellow","cyan"];
var flag = 0;
// Обработчик щелчка по кнопке "Сменить стиль"
function swapClass()
{
flag = 1-flag;
jQuery("a").setClass(classes[flag])[0].style.background = backs[flag];
}
// Обработчик щелчка по кнопке "Убрать пробелы"
function delBlanks()
{
text.value = jQuery.trim(text.value);
}
};
Содержимое файла main.css
.link1
{
color:black;
text-decoration:underline;
}
.link2
{
color:red;
text-decoration:none;
}
Пример 02. Как устроена jQuery (window.$ = jQuery)
praxis/15/examples/02/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Как устроена jQuery</TITLE>
</HEAD>
<BODY>
<H1>Как устроена jQuery</H1>
<P>
В этом приложении задействована инструкция <CODE>window.$ = jQuery</CODE>.
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>)
занимается дистанционным обучением
(<A href="http://www.botik.ru/~robot/ru/">ссылка</A>)
и созданием обучающих продуктов.
<P>
<BUTTON id="key">Сменить стиль ссылок</BUTTON>
<FORM>
<INPUT id="text" type=text value=" Дядя Вася ">
<INPUT id="delkey" type=button value="Убрать пробелы">
(начальные и конечные)
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
window.onload = function ()
{
// Ссылки на элементы
var key = document.getElementById("key"); // Кнопка "Сменить стиль"
var delkey = document.getElementById("delkey"); // Кнопка "Убрать пробелы"
var text = document.getElementById("text"); // Поле ввода текста
// Обработчики событий
key.onclick = swapClass;
delkey.onclick = delBlanks;
// Сброс формы в исходное состояние при загрузке (перезагрузке) страницы
document.forms[0].reset();
// Набор данных для работы скрипта
var classes = ["link1","link2"];
var backs = ["yellow","cyan"];
var flag = 0;
// Обработчик щелчка по кнопке "Сменить стиль"
function swapClass()
{
flag = 1-flag;
$("a").setClass(classes[flag])[0].style.background = backs[flag];
}
// Обработчик щелчка по кнопке "Убрать пробелы"
function delBlanks()
{
text.value = $.trim(text.value);
}
};
Содержимое файла jquery.js
// --- Начало "библиотеки" -------------------------------------------
window.$ = jQuery;
function jQuery(selector)
{
// Отбор элементов с заданным именем тега
var set = document.getElementsByTagName(selector);
// Создадим обертку -- добавим методы к объекту set
// Опишем метод setClass(name) -- установить класс c именем name
// для всех отобранных элементов
// --- начало описания метода
set.setClass = function (name)
{
for (var i=0; i<set.length; i++) set[i].className = name;
return this; // Вернем обёртку из метода setClass
}
// --- конец описания метода
return set; // Вернем обёртку из функции jQuery
}
// Вспомогательная функция -- усечение строки
// Эта функция определяется как метод объекта jQuery
jQuery.trim = function (str)
{
return str.replace(/^\s+|\s+$/g,'');
}
// --- Конец "библиотеки" --------------------------------------------
Содержимое файла main.css
.link1
{
color:black;
text-decoration:underline;
}
.link2
{
color:red;
text-decoration:none;
}
CODE
{
font-family: "Trebuchet MS", sans-serif;
font-size:102%;
}
Пример 03. Как устроена jQuery (не ожидаем построения DOM)
praxis/15/examples/03/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Как устроена jQuery</TITLE>
</HEAD>
<BODY>
<H1>Как устроена jQuery</H1>
<P>
Скрипты в этом приложении не ожидают построения DOM.
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>)
занимается дистанционным обучением
(<A href="http://www.botik.ru/~robot/ru/">ссылка</A>)
и созданием обучающих продуктов.
<P>
<BUTTON id="key">Сменить стиль ссылок</BUTTON>
<FORM>
<INPUT id="text" type=text value=" Дядя Вася ">
<INPUT id="delkey" type=button value="Убрать пробелы">
(начальные и конечные)
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Ссылки на элементы
var key = document.getElementById("key"); // Кнопка "Сменить стиль"
var delkey = document.getElementById("delkey"); // Кнопка "Убрать пробелы"
var text = document.getElementById("text"); // Поле ввода текста
// Обработчики событий
key.onclick = swapClass;
delkey.onclick = delBlanks;
// Сброс формы в исходное состояние при загрузке (перезагрузке) страницы
document.forms[0].reset();
// Набор данных для работы скрипта
var classes = ["link1","link2"];
var backs = ["yellow","cyan"];
var flag = 0;
// Обработчик щелчка по кнопке "Сменить стиль"
function swapClass()
{
flag = 1-flag;
$("a").setClass(classes[flag])[0].style.background = backs[flag];
}
// Обработчик щелчка по кнопке "Убрать пробелы"
function delBlanks()
{
text.value = $.trim(text.value);
}
Пример 04. Как устроена jQuery (проверка готовности DOM)
praxis/15/examples/04/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Как устроена jQuery</TITLE>
</HEAD>
<BODY>
<H1>Как устроена jQuery</H1>
<P>
Вариант с проверкой готовности DOM.
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>)
занимается дистанционным обучением
(<A href="http://www.botik.ru/~robot/ru/">ссылка</A>)
и созданием обучающих продуктов.
<P>
<BUTTON id="key">Сменить стиль ссылок</BUTTON>
<FORM>
<INPUT id="text" type=text value=" Дядя Вася ">
<INPUT id="delkey" type=button value="Убрать пробелы">
(начальные и конечные)
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// Ссылки на элементы
var key = document.getElementById("key"); // Кнопка "Сменить стиль"
var delkey = document.getElementById("delkey"); // Кнопка "Убрать пробелы"
var text = document.getElementById("text"); // Поле ввода текста
// Обработчики событий
key.onclick = swapClass;
delkey.onclick = delBlanks;
// Сброс формы в исходное состояние при загрузке (перезагрузке) страницы
document.forms[0].reset();
// Набор данных для работы скрипта
var classes = ["link1","link2"];
var backs = ["yellow","cyan"];
var flag = 0;
// Обработчик щелчка по кнопке "Сменить стиль"
function swapClass()
{
flag = 1-flag;
$("a").setClass(classes[flag])[0].style.background = backs[flag];
}
// Обработчик щелчка по кнопке "Убрать пробелы"
function delBlanks()
{
text.value = $.trim(text.value);
}
});
Пример 05. Как устроена jQuery (с настоящей библиотекой jQuery)
praxis/15/examples/05/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Как устроена jQuery</TITLE>
</HEAD>
<BODY>
<H1>Как устроена jQuery</H1>
<P>
Пример с настоящей библиотекой jQuery.
<UL>
<LI>
<A href="http://www.webmascon.com/">Webmascon</A>
<LI>
<A href="http://htmlbook.ru/css/">Онлайн справочник по CSS и статьи</A>
<LI>
<A href="http://css.find-info.ru/">Сайт, посвящённый CSS</A>
<LI>
<A href="http://css-info.narod.ru/index.html">Справочник и статьи по CSS</A>
<LI>
<A href="http://tigir.com/css.htm">CSS-примеры</A>
</UL>
<P>
Роботландия (<A href="http://www.botik.ru/~robot/">ссылка</A>)
занимается дистанционным обучением
(<A href="http://www.botik.ru/~robot/ru/">ссылка</A>)
и созданием обучающих продуктов.
<P>
<BUTTON id="key">Сменить стиль ссылок</BUTTON>
<FORM>
<INPUT id="text" type=text value=" Дядя Вася ">
<INPUT id="delkey" type=button value="Убрать пробелы">
(начальные и конечные)
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// Ссылки на элементы
var key = document.getElementById("key"); // Кнопка "Сменить стиль"
var delkey = document.getElementById("delkey"); // Кнопка "Убрать пробелы"
var text = document.getElementById("text"); // Поле ввода текста
// Обработчики событий
key.onclick = swapClass;
delkey.onclick = delBlanks;
// Сброс формы в исходное состояние при загрузке (перезагрузке) страницы
document.forms[0].reset();
// Набор данных для работы скрипта
var classes = ["link1","link2"];
var backs = ["yellow","cyan"];
var flag = 0;
// Обработчик щелчка по кнопке "Сменить стиль"
function swapClass()
{
flag = 1-flag;
// Команда attr(атрибут, значение) -- устанавливает значения атрибута
$("a").attr("class",classes[flag])[0].style.background = backs[flag];
}
// Обработчик щелчка по кнопке "Убрать пробелы"
function delBlanks()
{
text.value = $.trim(text.value);
}
});
Пример 06. Анимация jQuery (метод toggle)
praxis/15/examples/06/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Анимация jQuery</TITLE>
</HEAD>
<BODY>
<H1>Анимация jQuery</H1>
<FIELDSET>
<LEGEND>toggle("slow")</LEGEND>
<P><BUTTON>Выполнить</BUTTON></P>
<DIV id="block">
Сидят чудовища кругом:
Один в рогах с собачьей мордой,
Другой с петушьей головой,
Здесь ведьма с козьей бородой,
Тут остов чопорный и гордый,
Там карла с хвостиком, а вот
Полужуравль и полукот.
(<EM>A. C. Пушкин</EM>)
</DIV>
</FIELDSET>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// Обработчик щелчка на кнопке
$("button").click(function ()
{
$("#block").toggle("slow");
});
});
Пример 07. Раскрывающийся список
praxis/15/examples/07/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Раскрывающийся список</TITLE>
</HEAD>
<BODY>
<H1>Раскрывающийся список</H1>
<DIV class="tree">
<UL>
<LI><A href="#">Документы</A>
<UL>
<LI><A href="#">Тексты</A>
<UL>
<LI><A href="#">Загадка 1</A></LI>
<LI><A href="#">Загадка 2</A></LI>
<LI><A href="#">Загадка 3</A></LI>
</UL>
</LI>
<LI><A href="#">Фотографии</A>
<UL>
<LI><A href="#">Лакомка</A></LI>
<LI><A href="#">Привет</A></LI>
<LI><A href="#">Киска</A></LI>
</UL>
</LI>
<LI><A href="#">Мультфильмы</A>
<UL>
<LI><A href="#">Леопард</A></LI>
<LI><A href="#">Лошадки</A>
<UL>
<LI><A href="#">Гриша</A></LI>
<LI><A href="#">Миша</A></LI>
<LI><A href="#">Петя</A></LI>
</UL>
</LI>
</UL>
</LI>
<LI><A href="#">Музыка</A>
<UL>
<LI><A href="#">Улыбка</A></LI>
</UL>
</LI>
<LI><A href="#">Справка</A></LI>
<LI><A href="#">Об авторе</A></LI>
</UL>
</LI>
</UL>
</DIV>
<P>
Выше приводится пример системы ссылок, организованных в виде
раскрывающегося списка. А ниже еще один пример такого списка.
</P>
<DIV class="tree">
<UL>
<LI>Пункт 1
<UL>
<LI>Пункт 1.1
<LI>Пункт 1.2
<LI>Пункт 1.3
</UL>
<LI>Пункт 2
<UL>
<LI>Пункт 2.1
<LI>Пункт 2.2
<UL>
<LI>Пункт 2.2.1
<LI>Пункт 2.2.2
<LI>Пункт 2.2.3
</UL>
<LI>Пункт 2.3
</UL>
</UL>
</DIV>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// В начало содержимого каждого LI, который содержит UL (вложенный
// список) вставить символ раскрытия списка, снабдив его классом node.
// А сам элемент UL (начало вложенного списка) скрыть, снабдив его
// стилем "display:none".
$('.tree li:has(ul)').prepend('<SPAN class="node">►</SPAN>')
.children('ul').css('display','none');
// На все значки-символы раскрытия списка навесить обработчик щелчка
$('.tree .node').click(function ()
{
var x = $(this); // Обернем символ раскрытия списка методами jQuery
// Подготовим символ, противоположный текущему
var sym = (x.html().charCodeAt(0) == 9658) ? '▼' : '►'
// Сменим символ и скроем/покажем список с анимационным эффектом
x.html(sym).nextAll('ul').toggle('normal');
});
});
Пример 08. Гармошка
praxis/15/examples/08/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Гармошка</TITLE>
</HEAD>
<BODY>
<H1>Гармошка</H1>
<P>
Ниже приводится описание универсального анализатора.
</P>
<H2>Универсальный анализатор</H2>
<DIV class="accordion">
<H3>Общее описание</H3>
<DIV>
<P>
Универсальный анализатор предназначен для анализа любых ситуаций
и для определения качества продуктов питания.
</P>
</DIV>
<H3>Цена</H3>
<DIV>
<P>
Универсальный анализатор стоит не слишком дорого, но и не очень дешево.
Кроме того, стоимость анализатора зависит от покупательной способности
клиента.
</P>
</DIV>
<H3>Тип корпуса</H3>
<DIV>
<P>
Универсальный анализатор выпускается:
</P>
<UL>
<LI>в карманном варианте;
<LI>в чемоданном исполнении;
<LI>в виде машинки для стрижки овец.
</UL>
</DIV>
<H3>Поставка</H3>
<DIV>
<P>
Универсальный анализатор поставляется самовывозом —
он сам вывозит себя клиенту без дополнительной оплаты трафика.
</P>
</DIV>
</DIV>
<P>
Выше приводится пример списка, построенного по интерфейсу
«гармошка».
</P>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// Спрячем тела всех панелей (оставим на виду только заголовки)
$(".accordion > div").hide();
// Назначим смену фона при пересечении курсором заголовка панели
// (реагирование заголовка панели при попадании на нее указателя)
// и назначим обработчик щелчка на заголовке панели
$(".accordion > h3").hover(
function () {$(this).css("background-color", "#e3e2e2")},
function () {$(this).css("background-color", "#e9e7e7")})
.click(function()
{
// Покажем/спрячем текущую панель
// и спрячем ту из панелей-сестёр, которая видна в данный момент
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
// Поставим/удалим класс "active" на заголовке текущей панели
$(this).toggleClass("active");
// Удалим класс "active" на заголовках всех сестринских панелях
$(this).siblings("h3").removeClass("active");
});
});
Пример 09. Картинки, которые падают
praxis/15/examples/09/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Картинки, которые падают</TITLE>
</HEAD>
<BODY>
<H1>Картинки, которые падают</H1>
<P>
<IMG src="pic/06.png" width=119 height=91 alt="" title="">
На этой странице много картинок. Щелчок по каждой из них
приводит к падению картинки со страницы.
</P>
<P>
<IMG src="pic/00.png" width=364 height=55 alt="" title="">
</P>
<P>
<IMG src="pic/01.png" width=65 height=106 alt="" title="">
<IMG src="pic/02.png" width=56 height=96 alt="" title="">
<IMG src="pic/03.png" width=105 height=103 alt="" title="">
<IMG src="pic/04.png" width=98 height=74 alt="" title="">
<IMG src="pic/05.png" width=107 height=104 alt="" title="">
</P>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// Обработчик щелчка на картинке
$('img').click(function()
{
// Для каждой картинки величина перемещения вниз будет своя --
// зависит от ее текущего положения
$(this).each(function()
{
$(this)
.css('position','relative') // Назначим относительное позиционирование
.animate( // Запустим анимацию. Конечное значение top для каждой
{ // картинки такое, чтобы она остановилась у нижнего края окна
opacity:0,
top: $(window).height() - $(this).height() - $(this).position().top
},
'slow',
function(){$(this).css('visibility','hidden'); }
);
});
});
});
Пример 10. Ajax (метод getJSON)
praxis/15/examples/10/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Ajax</TITLE>
</HEAD>
<BODY>
<H1>Ajax</H1>
<P>
Информация по каждому товару подгружается из соответствующего
JSON-файла по щелчку на заголовке.
</P>
<H2>Список товаров</H2>
<DIV class="accordion">
<H3>Волшебные очки</H3>
<DIV> </DIV>
<H3>Секретный компас</H3>
<DIV> </DIV>
<H3>Летающий зонтик</H3>
<DIV> </DIV>
<H3>Автомобиль-трансформер</H3>
<DIV> </DIV>
</DIV>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
// Назначим стили и
// спрячем тела всех панелей (оставим на виду только заголовки)
$(".accordion > div").css(
{
"background":"#f7f7f7",
"margin":0,
"padding":"10px 15px 20px",
"border-left":"solid 1px #c4c4c4",
"border-right":"solid 1px #c4c4c4"
}).hide();
// Назначим смену фона при пересечении курсором заголовка панели
// (реагирование заголовка панели при попадании на нее указателя)
// и назначим обработчик щелчка на заголовке панели
$(".accordion > h3").hover(
function () {$(this).css("background-color", "#e3e2e2")},
function () {$(this).css("background-color", "#e9e7e7")})
.click(function()
{
var target = $(this).next("div");
// Загрузим информацию, если панель раскрывается
if (this.className != "active")
{
$.getJSON('item'+$(this).index('h3')+'.json',
function(data)
{
var block = '';
for (var i in data)
block += '<DIV><EM>'+i + '</EM> ' + data[i] + '</DIV>';
target.html(block);
}
);
}
// Покажем/спрячем текущую панель
// и спрячем ту из панелей-сестёр, которая видна в данный момент
target.slideToggle("slow").siblings("div:visible").slideUp("slow");
// Поставим/удалим класс "active" на заголовке текущей панели
$(this).toggleClass("active");
// Удалим класс "active" на всех заголовках сестринских панелей
$(this).siblings("h3").removeClass("active");
});
});
Пример 11. Картинки, которые уменьшаются
praxis/15/examples/11/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="imagetoolbar" content="no">
<LINK rel="stylesheet" type="text/css" href="main.css">
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="swimg.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Картинки, которые уменьшаются</TITLE>
</HEAD>
<BODY>
<H1>Картинки, которые уменьшаются</H1>
<P>
<IMG src="pic/06.png" alt="" title="">
На этой странице много картинок. Щелчок по кнопке уменьшает размеры
картинок или увеличивает их.
</P>
<P>
<BUTTON id="swIMG">Уменьшить</BUTTON>
</P>
<P>
<IMG src="pic/00.png" width=364 height=55 alt="" title="">
</P>
<P>
<IMG src="pic/01.png" width=65 height=106 alt="" title="">
<IMG src="pic/02.png" width=56 height=96 alt="" title="">
<IMG src="pic/03.png" width=105 height=103 alt="" title="">
<IMG src="pic/04.png" width=98 height=74 alt="" title="">
<IMG src="pic/05.png" width=107 height=104 alt="" title="">
</P>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик готовности DOM
$(function ()
{
var key = 0;
// Обработчик щелчка на кнопке
$('#swIMG').click(function()
{
$('img').swIMG().attr('border',key=1-key);
$(this).text(['Уменьшить','Увеличить'][key]);
});
});