Пользователь

Добро пожаловать,

Регистрация или входРегистрация или вход
Потеряли пароль?Потеряли пароль?

Ник:
Пароль:

Меню сайта




Ваше мнение
Как вы узнали о нашем сайте?

От друга, знакомого
Из печатных источников
Из поисковой машины
По ссылке с другого сайта
Случайно
Не знаю


Результаты
Другие опросы

Всего голосов: 1031
Комментарии: 4


Наши партнеры



Статистика




Programming books  Download software  Documentation  Scripts  Content Managment Systems(CMS)  Templates  Icon Sets  Articles  Contacts  Voting  Site Search




Статьи и обзоры



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

Речь пойдет о новой версии самого популярного в настоящее время языка написания сценариев для сервера - РНР 5. Этот язык позволяет разрабатывать высокопроизводительные Web-сайты любого масштаба и любой категории сложности. Рассматриваются такие вопросы, как синтаксические конструкции языка, объектно-ориентированное программирование на РНР, работа с базами данных и графическими изображениями, а также построение WAP-содержимого. Большое внимание уделяется эффективным решениям типовых практических задач на 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']}&pid={$row['pid']}',\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 >


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



admin
Пункты: 16700Дата: 29.03.2024 Комментарий: 4
adminНет уважаемая Моra, вы не правильно поняли. Вместо файла tree_items.js мы создаем не html файл, а php-файл, содержащий вышеприведенный код и строки подключающие скрипты tree.js и tree_tpl.js(например index.php). Механизм действия - при переходе по адресу http//..../index.php подключаюся файлы javascript, выполняется функция get_tree, которая берет информацию из базы и выводит ее функцией print.
3.25
Дата регистрации: 20.11.2008 1Мужчина Персональная информация
Mora
Пункты: 463Дата: 29.03.2024 Комментарий: 3
MoraЗдравствуйте Admin!
Большое спасибо за пример он как раз то что я искала
Я тоже новичек и мне немножко не понятны некоторые моменты- помогите пожалуйста
правильно ли я поняла вместо файла tree_items.js создаем html файл
потом тут же вставляем функцию?
в body подключаем 2 оставшихся скрипта и в табличке выводим результат закрывае body
все
я наверное что то не то сделала потому что у меня пустую страничку выводит
подключаемся к базе через (script language="php")
1
Дата регистрации: 18.12.2012 2Женщина Персональная информация
admin
Пункты: 16700Дата: 29.03.2024 Комментарий: 2
adminЯ думаю данный пример не подходит для решения конкретно вашей задачи. Подобные задачи нужно решать используя связку PHP и библиотеку jQuery или еще лучше использовать чистый Ajax не прибегая к использованию сторонних библиотек. Что такое Ajax и с чем его едят можно прочесть тут.
Рекомендовал бы начать свое знакомство с технологией Ajax с этой книги.
3.25
Дата регистрации: 20.11.2008 1Мужчина Персональная информация
Дата: 29.03.2024 Комментарий: 1
Уважаемый admin!

Я начинающий, ваш пост показался мне решением стоящей передо мной задачи, т.к. здесь речь идет о совмещении php и javascript, а я как раз реализую галерею по альбомам-категориям, и хотелось бы доставать эти альбомы с вложенными в них миниатюрами картинок из базы в цикле.
В связи с этим вопрос, скорее просьба - ПОЖАЛУЙСТА, выложите или отправьте мне на маил архив рабочего примера того, что вы здесь написали. Я не понял ключевых моментов. Создал в базе таблицу menu, занес в нее все, как написано, вставил php скрипт, но ничего не работает(((((((((((( Помогите, пожалуйста. Заранее СПАСИБО!!!
Дата регистрации: Нет информации


Вы не можете отправить комментарий анонимно, пожалуйста войдите или зарегистрируйтесь.
Внимание! Если у вас не получилось найти нужную информацию, используйте рубрикатор или воспользуйтесь поиском


.



Статьи и обзоры PHP Древовидное меню на JavaScript с помощью PHP этой статье приведу пример реализации древовидного меню на JavaScript помощью своей практике много раз сталкивался тем что такое нужно но человек затрудняется соединить скрипт скриптом Для примера возьмём бесплатный для отображения Tigra Tree Menu который поддерживается Netscape платформах Windows 95/98/ME/2000/XP 8/9/X по адресу http //www softcomplex com/products/tigra_tree_menu/ Скачав распаковав архив мы увидим яваскриптовых файла tree сам формирования