Май - Xakep Online

coding
Вот так будет выглядеть «чистильщик» кода Всплывающая подсказка
с классами. Для манипуляций с ними нам
доступно три основных функции:
• addClass – добавляет указанный класс данному
элементу;
• removeClass – удаляет указанный класс у
данного элемента;
• toggleClass – добавляет или удаляет класс в
зависимости от наличия его у элемента.
Давай сделаем более юзабельной кнопочку
типа submit, которая отправляет форму на
сервер. Очень бы хотелось сделать ее недоступной
после первичного обращения к ней,
чтобы пользователь не отправлял сообщение
несколько раз подряд, ведь бывают нервные
юзеры ;). Чтобы этого добиться, надо изменить
атрибут disabled.
Однако мои эстетические воззрения требуют
еще и поменять визуальное изображение нажатой
кнопки, например изменить фон, границу
или надпись. Нам необходимо определить в CSS
два класса — enabled и disabled. По умолчанию
у кнопки будет класс enabled, а после нажатия
— disabled:
Меняем класс у нажатой кнопки
JavaScript
$("#submit-button").click(
function() {
$(this).attr
({disabled : "true"});
$("#submit-button").
addClass("disabled");
});
Ролловер
Середина статьи уже далеко позади, поэтому
хотелось бы рассмотреть комплексный пример.
В качестве него мы сделаем полноценный ролловер.
Для самых маленьких читателей поясню,
что rollover — это такая красивая кнопочка, которую
можно нажать. Но не только: при наведении
на нее курсора мышки и нажатии, изображение
на кнопке меняется (смотри рисунок).
Договоримся о том, в каких файлах у нас будут
храниться эти изображения:
• .jpg – исходное изображение кнопки;
• _hover.jpg – кнопка при наведении мышки;
• _click.jpg – нажатая кнопка.
Чтобы внести ясность, приведу конкретный
пример. Если основной файл называется
button.jpg, то вспомогательные будут именоваться
button_hover.jpg и button_click.jpg.
Реализовывать ролловер на HTML будем с
помощью тэга ввода с типом «изображение»:
Теперь проясняется механизм работы самого
скрипта: нам надо найти все элементы input
с типом image и в зависимости от события
поменять атрибут src. Поскольку смена имени
файла будет происходить при трех событиях,
вынесем этот функционал в отдельную функцию
changeFilename:
Меняем имя файла
JavaScript
function changeFilename(input,
count, suffix)
{
var filename = $(input).
attr("src");
filename = filename.substr(0,
filename.length-count);
filename = filename + suffix +
".jpg";
$(input).attr( {src: filename});
}
Если присмотреться, то легко заметить, что
эта функция берет значение атрибута src из
элемента input, отрезает от имени файла count
символов и добавляет suffix плюс расширение
«.jpg». Фактически она меняет один суффикс
(конец имени) файла на другой. Теперь осталось
грамотно применить эту функцию.
Для выбора нужных элементов будем использовать
конструкцию $("input[@type=image]"),
которая найдет все инпуты с типом image. При
наведении курсора мышки на ролловер, нам
нужно отрезать «.jpg» (4 символа) от имени файла
и добавить «_hover.jpg». Вернуть все надо,
когда мышка над другим элементом.
Меняем изображение при наведении
мышки
JavaScript
$("input[@type=image]").hover(
function() { changeFilename(this,
4, "_hover"); }, function() {
changeFilename(this, 10, ""); });
Написать обработчик нажатия мышки тоже
труда не составит. В качестве события я выбрал
mousedown, вместо click. Честно говоря, хотел
показать, что не кликом единым живы ;). От имени
файла надо откромсать «_hover.jpg» (мышка
наведена), то есть 10 символов, и дописать
«_click.jpg»:
Меняем изображение
по клику мышкой
JavaScript
$("input[@type=image]").
mousedown( function() {
changeFilename(this, 10,
"_click");});
Отмечу, что ролловер у нас получился довольно
универсальный. Чтобы применить его, надо
создать три файла, которые соответствуют
состояниям кнопки, и использовать элемент
input с атрибутом image. Неплохо для десятка
строчек кода ;).
«Вордатор»
На десерт осталось уже настоящее веб-приложение
— «Вордатор». Оно будет очищать HTML
от лишнего кода, вставленного визуальными
редакторами, например Word’ом. Интерфейс у
нас будет несложным, поскольку нам требуется
всего лишь два поля ввода и переключатели
опций (смотри рисунок).
Чтобы создать такую форму, проще всего
воспользоваться таблицами. С этим, я думаю,
проблем не возникнет. Для описания отдельных
элементов надо использовать традиционные
тэги HTML: label, textarea, input,
button. Необходимо обязательно прописать
идентификаторы элементов, чтобы мы смогли
обрабатывать события и получать содержимое
/ 130
xàêåð 05 /101/ 07