Создаём меню рубрик благодаря $CATEGORIES_JSON$
827материалов
228тем на форуме
3004комментария
6159пользователей

Создаём меню рубрик благодаря $CATEGORIES_JSON$


Всем доброго дня, я увидел на форуме, что пользователь Reslear дал частичный ответ касающийся новой системной переменной от uCoz, под названием $CATEGORIES_JSON$ из-за чего я не мог пройти мимо этой темы, но для начала смотрим демо.

Как вы видите пред вами обычное меню выбор категорий uCoz и как многие могли заметить, первое, что бросается в глаза, так это отсутствие квадратных скобок в контейнере с количеством материала. Но это не единственный плюс данного решения.

Самое главное это то, что теперь мы сможем создать свой html каркас данного меню, вписав в него нужные значения для отображения нужной информации. Из-за чего нам больше не надо будет прогибаться под HTML код uCoz с определёнными классами и идентификаторами.

И так давайте рассмотрим подробно данный пример кода и узнаем какие значения можно в него вписать:

JS
Код
<a href="'+cat[i].url+'" id="mc'+cat.id+'" >'+cat.name+'<span>'+cat[/i].entries+'</span></a>

'+cat.id+' - идентификатор категории
'+cat.url+' - ссылка в категорию
'+cat.name+' - название категории
'+cat.entries+' - количество материала в категории
'+cat.description+'
 - описание категории

в данном html примере я не буду использовать описание категории, так как он будет лишнем, поэтому давайте вернёмся к нашему коду:

благодаря выше написанному html каркасу мы получим его дублирование и будет это выглядеть так:

HTML
Код
<a href="/news/1-0-1" id="mc1">Семья<span>34 </span></a>    
<a href="/news/1-0-3" id="mc3">Машины <span>0 </span></a>    
<a href="/news/1-0-5" id="mc5">Путешествия <span>0 </span></a>    
<a href="/news/1-0-4" id="mc4">Интернет<span>0 </span></a>    
<a href="/news/1-0-2" id="mc2">Рецепты <span>15 </span></a>

обратите сразу внимание на идентификаторы mc , которые размещены в хаотичном порядке, они отображаются согласно вашим расположением категорий в общих настройках того или иного модуля в админ панели сайта.


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

А в данном html примере я использовал идентификаторы, чтобы у последний категории убрать средствами css нижнею точечную рамку, мелочь, а приятно когда всё выглядит красиво и правильно. Ну и как я написал выше, мы убрали квадратные скобки в теги span, что тоже радует.

Шаг 1 - Установим HTML-JS:
А теперь давайте взглянем на готовый html код данного решения, который вы устанавливаете в нужное место на странице сайта:

HTML
Код
<?if($CATEGORIES_JSON$)?>   
<div class="menu-categories">   
<script type="text/javascript">   
var cat = $CATEGORIES_JSON$;   
$(cat).each(function(i){   
    document.write('<a id="mc'+cat[i].id+'" href="'+cat.url+'">'+cat.name+'<span>'+cat[/i].entries+' </span></a>');   
});   
</script>   

</div>   
<?endif?>

Шаг 2 - Установим CSS:
а также пропишем css стили:

CSS-Code
Код
/* Создаём меню $CATEGORIES_JSON$    
------------------------------------------*/   
.menu-categories {   
    float:left;   
    width:250px;    
    padding: 0px 0px;    
    background: #fff;   
    border: 1px solid #CAD3DA;   
    border-radius:5px;   
    overflow: hidden;   
}    

.menu-categories a:link,    
.menu-categories a:visited,    
.menu-categories a:active {    
    float:left;   
    width:230px;    
    color:#595C66;    
    display:block;    
    padding:5px 10px 5px 10px;    
    border-bottom: 1px dotted #B6C0CD;   
}   

.menu-categories a:hover{   
    color:#595C66;   
    background:#F1F8FB;   
}   

.menu-categories span {    
    float:right;   
    padding:1px 7px;   
    background:#9EA5A8;   
    margin: 0px 0px 0px 0px;    
       
    font:9px Verdana,Arial,sans-serif;    
    font-weight: bold;    
    color:#fff;    
    border-radius:3px;   
}   

#mc5 {    
    border-bottom: none;   
}


Как я писал выше про идентификаторы mc, вам следует в данном css коде заменить #mc5 на свой номер идентификатора который прописан последней рубрике в данном меню.

Примечание:
Безусловно я не мог промолчать о ложки дёгтя в данном решении, а именно когда вы выберите нужную категорию и перейдёте в неё, то в данном меню эта категория не будет выдела каким либо способом, в отличии когда вы используете стандартную системную переменную $CATEGORIES$ от uCoz.

В целом на этом всё, спасибо за внимание!

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 13.08.2013 в 13:04
Материал просмотрен: 927 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта