Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 136
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день.
В очередной раз пополнился раздел, где указаны теги HTML, и вскоре он будет полностью закончен, описание всех тегов собрано воедино. На сайте этот раздел находится по адресу www.htmlbook.ru/html
Сегодня продолжаем тему о JavaScript и формах. На этот раз под раздачу попали списки. Адрес статьи на сайте www.htmlbook.ru/content/226.html
Работа со списком
Список представляет собой элемент интерфейса, состоящий из набора текстовых строк, из которых, в зависимости от настроек, можно выбрать один или несколько пунктов. Каждая строка списка создается с помощью тега OPTION, который должен быть вложен в контейнер SELECT. Допустимо изменять отображаемую высоту списка, от минимального значения в одну строку. При этом список превращается в ниспадающее меню и для того, чтобы выбрать его элемент, необходимо список раскрыть.
Получение выбранных значений
Доступ к элементу списка через сприпты осуществляется в два приема. Вначале получаем номер пункта через метод selectedIndex. Полный синтаксис такой.
document.forms["имя формы"].имя списка.selectedIndex
Имя списка задается параметром name тега SELECT. Учтите, что нумерация списка ведется с нуля, поэтому первый элемент вернет значение 0, а не 1. В примере 1 показано, как можно получить номер выделенного пункта.
Пример 1. Определение номера выбранного пункта списка<head>
<script language="JavaScript">
function numSelected(f) {
alert("Номер выбранного пункта " + f.planets.selectedIndex)
}
</script>
</head>
<body>
<select name=planets>
<option>Меркурий</option>
<option>Марс</option>
<option>Земля</option>
<option>Венера</option>
</select>
<input type=button value="Проверить" onClick="numSelected(this.form)">
</form>
</body>
</html>
В примере используется сокращенная запись, при которой имя формы не пишется, поскольку оно используется в качестве аргумента this.form в вызываемой функции.
Чтобы получить текст, который указан в списке, требуется полученный с помощью
selectedIndex номер использовать в качестве аргумента
массива options. Полный синтаксис следующий.
document.forms["имя формы"].имя списка.options[номер пункта].text
Имя формы в данном случае указывается в теге FORM параметром name, этот же параметр задает имя списка, когда он добавляется к тегу SELECT, а номер пункта мы получаем благодаря свойству selectedIndex.
Для наглядности разберем тот же пример, добавив в него дополнительную строку кода (пример 2).
Пример 2. Получение текста выбранного пункта<head>
<script language="JavaScript">
function textSelected() {
selectNum = document.forms["galaxy"].planets.selectedIndex
selectText = document.forms["galaxy"].planets.options[selectNum].text
alert("Вы выбрали планету " + selectText)
}</script>
</head>
<body>
<form name=galaxy>
<select name=planets>
<option>Меркурий</option>
<option>Марс</option>
<option>Земля</option>
<option>Венера</option>
</select>
<input type=button value="Проверить" onClick="textSelected()">
</form>
</html>
Если воспользоваться методом this.form, то приведенный в примере 2 код можно
несколько сократить. Например, можно не добавлять имя формы и обойтись без промежуточных
переменных (пример 3).
<head>
<script language="JavaScript">
function textSelected(f) {
alert("Вы выбрали планету " + f.planets.options[f.planets.selectedIndex].text)
}</script>
</head>
<body>
<form>
<select name=planets>
<option>Меркурий</option>
<option>Марс</option>
<option>Земля</option>
<option>Венера</option>
</select>
<input type=button value="Проверить" onClick="textSelected(this.form)">
</form>
</html>
Выбор нескольких пунктов
Когда к тегу SELECT добавляется параметр multiple, его содержимое превращается в список множественного выбора. При этом, используя клавиши <Ctrl> и <Shift> совместно с курсором мыши, одновременно можно выделить более одного пункта. В этом случае, чтобы получить значения помеченных пунктов, придется просматривать все элементы списка и проверять истинно ли свойство selected, как показано ниже.
document.forms["имя формы"].имя списка[номер пункта].selected
Метод selected возвращает true или false в зависимости от того, выделен указанный пункт списка или нет. Напоминаем, что нумерация массива ведется с нуля, а не с единицы. Получить полное число всех элементов списка можно через метод length.
document.forms["имя формы"].имя списка.length
В итоге код для получения текста списка в случае множественного выбора приведен в примере 4.
Пример 4. Получение текста нескольких выделенных пунктов<head>
<script language="JavaScript">
function multipleSelected(f) {
// Вначале обнуляем переменную, где будут храниться названия пунктов
optionText = ""
// Пробегаемся по всем пунктам списка
for(i=0; i<f.planets.length; i++) {
// Если пункт выделен
if (f.planets[i].selected) {
// Добавляем текст выделенного пункта к переменной optionText
optionText += f.planets[i].text + " "
}
}
// Выводим результат
alert("Вы выбрали планеты " + optionText)
}
</script>
</head>
<body>
<form>
<select name=planets multiple size=6>
<option>Меркурий</option>
<option>Марс</option>
<option selected>Земля</option>
<option>Венера</option>
<option>Сатурн</option>
<option>Юпитер</option>
</select>
<input type=button value="Проверить" onClick="multipleSelected(this.form)">
</form>
</html>
Вопросы читателей
Как сделать галерею на сайте, чтобы на одной странице выводились маленькие фотографии, а пользователь мог щелчком мыши смотреть их увеличенный вариант?
Для создания галереи существует несколько способов: путем создания отдельных веб-страниц на HTML, через JavaScript и с помощью серверных программ вроде PHP. Последний способ позволяет сделать практически все, на что способна ваша фантазия. Однако такой подход не для всех доступен из-за того, что требуется знать основы программирования, а также иметь хостинг с возможностью запускать свои CGI-программы.
Более простой и доступный способ, который мне нравится, заключается в использовании Photoshop. Выберите пункт File | Automate | Web Photo Gallery... и выберите стиль представления галереи, укажите папку, где лежат исходные графические файлы, место для хранения конечного результата и другие параметры. Остается только нажать кнопку OK и вуаля, получай готовый сайт с набором фотографий. При желании результат можно доработать в подходящем HTML-редакторе.
Видимо ли для поисковых роботов меню на JavaScript? Индексируются ли ключевые слова при таком способе их представления? А в случае использования PHP-команды include("menu.php")?
Пока поисковые системы еще не научились понимать код JavaScript, поэтому если вы хотите, чтобы ключевые слова были обязательно проиндексированы, дублируйте их на веб-странице в виде простого текста. С PHP дело обстоит по-другому, браузер видит не код, а HTML-документ, который ему направляет сервер. А там нет уже никаких include и других команд PHP. Так что в этом случае поисковики будут нормально индексировать страницу.
Вставил изображение на страницу через DreamWeaver, рисунки видны, а когда смотришь в браузере, вместо них пустой прямоугольник. Почему?
Видимо на странице используется абсолютный путь к изображению, вида /images/map.gif. В этом случае изображение локально отображаться не будет, только под управлением веб-сервера. В Dreamweaver при создании ссылки есть возможность задать путь относительно корня сайта (Site Root) и относительно текущего документа (Document). Если планируется выкладывать сайт в Интернет, то особой разницы между указанными способами нет. Для просмотра сайта на локальном компьютере (без веб-сервера) следует задавать путь относительно документа.
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
