Создание динамического меню на JavaScript с использованием библиотеки GD 2

Источник: http://e-code.tnt43.com/

Здравствуйте, уважаемые слушатели !

Сегодня мы рассмотрим такую тему, как создание динамически обновляющегося меню на PHP с использованием JS. Мы так же рассмотрим создание “разворачивающегося” меню всмысле появление под-элементов при наведении на основной элемент. Меню мы будем создавать с использованием библиотеки GD, так сказать “на лету”. То есть мы дадим возможность пользователю изменять внешний вид элемент как ему заблагорассудиться. Мы будем работать с TTF шрифтами, и подгружать их с помощью возможностей библиотеки GD. Все доступные в вашей системы шрифты (если вы работаете под Windows), вы можете отыскать в корневой директории WINDOWS (по-умолчанию C:\Windows), в папке fonts. Скопируйте понравившиеся вам в папку на вашем сервере, её мы назовём fonts.
 

Так же хотелось уточнить, что мы будем работать с изображениями размером 170*40. Под изображениями я подразумеваю шаблоны для элементов меню. Это может быть всё что угодно, от этого зависит лишь внешний вид вашего меню, а тут я вам не советчик. Всё. Так же если у вас(вашего хостера) не установлена библиотека GD, то вы можете скачать её с pecl4win.php.net, и подгружать функцией dl(имя_библиотеки), если вы работаете не своём сервера, а на сервере хостера и она у него не установлена, или же просто добавьте строку extension=php_gd.dll в ваш файл php.ini.
Всё, на это я заканчиваю этот небольшой introduce, и перехожу к практике.

Теория плавно переходящая в практику

Что ж, как вы уже наверное поняли, в этой статье объединиться довольно большой спектр информации по работе с динамическими меню. Но в первую очередь, что такое “динамическое меню” ?

Ну, я думаю этот вопрос не потребует большого количества вашей ментальной энергии. Вы наверное ни раз видели всякие навороченные меню, с под-элементами, красивыми эффектами и прочим. Сегодня мы не будем говорить о “красивых эффектах”, а поговорим про техническую сторону вопроса, как это всё работает, ведь красота сама по себе не стоит и гроша. Красоту я оставляю вам, а сам расскажу вам о программировании. Для воплощения классического “выпадающего” меню, нам потребуються всего-то лишь стили CSS, и ни много ни мало броузер с поддержкой JS (JavaScript). Наверное некоторые из вас знают, что в таблицах стилей CSS существует такое свойство как display. Так вот, это свойство и являеться главной основополагающей частью реализации технологии, которую сегодня мы попытаемся разобрать. Вся суть в том, что при наведении курсора мыши на тот или иной пункт меню, свойство display у определённого элемента переключаеться в значение inline, а когда курсор покидает границы элемента, то свойство переключаеться в значение none, тем самым скрывает элемент. На мой взгляд довольно просто, а на ваш ?

Что ж, давайте напишим скрипт, который будет производить эти действия:


function elementShow(id){
element=document.getElementById(id);
if(element==null){
alert(’Äàííûé ýëåìåíò ìåíþ íå ñóùåñòâóåò !’);
}else{
element.style.display=’inline’;
}
}
function elementHide(id){
element=document.getElementById(id);
if(element==null){
alert(’Äàííûé ýëåìåíò ìåíþ íå ñóùåñòâóåò !’);
}else{
element.style.display=’none’;
}
}

 

То есть, если данный элемент существует, или другими словами ссылка на него не равна NULL, то присваиваем свойству display параметра style значение `none` или `show` соответственно.

Но это только малая часть всего проекта. Теперь давайте создадим небольшое меню для демострации все вышенаписаного.

Вот что получилось у меня:

 

 

Что ж, давайте “разжовывать” всё что я только что написал. Ну, сначала скажу, что название раздела и все элементы мы будем помещать в один слой. Это делаеться с той лишь целью, чтобы при наведении на раздел, после отвода мыши с надписи не исчезал список элементов меню. Так как, если мы поместим текст с названием раздела меню в один слой, или вообще не будем его помещать никуда, то элементы которые принадлежат к данному разделу будут просто напросто скрыты. Что ж, а теперь давайте подробнее о слоях. В аттрибуте style, мы указали положение каждого слоя. Слои в нашем меню можно раделить на главные и подчинённые. То есть, к главному слою относиться название раздела и элементы, а к подчинённому относяться именно элементы данного раздела меню. Слой с подчинёнными элементами, как вы наверное заметили, имеет свойство z-index. Это свойство нужно для того, чтобы указать броузеру, что данный слой необходимо выводить поверх всех остальных, или другими словами, если под зоной на которую расспостраняеться зона слоя будет текст, то он будет скрыт областью слоя. Размещение их таково, что все элементы опущены от крайней точки по оси Y на 25 пикселей. Друг от друга они находяться в зависимости от количества символов строки и от размера шрифта, но об этом потом.

Что ж, как видите заработало, и не имеет значения что вы туда засуните. Но я пропустил одну маленькую но наверное важную для некоторых из вас деталь, ведь все элементы того или иного раздела выводяться сторого горизонтально, чтобы это изменить нужно разделять элементы не через пробелы ( ), а черезе слои

. Так у вас есть больше возможностей для декорации и вертикальное меню иногда смотриться лучше чем горизонтальное. Ну, а если вы хотите изменить стиль вывода в горизонтальном меню, то используйте элемент c параметром `style` или `class`.

 

Что ж, я надеюсь JS часть вам более ли менее понятна, теперь, на радость некоторых присутствующих в данной аудитории, мы переходим к интерактивной части, а именно к динамическому изменению данных меню, и создание меню изображений.

Создание графического элемента меню с помощью GD

Что ж, GD это действительно огромная мощь, которая доступна всем желающим. С помощью библиотеки GD вы можете составлять графики, диаграммы, обрабатывать фотографии в интерактивном режиме, ну и конечно создавать графические элементы на основе шаблонов, и писать туда разную лабуду. Однако предметом данной лекции не являеться изучении всех возможностей этой прекрасной библиотекой функций, а только работа с ней, в соответствии с контекстом данной статьи. Вот и перейдём к этом контексту.
Что ж, как вы уже поняли мы будем создавать меню, все визуальные свойства которого можно редактировать и изменять на свой манер. Для записи строки на шаблон мы будем использовать функцию imagettftext(), поскольку только с помощью загружаемых извне TTF шрифтов можно отображать кириллический текст, поскольку фукнкция imagestring() для отображения информации использует встроенные в GD шрифты по-умолчанию, а они, понимаете ли, сделаны не нами, а американскими “буржуинами”, посему поддержка русского не предвидиться. Как я уже говорил, вам нужно скопировать понравившиеся вам шрифты (поддерживающие кириллицу) в папку fonts, и шаблоны кнопок меню для записи на них некоторых строк. Шаблоны должны быть формата PNG, поскольку я принципиально отказываюсь использовать GIF, из-за жадности компании Unisystems и IBM соответственно, которые запатентовали LWZ алгоритм, который и служит сердцем GIF, по сему в бесплатном программном обеспечении его использовать запрещенно, если вы конечно не хотите забашлять Unisystems за использование ихнего алгоритма. Да и кроме личной неприязни можно просто констатировать, что в версиях позже 2.0, библиотека GD не использует алгоритм LWZ, по вышеуказаным причинам. Поэтому с помощью подручных программ перекодируйте GIF в PNG (PhotoShop к примеру), и продолжаем дальше.

Что ж, давайте посмотрим на следующий текст PHP:

<?
$text=isset($_GET['text'])? $_GET['text']:exit();
$font_size=isset($_GET['font_size'])? $_GET['font_size']:11;
$button=isset($_GET['button'])? $_GET['button']:'button.png';
$font_color=isset($_GET['font_color'])? $_GET['font_color']:"255;255;255;";
$font=isset($_GET['font'])? $_GET['font']:'arial.ttf';
if(!file_exists('buttons/'.$button)){
   exit();
}
if(strlen($text)==0){
   exit();
}
$image=imagecreatefrompng('buttons/'.$button);
$data=explode(";",$font_color);
if(count($data)<3){
   exit();
}
$image_x=imageSX($image);
$image_y=imageSY($image);
$text_color=imagecolorallocate($image,$data[0],$data[1],$data[2]);
imagettftext($image,$font_size,0,0,$image_y/2,$text_color,$font,$text);
header("Location: image/png;");
imagepng($image);
?>

Продолжение следует !



Опубликовал admin
24 Июл, Вторник 2007г.



Программирование для чайников.