Информер категорий в JavaScript формате. Реализация меню разделов/категорий. Для юКоз (uCoz) - JS и JQ скрипты для uCoz - Статьи о/про uCoz - Каталог статей

Просматривая последние посты, на своём форуме, наткнулся на один интереснейший вопрос.
В оригинале звучал примерно так:

Quote (Komoff)

Привет!
Помоги пожалуйста доделать скрипт списка разделов с категориями.
Немного предыстории: У меня есть каталог ссылок с большим количеством разделов и категорий. И я все думал, как решить проблему навигации по нему, чтобы человек попав в одну из категорий, мог перейти в другую категорию другого раздела. Подобное с кодом $CATEGORIES$ реализовать было невозможно. Увидев способы вывода категорий в модуле "интернет-магазин", захотел реализовать такое же в модуле "каталог сайтов". Но решил, что без вмешательства разработчиков uCoz тут не обойтись, поэтому дважды оставлял такое предложение в "Предложения по системе" на ФТП. Пока не обратил внимание на информер "Каталог сайтов" с выводом категорий в JavaScript формате. Он выводил примерно такой массив:
...
Сделать так, чтобы изначально выводился список только разделов, а при наведение на один из разделов выпадали его категории, даже лучше было бы реализовать как в интернет-магазине, рядом со ссылкой на раздел иконка, и при клике по ней выпадали категории этого раздела, при повторном скрывались. Попытался добавить подобную функцию из других скриптов, нечего у меня конечно не получилось. Может ты сможешь помочь? Может как-то выдрать что-то из интернет-магазина? У меня три инвайта есть, могу отдать, безвозмездно конечно.

Далее, приводился фрагмент массива.
И выглядит он так:

Code JavaScript (Массив информера категорий - все категории/разделы)

<script type="text/javascript">var uCatsOut=[/*['ID','ParentID','isSection','Name','Descr','URL','NumEntries']*/
['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 формат · Полный список]

Что мы можем делать с ним?
Всё, что угодно.
В данном посте, рассмотрю лишь то, как из этого массива извлечь названия категорий, разделов, ссылки в них и прочие данные, и составить из них вертикальное меню.

Напомню, что массив, так как является информером, выводит только те данные, то есть, только те категории/разделы, что доступны для гостей сайта.

Исходные данные

Создаём цикл

Перебор элементов массива, обычно (когда индексы непрерывные) осуществляется простым циклом:

Code

var arr = ["elements1", "elements2", "elements3"]
 for(var i=0; i<arr.length; i++) {
  /*... сделать что-то с arr[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>

Подробно разъяснять не буду, так как этот пост не по теме оформления меню, а по теории создания этого самого меню, из массива с данными.

Посмотреть, как это работает, и подвигать мышой по разделам можно вот по этой ссылке ... ☑ Пример к посту.

Как вы заметили, если не заметили, сообщю, этот скрипт выводит только разделы у которых есть категории. То есть просто категории без разделов он не выводит.
Если вы поняли принцип работы данного скрипта - вывести категории у вас не составит труда. ヅ
Если же нет .... ссылка на основы JavaScript где-то выше по тексту.
Я честно попытался. ...