Просматривая последние посты, на своём форуме, наткнулся на один интереснейший вопрос. В оригинале звучал примерно так: Привет! Помоги пожалуйста доделать скрипт списка разделов с категориями. Немного предыстории: У меня есть каталог ссылок с большим количеством разделов и категорий. И я все думал, как решить проблему навигации по нему, чтобы человек попав в одну из категорий, мог перейти в другую категорию другого раздела. Подобное с кодом $CATEGORIES$ реализовать было невозможно. Увидев способы вывода категорий в модуле "интернет-магазин", захотел реализовать такое же в модуле "каталог сайтов". Но решил, что без вмешательства разработчиков uCoz тут не обойтись, поэтому дважды оставлял такое предложение в "Предложения по системе" на ФТП. Пока не обратил внимание на информер "Каталог сайтов" с выводом категорий в JavaScript формате. Он выводил примерно такой массив: ... Сделать так, чтобы изначально выводился список только разделов, а при наведение на один из разделов выпадали его категории, даже лучше было бы реализовать как в интернет-магазине, рядом со ссылкой на раздел иконка, и при клике по ней выпадали категории этого раздела, при повторном скрывались. Попытался добавить подобную функцию из других скриптов, нечего у меня конечно не получилось. Может ты сможешь помочь? Может как-то выдрать что-то из интернет-магазина? У меня три инвайта есть, могу отдать, безвозмездно конечно.
Далее, приводился фрагмент массива. И выглядит он так: Code JavaScript (Массив информера категорий - все категории/разделы) <script type="text/javascript">var uCatsOut=[ ['2','0','1','Моя музыка','Музыка - это процесс, объединяющий тоны нот в благозвучные группы звуков. Некоторые люди иногда называют музыку языком звуков. Иногда мелодия состоит из хаотичных звуков следующих один за другим. Иногда они звучат вместе, гармонично. Иногда музыка может приласкать, а иногда и ударить как кнутом. И мы сами создаем музыку. И музыка создает нас.... В данном разделе собраны композиции, интересные лично для меня...','/dir/music/2','2'], ['4','2','0','Солянка','Описание категории','/dir/music/4','0'], ['28','2','0','Hard rock','','/dir/music/hard_rock/28','1'], ['34','2','0','Rock','','/dir/music/rock/34','0'], ['35','2','0','Metal','','/dir/music/metal/35','0'], ['36','2','0','Electronic','','/dir/music/electronic/36','0'], ['37','2','0','Alternative','','/dir/music/alternative/37','1'], ['5','0','1','Моё видео','Видео - отрасль массовой культуры, связанная с записью и воспроизведением видеоинформации... Моё видео - видео, которое понравилось/заинтересовало лично меня...','/dir/video/5','31'], ['6','5','0','Жесть','Жесть: холоднокатаная отожжённая листовая сталь толщиной 0,08—0,32 мм... Но в данном случае «Жесть» - это какое-то очень необычное событие или ситуация,вызвавшая какие-либо эмоции. Более эмоционально окрашенное, чем «круто» .... ヅ','/dir/video/jest/6','6'], ['29','5','0','Клипы - Nightwish','','/dir/video/nightwish/29','24'], ['30','5','0','Прикольная реклама','','/dir/video/prikolnaja_reklama/30','0'], ['32','5','0','Мультики','','/dir/video/multiki/32','0'], ['33','5','0','Клипы Аниме','','/dir/video/klipy_anime/33','0'], ['31','5','0','Нарезка из фильмов','','/dir/video/narezka_iz_filmov/31','1'], ['20','0','1','Полезное в Сети','','/dir/useful_in_web/20','4'], ['38','20','0','Файловые хранилища','В данном обзоре я попытаюсь собрать лучшие из существующих бесплатных хостингов для обмена самой разнообразной информацией и файлами...','/dir/useful_in_web/file_storage/38','2'], ['39','20','0','Фото хостинги','Обзор ресурсов предоставляющих бесплатный хостинг рисунков, фотографий - любых изображений, разной анимации....','/dir/useful_in_web/photo_storage/39','1'], ['40','20','0','Сайты по поиску работы','Сайты по поиску работы','/dir/useful_in_web/job_search/40','1'] ];</script>
Задача, как и так понятно из вопроса, ... ヅ ... показать только разделы, а категории, соответствующие разделам, скрыть, и показывать только при наведении/клика мышкой по ним. В принципе, всё просто, пройтись скриптом по массиву, отобрать разделы и категории, и распихать по нужным стилизованным элементам. В данном случае, разумнее всего, использовать обычный неупорядоченный список. Но, как оказалось, для человека, не очень хорошо (поверхностно) знакомого с JavaScript, даже при наличии похожего скрипта, оказалось затруднительной задачей. ヅ И тут я вспомнил себя ... всего несколько лет назад я смотрел бы на этот массив значков непонятного назначения, как баран на новые ворота, а от слов «if ... else» или «for ... while», уши сворачивались бы в трубочку... Действительно, как правильно объяснить человеку, не сделать за него, а объяснить, так, чтобы он понял, лишь по наслышке знакомому с JavaScript. Проще всего, конечно, послать ознакомиться с основами, но, это вы и сами можете сделать, набив в любом поисковике незнакомые слова «JavaScript + основы» ... Но вы здесь, если ещё здесь, наверняка не за этим. ヅ Так что я попробую. Получится или нет - неважно. Кому нибудь, так и так, информация пригодится.
ПодробнееЕсли вы ещё не знаете, расскажу, а если в курсе - напомню, что юКоз-сервис любезно предоставляет нам возможность манипулировать всеми разделами и категориями модуля, и прочими данными, относящиеся к ним, с помощью JavaScript, и на наше усмотрение. Как получить массив? Очень просто - ПУ(здесь и далее - панель управления сайтом) » Главная » Информеры » ...
Выше приведён вот такой массив [Каталог сайтов · Категории · Колонки: 1 · JavaScript формат · Полный список] Что мы можем делать с ним? Всё, что угодно. В данном посте, рассмотрю лишь то, как из этого массива извлечь названия категорий, разделов, ссылки в них и прочие данные, и составить из них вертикальное меню. Напомню, что массив, так как является информером, выводит только те данные, то есть, только те категории/разделы, что доступны для гостей сайта.
Исходные данныеИтак, что мы имеем: - 1. Массив. С разделами, категориями, ссылками и туда и туда, и прочими данными. (код выше)
- 2. Задачу. Распределить это в более-менее удобную форму для восприятия.
- 3. ... ...
Создаём циклПеребор элементов массива, обычно (когда индексы непрерывные) осуществляется простым циклом: Code var arr = ["elements1", "elements2", "elements3"] for(var i=0; i<arr.length; i++) { }
Где: i=0 - оределяем вспомогательную переменную «i», задаём ей значение «0» i<arr.length - условие. Если «i» «<» (меньше) «arr.length»(количество элементов в массиве)... i++ с каждым следующим проходом, увеличиваем «i» на единицу, до тех пор, пока «i» будет меньше числа количества всех элементов массива. В данном у нас всего три (3) элемента. Следовательно, «i» будет увеличиваться с «0» до «2», так как в массиве три элемента. ... То есть перебираем все элементы массива по очереди, и выполняем с ними те или иные действия. И обращаться к этим элементам можно по имени массива и индексу элемента в нём. Отсчёт от нуля. Например, получить значение «elements2» можно обратившись к нему вот так: arr[1]. Где число «1» - индекс элемента, а «arr» - имя массива. Постарайтесь это понять. Это очень часто встречающаяся функция в JavaScript, и очень полезная, в разумных пределах. Давайте, сразу прикинем структуру нашего меню. Далеко ходить не буду - возьму за пример меню этого сайта, то, что слева. Вот его структура: Code <ul id="myCatMenu"> <li class="cSec"><a class="sub" href="">Раздел 1</a> <ul class="submenu"> <li class="sCat"><a href="">Раздел 1 » Категория 1</a></li> <li class="sCat"><a href="">Раздел 1 » Категория 2</a></li> </ul> </li> <li class="cSec"><a class="sub" href="">Раздел 2</a> <ul class="submenu"> <li class="sCat"><a href="">Раздел 2 » Категория 1</a></li> <li class="sCat"><a href="">Раздел 2 » Категория 2</a></li> </ul> </li> </ul>
Такую структуры мы и должны создать скриптом, заполнив необходимыми данными. Изначально у нас будет только код начала и конец, без элементов списка. То есть вот такой: Code <ul id="myCatMenu"></ul>
Цикл для разделовИтак, код: Code <script type="text/javascript"> var myCatMenu=$('#myCatMenu'); for(var i=0;i<uCatsOut.length;i++) { if(uCatsOut[i][2]=='1'){ myCatMenu.append('<li class="cSec"><a class="sub" href="'+uCatsOut[i][5]+'">'+uCatsOut[i][3]+'</a><ul class="submenu"></ul></li>'); var myCatMenuSec=$('#myCatMenu li.cSec ul.submenu'); }}; </script>
Где: myCatMenu=$('#myCatMenu'); - объявляем переменную «myCatMenu» и определяем её как «$('#myCatMenu');» - объект нашего меню. for(var i=0;i<uCatsOut.length;i++) - запускаем цикл по массиву с именем «uCatsOut» if(uCatsOut[i][2]=='1') - проверяем, является ли данный обект массива разделом или нет. ['ID','ParentID','isSection','Name','Descr','URL','NumEntries'], и, если является: myCatMenu.append('<li class="cSec"> .... <ul class="submenu"></ul></li>'); - вписываем в наш список элемент разела, и подкатегорию - <ul class="submenu">, и ссылку в раздел: «uCatsOut[i][5]», и название (имя) раздела: «uCatsOut[i][3]». var myCatMenuSec=$('#myCatMenu li.cSec ul.submenu'); - объявляем новую переменную «myCatMenuSec» и определяем её как «$('#myCatMenu li.cSec ul.submenu');» - объект нашего только что созданного меню подкатегорий.
Цикл для категорийCode for(var j=0;j<uCatsOut.length;j++) { if(uCatsOut[i][0]==uCatsOut[j][1]){ myCatMenuSec.append('<li class="sCat"><a href="'+uCatsOut[j][5]+'">'+uCatsOut[j][3]+'</a></li>'); }};
Где: for(var j=0;j<uCatsOut.length;j++) - объявляем новый цикл. if(uCatsOut[i][0]==uCatsOut[j][1]) - проверяем, является ли ID родительского элемента (ParentID) текущего объекта объекта ID элемента того же индекса из предыдущего цикла([i]) ... Чёт, как-то запутанно ... Короче, является ли родитель этого элемента именно родителем этого элемента. Выборка идёт по ID. ['ID','ParentID','isSection','Name','Descr','URL','NumEntries'], и, если является, добавляем ещё один элемент, уже подкатегории: myCatMenuSec.append('<li class="sCat"><a href="'+uCatsOut[j][5]+'">'+uCatsOut[j][3]+'</a></li>'); - в котором делаем тоже самое, то есть записываем адрес подкатегории «uCatsOut[j][5]» и её имя «uCatsOut[j][3]» ...
Собираем всё вместеИ, вот что получилось: Code <script type="text/javascript"> var myCatMenu=$('#myCatMenu'); for(var i=0;i<uCatsOut.length;i++) { if(uCatsOut[i][2]=='1'){ myCatMenu.append('<li class="cSec"><a class="sub" href="'+uCatsOut[i][5]+'">'+uCatsOut[i][3]+'</a><ul class="submenu"></ul></li>'); var myCatMenuSec=$('#myCatMenu li.cSec ul.submenu'); for(var j=0;j<uCatsOut.length;j++) { if(uCatsOut[i][0]==uCatsOut[j][1]){ myCatMenuSec.append('<li class="sCat"><a href="'+uCatsOut[j][5]+'">'+uCatsOut[j][3]+'</a></li>'); }}; }}; </script>
Оформляем само меню, с выпадающими при наведении категориями.Естественно, при помощи CSS2.1(Cascading Style Sheets - каскадные таблицы стилей) ... Вот эти стили: Code <style type="text/css"> /* StartStyle */ #myScriptMenu{margin:5px;width:200px;text-align:left;} #myScriptMenu *{margin:0;padding:0;} #myCatMenu, #myCatMenu li, #myCatMenu a{display:block;list-style:none;z-index:9999;} #myScriptMenu ul{border-bottom:1px solid #CCC;width:200px;} #myScriptMenu #myCatMenu li{position:relative;} #myCatMenu li.cSec ul.submenu{position:absolute;top:0;left:199px;} #myScriptMenu #myCatMenu a{background-color:rgb(243,244,248);border:1px solid #CCC;border-bottom:0;font:bold 11px/1 Georgia,serif;padding:5px;} #myCatMenu a:hover{background-color:rgb(250,250,255);} #myCatMenu li ul{display:none!important;} #myCatMenu li:hover ul{display:block!important;} /* Start Fix IE 6&7. Hiding from IE Mac \*/ * html #navDiv li{float:left;height:1%;} * html #navDiv li a{height:1%;} *+html #navDiv li a{height:1%!important;} /* Stop hiding from IE Mac */ /* EndStyle */ </style>
Подробно разъяснять не буду, так как этот пост не по теме оформления меню, а по теории создания этого самого меню, из массива с данными. Посмотреть, как это работает, и подвигать мышой по разделам можно вот по этой ссылке ... ☑ Пример к посту. Получится должно было что-то вроде:
А вот и «Home work ... for gifted» ... Как вы заметили, если не заметили, сообщю, этот скрипт выводит только разделы у которых есть категории. То есть просто категории без разделов он не выводит. Если вы поняли принцип работы данного скрипта - вывести категории у вас не составит труда. ヅ Если же нет .... ссылка на основы JavaScript где-то выше по тексту. Я честно попытался. ...
Вопросы по теме можно задать в соответствующей теме на форуме «Меню вывода разделов с категориями», или прямо тут, в комментариях. P.S.Всем удачи... ヅ Flesh.
Источник: Информер категорий в JavaScript формате. Реализация меню разделов/категорий. Для юКоз (uCoz) Подробная инструкция с примером |