Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2004   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 135


Информационный Канал Subscribe.Ru
htmlbook.ru Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день, уважаемые читатели.
Несколько разочарую тех людей, кто ждет новых рецептов HTML и CSS. Пока эту тему приостанавливаем из-за того, что пишется новая книга, куда все рецепты и войдут. Повторяться не хочется, да и просто нельзя. Однако у вас всегда есть возможность задать интересующий вопрос, сегодня в выпуске рассылке публикуются первые вопросы читателей. Присылайте свои и самые интересные из них выйдут в следующем выпуске.

Сегодня продолжаем когда-то начатую тему про JavaScript и формы — Работа с кнопками. Адрес статьи на сайте — www.htmlbook.ru/content/225.html


Работа с кнопками

Кнопка является одним из самых понятных и привычных элементов интерфейса. Эффект приподнятости кнопки по сравнению с другими объектами формы дает пользователю понять, что же с кнопкой делать. А делать с ней можно только одно — нажимать на кнопку, после чего запускается обработчик события. Что после этого произойдет, зависит уже от желания и целей разработчика.

Различают три типа кнопки, различающихся по своим функциям — submit (отправка формы), reset (очистка формы) и button (обычная кнопка). Первые два типа рассмотрены в предыдущих статьях и здесь мы рассмотрим работу только с обычными кнопками.

Общий синтаксис добавления кнопки в форму выглядит следующим образом.

<form>
<input type=button name="Имя кнопки" value="Надпись на кнопке" onClick="Обработчик нажатия на кнопку">
</form>

Поскольку основное предназначение кнопки быть когда-нибудь нажатой, то основным событием выступает onClick, оно отслеживает нажатие на кнопку и выполняет указанную функцию. В примере 1 показано, как связывать функцию и кнопку через событие.

Пример 1. Вызов функции при нажатии на кнопку
<html>
<head>
<script language="JavaScript">

function pressAnyKey() {
alert("Нажата Any Key")
}
</script>
</head>

<body>

<form>
<input type=button name=anykey value="Нажми Any Key" onClick="pressAnyKey()">
</form>
</body>
</html>

Обработчик кнопки можно менять по ситуации. В итоге это позволяет, используя одну кнопку, вызывать разные функции в зависимости от некоторых выполненных условий. В общем случае синтаксис будет следующим.

onClick="document.form.имя_формы.имя_кнопки.onclick=обработчик"

Событие onClick можно назначать ссылкам и другим элементам формы. Имя кнопки задается через параметр name тега INPUT, а обработчик — это имя функции. Обратите внимание, что здесь скобки, как при вызове функции, указывать не надо.

В примере 2 приведена форма с переключателями (радиобатонами), которые при выборе пункта изменяют обработчик кнопки. Стоит после этого нажать на кнопку и нужная функция будет запущена. Для сокращения кода и удобства вместо указания имени формы используется конструкция this.form.

Пример 2. Вызов разных функций одной кнопкой
<html>
<head>
<script language="JavaScript">

function action1() {
alert("Выбран Чебурашка. Его и будем.")
}

function action2() {
alert("Выбран Крокодил Гена. Его и будем.")
}

function action3() {
alert("Выбрана Шапокляк. Точно ее будем?")
}
</script>
</head>
<body>

<form>
<p><b>Кого будем?</b></p>
<input type=radio name=hero onClick="this.form.action.onclick=action1"> Чебурашка<br>
<input type=radio name=hero onClick="this.form.action.onclick=action2"> Крокодил Гена<br>
<input type=radio name=hero onClick="this.form.action.onclick=action3"> Шапокляк

<p><input type=button name=action value="Поехали"></p>
</form>

</body>
</html>

Кроме вызова функций, JavaScript позволяет динамически менять текст на кнопке, который задается параметром value тега INPUT. Значение в данном случае модифицируется аналогично другим элементам формы.

document.form.имя_формы.имя_кнопки.value="Текст на кнопке"

В примере 3 показано, как можно изменять надпись на кнопке в зависимости от числа нажатий на нее.

Пример 3. Изменение текста на кнопке
<html>
<head>
<script language="JavaScript">

i = 0;

function press(f) {
if(i == 0) f.but.value = "Сильнее нажимай"
if(i == 1) f.but.value = "Можно еще сильнее"
if(i == 2) f.but.value = "Давай еще!"
i++

}
</script>
</head>

<body>

<form>
<input type=button name=but value="Нажми меня нежно" onClick="press(this.form)">
</form>
</body>
</html>

Резюме

Кнопка — один из простых элементов формы по части возможностей, которые они предоставляют для динамического управления через JavaScript. В частности, с кнопками допустимо выполнять следующие действия:

  • изменять надпись на кнопке;
  • указывать обработчик события, который будет выполняться при нажатии на кнопку;
  • выдавать кнопке определенный обработчик в зависимости от внешних условий.

Большинство действий осуществляется с помощью события onClick, в задачу которого входит отслеживание нажатия на кнопку и запуск требуемой функции.


Ответы на вопросы читателей

Как сделать волнистое подчеркивание под текстом?

Вначале требуется подготовить графический файл, который представляет собой нужный вам рисунок. Он обязательно должен состыковываться по горизонтали. Высота линии не должна превышать 3 пиксела, иначе линия может оказаться обрезанной. После создания нужного изображения пишем следующий код.

<html>
<head>
<style type="text/css">
.wave { background: URL(/images/line.gif) 0 1.1em }
</style>
</head>
<body>
 <span class=wave>Lorem ipsum</span> dolor sit amet...
</body>
</html>

Рисунок подключается атрибутом background, который смещается от своего вертикального положения на 1.1 em. Em — это относительная единица измерения, равная высоте текущего текста. После такой манипуляции фоновый рисунок окажется ниже текста, что и требовалось получить.

Как работает относительная единица em?

Em, как уже было сказано выше, является единицей, применяемой в CSS и равной высоте шрифта. В зависимости от текущего шрифта меняется и величина em. Например, у заголовка H1 и текста под ним будет разный размер шрифта, соответственно, будет различаться и высота строк, а вместе с ними и значение em.

Эту единицу измерения удобно применять, когда мы имеем дело с текстом. Так, если перед параграфом требуется установить отступ равный одной строке, то код будет следующий.

<p style=""margin-top:" 1em; margin-bottom: 0em">Lorem ipsum...

Как установить свой собственный курсор на странице?

Для изменения вида курсора используйте свойство cursor, в качестве аргумента устанавливается url и в скобках путь к файлу cur.

<html>
<head>
<style type="text/css">
BODY { cursor: url('pointer.cur')}
</style>
</head>
<body>
...
</body>
</html>

Прежде чем ставить новый курсор, подумайте, а оно вашим посетителям надо? Тем более, что работает это чудо только в браузере Internet Explorer 6.

В файле .htaccess стоит строка ErrorDocument 404/index.html и при вводе неправильного адреса мы попадаем на страницу с ошибкой 404, но без рисунка. Если посмотреть код этой страницы в браузере, то путь к рисунку правильный, а если посмотреть свойства рисунка, то в пути прописаны лишние ...homepage/images/. В чем дело?

Тут проблема возникла из-за неточного указания путей к изображению. Вначале разберем, какие есть способы задания пути к файлу

1. Абсолютный путь (http://www.htmlbook.ru/images/1.gif)
2. Относительный, от текущей папки (././1.gif)
3. Относительный, от корня сайта (/images/1.gif)

1. Абсолютный путь работает везде, за исключением локальной сети, поскольку требует обязательное подключение к Интернету, к тому же неудобно при смене адреса и занимает много места. Используется редко.

2. Относительный от текущей папки работает тоже везде, но имеет некоторые ограничения. В частности, обязательно надо знать где находится текущий файл. При переносе документа в другое место на сайте иногда перестают работать ссылки.

3. Относительный от корня сайта работает только под управлением сервера. Это самый удобный способ задания пути. Но для локальной версии не годится, браузер не поймет и соответственно, ничего не покажет.

Проблема с отображением страницы 404 получилась из-за того, что сервер пытается открыть файл 404/index.html из текущей папки, а она может меняться. Если применяется путь вроде ./images/404.gif, то для страницы /folder1/folder2/index.html рисунок пытается загрузиться из папки /folder1/images/404.gif. А этот путь неверен, в итоге рисунка мы не увидим. Так что для подобных случаев и требуется задавать путь относительно корня сайта. Он гарантирует, что рисунок будет отображаться корректно независимо от того, где файл был открыт.


Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.

http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.htmlbook		 Отписаться
В избранное