Древовидного меню на JavaScript с помощью PHP - Форум

admin

Дата: 30.11.-0001, 00:00

Сообщение №:1

Группа: Администрация

Регистрация: 20.11.2008
Пользователь №: 1
Сообщений: 6
Пол: Мужчина
Спасибо сказали: 5 раз(а)

Предупреждений: 0
---------------------------

Древовидного меню на JavaScript с помощью PHP

В этой статье приведу пример реализации древовидного меню на JavaScript с помощью PHP.

В своей практике много раз сталкивался с тем, что такое меню нужно, но человек затрудняется соединить скрипт на PHP с меню скриптом на JavaScript.

Для примера возьмём бесплатный скрипт для отображения древовидного меню Tigra Tree Menu, который поддерживается: MS IE, Netscape на платформах Windows 95/98/ME/2000/XP и Mac OS 8/9/X по адресу http://www.softcomplex.com/products/tigra_tree_menu/

Скачав и распаковав архив, мы увидим 3 яваскриптовых файла:
tree.js (сам скрипт отображения и формирования меню), tree_tpl.js(настройки самого меню и картинок к нему), а также
tree_items.js (сама структура меню), который нам и нужно заменить на PHP скрипт, который возьмёт наши данные из базы.

Создайте таблицу в базе данных:

Код

CREATE TABLE `menu` (
`id` int(11) NOT NULL auto_increment,
`pid` int(11) NOT NULL default '0',
`name` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
);

id - идентификатор пункта меню;
pid - принадлежность к ветке меню (если, например, pid = 12, значит, этот пункт является подуровнем пункта, у которого id = 12);
name - название самого пункта меню.

Ну, и заполним немного данными для демонстрации:

Код

INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (1, 0, 'qwwwq');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (2, 0, 'qwwwq 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (11, 8, 'test');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (3, 0, 'qwwwq 3');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (12, 11, 'test 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (7, 1, 'eewew 1');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (8, 1, 'eewew 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (9, 1, 'eewew 3');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (13, 9, 'test3');

Далее соединимся с базой данных и напишем рекурсивную функцию для формирования такой структуры, как в файле tree_items.js.

Пишем саму функцию:

PHP - Код


function get_tree($parent_id = 0) { 

      global $out; 

      $query = "SELECT * FROM menu WHERE pid = '$parent_id'"; //начинаем с нулевого уровня

      $result = mysql_query($query); 

      while ($row = mysql_fetch_array($result)) { 

            $out .= "['{$row['name']}','data.php?id={$row['id']}&amp;pid={$row['pid']}',&#092;n";

            get_tree($row['id']);  //идём дальше "внутрь" если 

//есть у данного id подуровни

            $out .= "],";

      } 

      return $out;  //возвращаем сформированую структуру. 

//Не хватает только начальной строки и конечной

}



//Соединяемся с базой данных

$link = mysql_connect("hostname", "user", "password") or die(mysql_error());

mysql_select_db("dbname", $link) or die(mysql_error());



//Начинаем с начальной строки

$tree_items = "[ ['HOME', 'index.php',";

//Вызываем функцию для построения меню

$tree_items .= get_tree();

//Заканчиваем структуру конечной строкой

$tree_items .= "] ];"; //Всё, структура для меню получена

Теперь в нужном нам месте выводим сформированное меню:

PHP - Код


print '< script language="JavaScript"

   var TREE_ITEMS = '.$tree_items.'; //оздаём массив и 

//подставляем в него сформированные ранее данные

   new tree (TREE_ITEMS, tree_tpl); //вызываем функцию яваскрипт, 

//которая разберёт нашу структуру и отрисует наше меню

< /script >';

P.S. Для того, чтобы меню работало, не забудьте на странице, сразу после тега < body >, вставить нужные скрипты "Tigra Tree Menu":

Код

< script language="JavaScript" src="путь_к_каталогу_с_скриптами/tree.js" >< /script >
< script language="JavaScript" src="путь_к_каталогу_с_скриптами/tree_tpl.js" >< /script >

Ну вот и всё. Надеюсь, что кому-нибудь это пригодится.

Форум - Обсуждаем контент - Обсуждение статей - Древовидного меню на JavaScript с помощью PHP