\)
ключаем ее внутри тега BODY, предварительно
объявив важные переменные:
<script
л Место
Гонщик
{
Рис. 5
Lewis Hamilton
Jenson Button
Nico_Rosberg_
15
18
25
type=”text/javascript” >
initial_sort_id = 0;
initial_sort_up = 1;
</script>
<script
type=”text/javascript” src=”sort_table.js”x/script>
где параметр
initial_sort_id
указывает порядко-
вый номер столбца (0 - столбец “Место", 1 - стол-
бец “Гонщик”, 2 - “Очки”), который будет отсорти-
рован при загрузке веб-страницы.
Параметр
initial_sort_up
указывает направление
сортировки (0 - сортировка вниз, т.е. по возраста-
нию или 1 - сортировка вверх, т.е. по убыванию).
I | л | - Q
Указываем теги
THEAD
(шапка таб-
L U d l
С.ш
лицы) и
TBODY
(основная часть
таблицы). Обычно их мало кто использует, но здесь
эти теги весьма кстати. В принципе, тег
TBODY
можно и не указывать, поскольку достаточно обо-
значить хотя бы заголовочную часть таблицы.
I |л г - О Также нужно создать две картинки,
L U d l
О
которые бы указывали текущий ва-
риант сортировки - sort_0.gif (картинка сортировки
вниз) и sort_1.gif (картинка сортировки вверх). По-
местите их, например, в папку “skin”.
Я обычно называю папки с
картинками для сайта именно
так, но ничто не мешает исполь-
зовать для наших целей класси-
ческую папку “images”. Дело хо-
зяйское, просто тогда вам нуж-
но будет поменять в коде скрип-
та sort_table.js значение пере-
менной
imgdir.
При необходимости в скрипте
библиотеки можно указать, дол-
жна ли быть сортировка регист-
розависимой или нет (параметр
sort_case_sensifive).
Третий шаг необязателен, но может добавить на-
глядности, отображая режим, в котором находится
сортировка и для какого столбца она осуществля-
ется в данный момент (рис. 5).
Укажите дату
В
качестве дополнения, хочу предложить еще
одну библиотеку, которая позволяет для
форм создать очень удобный выскакивающий ка-
лендарик, пользуясь которым пользователь без
особого труда сможет выбрать необходимую дату
при заполнении веб-формы.
Библиотека состоит из трех модулей: calendar-
en.js, calendar.js, calendarm.js и списка стилей cal-
darjavascript Jib. гаг, размер 11 Кб). Подключить биб-
лиотеку очень легко. Достаточно объявить все мо-
дули и список стилей, как показано на примере:
Ьчки
<№т!>
<Ьеаб>
<иЬ1К ге1-^1езЬееГ 1уре=’ЧехУс88”
|1^=”са1епбаг-то8.с88”>
<8СЯ1РТ 1уре-Чех^ауа8СпрГ 8гс=”са1еп-
баг.]8” ></БСР1 РТ>
<8СВ1РТ 1уре=’ЧехЭДа7а8спрГ згс=”са1еп-
багт.1з”></8СР1РТ>
<8СЯ1РТ type=”text/javascript” згс=”са1епбаг-еп.
]8”></8СР1РТ>
В жизни, ка к в компьютер-
ной игре: чем лучше сохра-
нился
-
тем лучше живешь.
</head>
<body>
<form>
Укажите дату: <input name=”date” id=”date”
type-’text” value=””xim g src=”calendar-icon.png”
onclick-’return showCalendar (‘date’, ‘y-mm-dd’);”>
</form>
-
А главное, никакой офф-
лайн ж изни, - настойчиво
повторял Доктор.
Рис. 6
] ~
Укажите дату 2012-04-19
Апрель, 2012
<
Нед.
<
Пн
Вт
Сегодня
Ср
Чт
Пт
13
14
2
3
4
5
8
15
9
10
11
12
13
16
16
17
18 КЗ
20
17
23
24
25
26
27
18
30
Выбор даты
</body>
</html>
Далее в са-
мой форме располагается текстовое поле обяза-
тельно с идентификатором, например,
id=”date
” .
Вслед за полем можно расположить либо кнопку,
либо иконку с изображением календарика, что бу-
дет, несомненно, более интуитивно понятным, при
клике на которую следует вызывать функцию
return showCalendar.
Функция
showCalendar
принимает
два параметра. Первый параметр -
это идентификатор текстового поля
формы, куда следует вписать дату,
которую выберет пользователь.
Второй параметр - это формат, в
котором следует выдавать в поле
формы выбранные в календаре дан-
ные. Формат может иметь вид, на-
пример, ‘y-mm-dd’, где у - это год,
mm - месяц и dd - день.
Таким образом, пользователь кли-
кает на иконке, после этого появляется окно ка-
лендаря, где он выбирает необходимую дату. При
этом можно листать месяцы и годы (рис. 6).
После того, как пользователь двойным кликом
выбрал дату, окно календаря исчезает, а выбран-
ная дата в соответствующем формате вписывает-
ся в поле формы. Например, для выбранной даты
12 апреля 2012 года (День космонавтики) в поле
будет записана строка “2012-04-12”.
Все JavaScript-библиотеки, о которых расска-
зывается в нашем журнале, можно найти на стра-
нице http://comput.com.ua/index.php?art=22 в секции
‘Программирование”.
Владислав Демьянишин
Существует три супермонстра, пре-
пятствующие прохождению любой иг-
ры: ж ена, ребёнок и младший брат.
предыдущая страница 37 Компьютер 2012 11-12 читать онлайн следующая страница 39 Компьютер 2012 11-12 читать онлайн Домой Выключить/включить текст