меню

Предисловие

Совсем недавно разрабатывал сервис интернет каталога с подгружаемым контентом. Задача состояла в том, что каталог должен быть с древовидной структурой, в каждой категории должны быть под категории и при клике на него, товар должен только разворачиваться и подгружаться Ajax'ом, для того что бы товар динамически подгружался дабы сократить объемы загрузки страницы. Для работы Front - End'а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

Разработка

1) Сперва, я собрал дерево в HTML и CSS - создать дерево самому или найти в сети не так уж проблематично.

2) Создание самого механизма на JQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> ...


<script>
    $(document).ready(function() {
        $('.article').click(function(){
            var articleView = $(this).parent('.Node').find('.article');
            var viewArticle = $(this).parent('.Node').find('.articleBlock');
            var url = $(this).attr('data');
            $.getJSON(url, function(data){
                $.each(data, function(i, field){
                    var productCount = viewArticle.append('+field.price+' руб.'+field.name+'); 
                }); 
            }); 
         }); 
     }); 
</script> 

Все стало подгружаться, все заработало, можно было сказать Ура! Но..., при повторном клике подкатегории товар дублировался опять и oпять.

3) Доработка механизма


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
...

<script>
    $(document).ready(function() {
        $('.article').click(function(){
            var articleView = $(this).parent('.Node').find('.article');
            var viewArticle = $(this).parent('.Node').find('.articleBlock');
            var url = $(this).attr('data');
            $.getJSON(url, function(data){
                $.each(data, function(i, field){
                    var productCount = viewArticle.append('+field.price+' руб.'+field.name+''); 
                    if ( articleView.attr("data") == productCount ) { articleView.removeAttr("data") } 
                    else { articleView.attr("data", productCount); } 
                 }); 
            });
         }); 
    }); 
</script> 

Все заработало!

Выкладываю исходник (черновой вариант, не поправлены стили ), рабочий.

Пример

Решение сырое, но рабочее, доработать будет не сложно.

Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127

Возможно, вам будет интересно

JavaScript - отслеживание изменения ориентации на мобильных устройствах

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

JavaScript and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля

Совсем недавно решил написать генератор пароля с возможностью просмотра генерированного пароля под звездочками. Для работы выбрал JQuery 1.8.3 и нативный JavaScript. При написании самого скрипта столкнулся с проблемой в JQuery 1.8.3 с функцией attr().

Выделяем текущий пункт меню отдельным стилем на jQuery

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае Ajax) или сложно из-за структуры меню и тут нам на помощь приходит JavaScript, а точнее jQuery

Собственные социальные share-кнопки

Для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, решение которое однажды написал неизвестный, но однозначно добрый программист.