http://sulfurzona.com/
News
Service
Magazine
Software (Battle City Game, Wallpaper manager, Superpad, VG-NOW, Puzzle Game, Netler Internet Browser, ..)
Dune Game (Dune III, Dune IV, Cheats, Forum, ..)
Games free
Turbo Pascal (Assembler, Docs, Sources, Debbugers, ..)
Books (Docs for developers)
Forum
Guest book
Компьютерная диагностика двигателя автомобиля (адаптер К-линии)Компьютерная диагностика двигателя автомобиля (адаптер К-линии)
 
 
Купить биткоин через яндекс
купить биткоин через яндекс
kassa.cc
Сайты букмекерских контор
САЙТ КОНТОРЫ, по вашему эскизу. Подробнее
baltbet.ru
 
 

PHP и WEB для новичков: живые таблицы

 
PHP и WEB для новичков
Таблицы для сайта – обычное дело. В таблицах отображаются какие-то данные, характеристики, списки. Но те таблицы, которые получаются обычным способом, выглядят безжизненными, безучастными к действиям посетителя сайта. Как их оживить?
 
Для этого воспользуемся библиотекой hltable.js (www.tigir.com/js/hltable.js или select_table_javascript_lib.rar размер 4 Кб), написанной на JavaScript. Она превосходно работает в таких распространенных браузерах, как Mozilla FireFox, Google Chrome, Opera, Internet Explorer, Safari.
 
Для начала рассмотрим обычную таблицу. Для примера я взял турнирную таблицу этапа гонки Формула 1 гран-при Китая, состоявшегося 15 апреля 2012 года. Напишем HTML-код типичной таблицы:
 
<html>
<head>
<style>
table { border: 1px solid black; border-collapse: collapse; }
td { border: 1px solid black; border-collapse: collapse; padding-left: 5px; }
thead td { background-color: #E8E8E8; }
</style>
</head>
 
<body>
<table border="0" cellSpacing="0" cellPadding="0">
<thead>
 <tr>
  <td width="75">Место</td>
  <td width="100">Гонщик</td>
  <td width="75">Очки</td>
 </tr>
</thead>
 <tr>
  <td>1</td>
  <td>Nico Rosberg</td>
  <td>25</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Jenson Button</td>
  <td>18</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Lewis Hamilton</td>
  <td>15</td>
 </tr>
</table>
</body>
</html>
 
В нашей таблице есть заголовок с названиями колонок, расположенный в первой строке (постоянно выделен серым фоном). Ниже идут три строки с гонщиками, занявшими в гонке первые три места (вошедшие на подиум). Таблица как таблица – ничего особенного (рис. 1).
 
Советы по WEB-разработке: живые таблицы
Рис. 1
 
Сейчас мы ее оживим, и наша таблица при наведении курсора мыши будет выделять строку под ним салатовым цветом. Для этого нам понадобится сделать буквально 4 шага, но очень маленьких.
 
Шаг 1. В заголовок HEAD веб-страницы добавляем подключение библиотеки:
 
<script type="text/javascript" src="hltable.js"></script>
 
Шаг 2. Чтобы строка при наведении курсора выделялась, в списке стилей следует описать класс, например, с именем hoverRow:
 
.hoverRow { background-color: #CCFFCC; }
 
Шаг 3. Для таблицы указать идентификатор (например, id=”mytab”), чтобы библиотека могла к ней обратиться как к конкретному объекту:
 
<table id="mytab" border="0"…
 
Шаг 4. После таблицы в код веб-страницы следует поместить команду инициализации подсветки highlightTableRows. При этом, если данную команду поместить выше таблицы, то это ни к чему не приведет, поскольку к моменту вызова этой функции таблица в веб-странице уже должна существовать.
 
<script type="text/javascript">
highlightTableRows("mytab","hoverRow","",false);
</script>
 
Функция принимает четыре аргумента, первым из которых следует идентификатор таблицы, затем класс стиля выделения при наведении курсора мыши на строку, далее класс стиля выделения выбранной строки по клику левой кнопкой мыши, и последний аргумент включает множественный выбор строк (так называемый multiselection). Но о последних двух аргументах поговорим позже. Теперь наша таблица будет как бы следить за курсором пользователя (рис. 2), выделяя под ним строку таблицы салатовым цветом.
 
Советы по WEB-разработке: живые таблицы
Рис. 2
 

Выбор строк

 
Ну вот, как я и обещал, наша таблица ожила, а интерактивность веб-страницы повысилась. Но зачем останавливаться на достигнутом? Давайте создадим для пользователя возможность выделять нужные ему строки в нашей турнирной таблице. Для этого нужно сделать всего лишь два простых шага.
 
Шаг 1. В список стилей добавляем описание класса, например, clickedRow, для выделения выбранной строки таблицы красным цветом, и чтобы на этом темном фоне текст в ячейках отображался белым цветом для повышения контрастности:
 
.clickedRow { background-color: #F00; color: #FFF;; }
 
Шаг 2. В вызове уже знакомой нам функции highlightTableRows в качестве третьего аргумента указываем класс clickedRow стиля выделения выбранной строки:
 
highlightTableRows("mytab","hoverRow","clickedRow",false);
 
При этом получим вот такую таблицу, где одновременно может быть выбрана одна строка, и выделена другая (рис. 3).
 
Советы по WEB-разработке: живые таблицы
Рис. 3
 

Мультивыбор

 
Модуль hltable.js настолько хорош, что позволяет осуществлять множественный выбор строк, т.е. одновременный выбор нескольких строк в таблице.
Для этого все, что нужно сделать – это в вызове функции highlightTableRows указать для последнего аргумента значение true, тем самым включим мультивыбор (рис. 4).
 
 
 
 
 
Советы по WEB-разработке: живые таблицы
Рис. 4
 
Тогда выбор строк таблицы будет осуществляться, как это происходит обычно в любом диалоговом окне выбора файлов, когда пользователь удерживает нажатой клавишу Ctrl и кликает на желаемый объект.
 
Подробно о библиотеке можно почитать на странице www.tigir.com/highlight_table_rows.htm. Рекомендую этот сайт, поскольку для себя вы там найдете еще много полезный вещей, которые реализованы на языке JavaScript.
 

Сортировка таблицы

 
Наша турнирная таблица получилась весьма приветливой. Но предположим, что она содержит гораздо больше, чем три строки. Тогда найти в ней нужную информацию будет уже не так просто.
 
Чтобы пользователь сам мог выбрать наиболее удобный для себя режим отображения информации в таблице, например, сортировка строк, достаточно выполнить несколько манипуляций, о которых пойдет речь далее.
 
Шаг 1. Скачиваем библиотеку (select_table_javascript_lib.rar, размер 33 Кб) и подключаем ее внутри тега BODY, предварительно объявив важные переменные:
 
<script type="text/javascript">
initial_sort_id = 0;
initial_sort_up = 1;
</script>
<script type="text/javascript" src="sort_table.js"></script>
 
где параметр initial_sort_id указывает порядковый номер столбца (0 – столбец “Место”, 1 – столбец “Гонщик”, 2 – “Очки”), который будет отсортирован при загрузке веб-страницы.
 
Параметр initial_sort_up указывает направление сортировки (0 – сортировка вниз, т.е. по возрастанию или 1 – сортировка вверх, т.е. по убыванию).
 
Шаг 2. Указываем теги THEAD (шапка таблицы) и TBODY (основная часть таблицы). Обычно их мало кто использует, но здесь эти теги весьма кстати. В принципе, тег TBODY можно и не указывать, поскольку достаточно обозначить хотя бы заголовочную часть таблицы.
 
Шаг 3. Также нужно создать две картинки, которые бы указывали текущий вариант сортировки – sort_0.gif (картинка сортировки вниз) и sort_1.gif (картинка сортировки вверх). Поместите их, например, в папку “skin”.
 
Я обычно называю папки с картинками для сайта именно так, но ничто не мешает использовать для наших целей классическую папку “images”. Дело хозяйское, просто тогда вам нужно будет поменять в коде скрипта sort_table.js значение переменной img_dir.
 
При необходимости в скрипте библиотеки можно указать, должна ли быть сортировка регистрозависимой или нет (параметр sort_case_sensitive).
Третий шаг необязателен, но может добавить наглядности, отображая режим, в котором находится сортировка и для какого столбца она осуществляется в данный момент (рис. 5).
 
Советы по WEB-разработке: живые таблицы
Рис. 5
 

Укажите дату

 
В качестве дополнения, хочу предложить еще одну библиотеку, которая позволяет для форм создать очень удобный выскакивающий календарик, пользуясь которым пользователь без особого труда сможет выбрать необходимую дату при заполнении веб-формы.
 
Библиотека состоит из трех модулей: calendar-en.js, calendar.js, calendarm.js и списка стилей calendar-mos.css (calendar_javascript_lib.rar, размер 11 Кб). Подключить библиотеку очень легко. Достаточно объявить все модули и список стилей, как показано на примере:
 
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="calendar-mos.css">
<SCRIPT type="text/javascript" src="calendar.js"></SCRIPT>
<SCRIPT type="text/javascript" src="calendarm.js"></SCRIPT>
<SCRIPT type="text/javascript" src="calendar-en.js"></SCRIPT>
</head>
<body>
<form>
Укажите дату: <input name="date" id="date" type="text" value=""><img src="calendar-icon.png" onclick="return showCalendar('date', 'y-mm-dd');">
</form>
</body>
</html>
 
Далее в самой форме располагается текстовое поле обязательно с идентификатором, например, id=”date. Вслед за полем можно расположить либо кнопку, либо иконку с изображением календарика, что будет, несомненно, более интуитивно понятным, при клике на которую следует вызывать функцию return showCalendar.
Функция showCalendar принимает два параметра. Первый параметр – это идентификатор текстового поля формы, куда следует вписать дату, которую выберет пользователь.
 
Второй параметр – это формат, в котором следует выдавать в поле формы выбранные в календаре данные. Формат может иметь вид, например, 'y-mm-dd', где y – это год, mm – месяц и dd – день.
 
Советы по WEB-разработке: живые таблицы
Рис. 6
 
Таким образом, пользователь кликает на иконке, после этого появляется окно календаря, где он выбирает необходимую дату. При этом можно листать месяцы и годы (рис. 6).
 
После того, как пользователь двойным кликом выбрал дату, окно календаря исчезает, а выбранная дата в соответствующем формате вписывается в поле формы. Например, для выбранной даты 12 апреля 2012 года (День космонавтики) в поле будет записана строка “2012-04-12”.
 
Все JavaScript-библиотеки, о которых рассказывается в нашем журнале можно найти на странице Скачать полезные программы в секции “Программирование”.
 
© Владислав Демьянишин
 
Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.
 
Среди доступных программ есть мобильная читалка книг, менеджер переноса файлов с фото- и видеокамер на компьютер, текстовый редактор, WYSIWYG редактор, 3D аниматор, GIF аниматор, AVI аниматор, пакетный конвертор изображений, редактор электрических схем, программа для скриншотов, диспетчер тем рабочего стола и другие.
 
На нашем сайте можно не только бесплатно скачать игры, но и документацию и книги по программированию на MIDLetPascal, Turbo Pascal 6, Turbo Pascal 7, Borland Pascal, по программированию устройств Sound Blaster, Adlib, VESA BIOS, справочник Norton Guide и много другой полезной информации для программистов, включая примеры решения реальных задач по созданию резидентных программ. Предлагаю также посетить Марья искусница - сайт о рукоделии (http://mariya-iskusnica.ru).
 
 

Журнал > Программирование > PHP и WEB для новичков (HTML, JavaScript, PHP, MySQL) > PHP и WEB для новичков: живые таблицы
 
 
 
147
 
ВКонтакте
Facebook
 
 
 
На главную страницу На предыдущую страницу На начало страницы
 
 




Украина онлайн Рейтинг@Mail.ru Рейтинг Сайтов YandeG Rambler's Top100