Перейти к содержимому


Автоматическое Открытие Подменю Без Обновления Страницы


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 50

#1 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 18 Февраль 2012 - 11:15

Здравствуйте!
Помогите, пожалуйста, реализовать идею каталога товара расположенный в левом вертикальном меню с помощью скрипта JQuery, чтобы при нажатии на категорию происходило автоматическое открытие подкатегорий без обновления страницы, то есть чтобы при нажатии в меню к примеру на категорию «Электроника» она не имела ссылки для перехода, а лишь открыла все имеющиеся подкатегории. Переход по ссылке к содержимому/товару происходит по конечной подкатегории.
Что то подобное обсуждалось "здесь", но заставить работать не удалось :( Были испытаны все варианты предложеные в топике - может потому, что это для Лайт темы, а у меня Мокко?

#2 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 19 Февраль 2012 - 09:15

Актуально. Кто-нибудь помогите.....

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Февраль 2012 - 22:45

В данном случае какая установлена тема значения не имеет. Приведенный код в теме выше рабочий. Возможно вы что-то упускаете, попробуйте перечитать данную тему внимательнее. Главное чтобы разметка полностью совпадала.

#4 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 21 Февраль 2012 - 08:36

Просмотр сообщенияVaccina (20 Февраль 2012 - 22:45) писал:

В данном случае какая установлена тема значения не имеет. Приведенный код в теме выше рабочий. Возможно вы что-то упускаете, попробуйте перечитать данную тему внимательнее. Главное чтобы разметка полностью совпадала.
Мне вот интересно, что именно?? Скопировать и вставить 3 строчки, да вроде труднойстей не составляяет.
Все ПОЛНОСТЬЮ соответствует приведенной инструкции - НЕ РАБОТАЕТ. Жаль бубна нет, может помог бы...

P.S: Уважаемая Адмиинстрация зайдите ко мне на сайт, посмотрите код, ведь все сделано по инструкции, может что то в ней упущено? Без корректной работы не могу запустить сайт :( Помогите....

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Февраль 2012 - 21:40

Давайте попробуем выполнить действия по порядку. Сейчас у вас на сайте отсутствует полностью раскрытый каталог. Вам необходимо заменить все строки catalog (в шаблоне "HTML" блок каталога) на catalog_full. После этого каталог должен быть всегда раскрыт.

#6 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 21 Февраль 2012 - 22:29

Просмотр сообщенияVaccina (21 Февраль 2012 - 21:40) писал:

Давайте попробуем выполнить действия по порядку. Сейчас у вас на сайте отсутствует полностью раскрытый каталог. Вам необходимо заменить все строки catalog (в шаблоне "HTML" блок каталога) на catalog_full. После этого каталог должен быть всегда раскрыт.
Чтобы не пугать посетителей магазина, предположим, что выполнено. Проверил код на отсутствие приставки _full - проблем не обнаружено - везде все есть.

Цитата

       <!-- Каталог -->
       <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
              <ul id="myTree">
            {%IFNOT catalog_full_empty %}
              {% FOR catalog_full %}
                {% IFNOT catalog_full.HIDE %}
                  {% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
                     <li>
                       <a href="{catalog_full.URL}"
                          {% IF catalog_full.CURRENT %}
                            class="contentTbodycatalog_fullCurent"
                          {% ELSEIF catalog_full.CURRENT_PARENT %}
                            class="contentTbodycatalog_fullCurentBranch"
                          {% ENDIF %}
                          {% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
                       >
                        {catalog_full.NAME}

                        <!-- Отображение количества товаров в категории -->
                        {% IF catalog_full.GOODS_COUNT>0 %}
                         ({catalog_full.GOODS_COUNT})
                        {% ENDIF %}
                      </a>
                    {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
                  {% IF catalog_full.LAST %}
                    {% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
                  {% ENDIF %}
                {% ENDIF %}
              {% ENDFOR %}
            {% ENDIF %}
            </ul>
       <!-- end Каталог -->
Код в самом конце файла "main.js"

Цитата

$(document).ready(function() {
  $('#myTree').menuTree({
    animation: true,
    handler: 'slideToggle',
    anchor: 'a[rel="withchild"]',
    trace: false
  });
});
Код в самом конце файла "main.css"

Цитата

#myTree .menuTree:before {
  content: "[+] ";
}
#myTree .expanded:before {
  content: "[-] ";
}
#myTree .collapsed {
  display: none;  


#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Февраль 2012 - 22:36

Попробуйте заменить

$(document).ready(function() {
$('#myTree').menuTree({
animation: true,
handler: 'slideToggle',
anchor: 'a[rel="withchild"]',
trace: false
});
});

на

$(document).ready(function() {
$('#myTree').menuTree({
animation: true,
handler: 'slideToggle',
hrefBegins: '',
trace: false
});
});

далее
<!-- Каталог -->
<h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
<ul id="myTree">
{%IFNOT catalog_full_empty %}
{% FOR catalog_full %}
{% IFNOT catalog_full.HIDE %}
{% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
<li>
<a href="{catalog_full.URL}"
{% IF catalog_full.CURRENT %}
class="contentTbodycatalog_fullCurent"
{% ELSEIF catalog_full.CURRENT_PARENT %}
class="contentTbodycatalog_fullCurentBranch"
{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
>
{catalog_full.NAME}

<!-- Отображение количества товаров в категории -->
{% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
{% ENDIF %}
</a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.LAST %}
{% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
{% ENDIF %}
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>
<!-- end Каталог -->

заменить на

<!-- Каталог -->
<h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
<ul id="myTree">
{%IFNOT catalog_full_empty %}
{% FOR catalog_full %}
{% IFNOT catalog_full.HIDE %}
{% IF catalog_full.index > 1 %}{% IF catalog_full.FIRST %}<ul>{% ENDIF %}{% ENDIF %}
<li>
<a href="{catalog_full.URL}"
{% IF catalog_full.CURRENT %}
class="contentTbodycatalog_fullCurent"
{% ELSEIF catalog_full.CURRENT_PARENT %}
class="contentTbodycatalog_fullCurentBranch"
{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
>
{catalog_full.NAME}

<!-- Отображение количества товаров в категории -->
{% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
{% ENDIF %}
</a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.index > 1 %}{% IF catalog_full.LAST %}
{% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
{% ENDIF %}{% ENDIF %}
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>
<!-- end Каталог -->

Если это не поможет, то попробуйте подключить любую другую библиотеку. Например http://www.linkexcha...su/2008/49.html

#8 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 23 Февраль 2012 - 08:35

Просмотр сообщенияVaccina (22 Февраль 2012 - 22:36) писал:

Попробуйте заменить
Ура, работает :huh:. Огромное Спасибо
Только вот помогите решить вопрос с открытием подкатегорий: открываются почему то 'только' по двойному щелчку мыши  :(

Просмотр сообщенияVaccina (22 Февраль 2012 - 22:36) писал:

Если это не поможет, то попробуйте подключить любую другую библиотеку. Например http://www.linkexcha...su/2008/49.html
Не плохой вариант, но Jquery для меня темный лес - не смогу подключить самостоятельно :(

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Февраль 2012 - 11:58

Цитата

Только вот помогите решить вопрос с открытием подкатегорий: открываются почему то 'только' по двойному щелчку мыши
Точно утверждать не могу, но возможно что данная библиотека работает только таким образом. Объяснить это можно так - двойной клик необходимо потому-что при одинарном клике происходит разворот категории. Возможно данная библиотека может работать в другом режиме, но к сожалению, такой документации не нашла.

#10 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 24 Февраль 2012 - 22:37

Просмотр сообщенияVaccina (24 Февраль 2012 - 11:58) писал:

Точно утверждать не могу, но возможно что данная библиотека работает только таким образом. Объяснить это можно так - двойной клик необходимо потому-что при одинарном клике происходит разворот категории. Возможно данная библиотека может работать в другом режиме, но к сожалению, такой документации не нашла.
Не встречал еще такого, разве что в папке ОС :), обычно всегда все с одним кликом происходит. Заметил, что на приведенной изначально инструкции дерево отображается несколько иначе, подкатегории сдвигаются не много правее, а у нас сейчас дерево открываевается параллельно вниз.

P.S: Может есть еще легкие варианты jquery с плавным открытием и приятным деревом? А то что то тут как то, ну можете сами посмотреть :)

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Февраль 2012 - 17:12

Как я писала раньше - вариант использовать следующий плагин. http://www.linkexcha...su/2008/49.html
По установке он не такой сложный, но гибкий.

Как выглядит можно посмотреть тут http://jquery.bassis.../treeview/demo/
А скачать тут https://github.com/j...jquery-treeview

Главное правило не подключайте файл <script type="text/javascript" src="js/jquery-1.2.3.js"></script>
так как он у вас уже подключен по умолчанию

#12 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 29 Февраль 2012 - 22:33

Просмотр сообщенияVaccina (27 Февраль 2012 - 17:12) писал:

Как я писала раньше - вариант использовать следующий плагин. http://www.linkexcha...su/2008/49.html
По установке он не такой сложный, но гибкий.

Как выглядит можно посмотреть тут http://jquery.bassis.../treeview/demo/
А скачать тут https://github.com/j...jquery-treeview

Главное правило не подключайте файл <script type="text/javascript" src="js/jquery-1.2.3.js"></script>
так как он у вас уже подключен по умолчанию
Можете дать наводку на установку? Надо что то делать с меню, иначе текущее это не дело  <_<
Здесь что нибудь нужно менять?

Цитата

            {%IFNOT catalog_empty %}
              {% FOR catalog %}
                {% IFNOT catalog.HIDE %}
                  {% IF catalog.FIRST %}<ul>{% ENDIF %}
                     <li>
                       <a href="{catalog.URL}"
                          {% IF catalog.CURRENT %}
                            class="contentTbodyCatalogCurent"
                          {% ELSEIF catalog.CURRENT_PARENT %}
                            class="contentTbodyCatalogCurentBranch"
                          {% ENDIF %}
                       >
                        {catalog.NAME}

                        <!-- Отображение количества товаров в категории -->
                        {% IF catalog.GOODS_COUNT>0 %}
                         ({catalog.GOODS_COUNT})
                        {% ENDIF %}
                      </a>
                    {% IF catalog.ISSET_SUB=0 %}</li>{% ENDIF %}
                  {% IF catalog.LAST %}
                    {% FOR out %}</ul>{%IFNOT catalog.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
                  {% ENDIF %}
                {% ENDIF %}
              {% ENDFOR %}
            {% ENDIF %}

Подключил в HTML:

Цитата

  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.treeview.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.treeview.edit.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.treeview.async.js"></script>
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.treeview.sortable.js"></script>

в Main.css добавил:

Цитата

.treeview, .treeview ul {
  padding: 0;
margin: 0;
list-style: none;
}

.treeview ul {
background-color: white;
margin-top: 4px;
}

.treeview .hitarea {
background: url({ASSETS_IMAGES_PATH}treeview-default.gif) -64px -25px no-repeat;
height: 16px;
width: 16px;
margin-left: -16px;
float: left;
cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
display: inline;
float:none;
}

.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url({ASSETS_IMAGES_PATH}treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url({ASSETS_IMAGES_PATH}treeview-default.gif); }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url({ASSETS_IMAGES_PATH}treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url({ASSETS_IMAGES_PATH}treeview-red.gif); }

.treeview-black li { background-image: url({ASSETS_IMAGES_PATH}treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url({ASSETS_IMAGES_PATH}treeview-black.gif); }

.treeview-gray li { background-image: url({ASSETS_IMAGES_PATH}treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url({ASSETS_IMAGES_PATH}treeview-gray.gif); }

.treeview-famfamfam li { background-image: url({ASSETS_IMAGES_PATH}treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url({ASSETS_IMAGES_PATH}treeview-famfamfam.gif); }

.treeview .placeholder {
background: url({ASSETS_IMAGES_PATH}ajax-loader.gif) 0 0 no-repeat;
height: 16px;
width: 16px;
display: block;
}

.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url({ASSETS_IMAGES_PATH}folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url({ASSETS_IMAGES_PATH}folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url({ASSETS_IMAGES_PATH}file.gif) 0 0 no-repeat; }



#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Март 2012 - 21:28

Вам необходимо заменить catalog на catalog_full что бы он всегда был открыт. Как это было сделано раньше.

#14 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 01 Март 2012 - 21:33

Просмотр сообщенияVaccina (01 Март 2012 - 21:28) писал:

Вам необходимо заменить catalog на catalog_full что бы он всегда был открыт. Как это было сделано раньше.
Ну это понятно :) Имел ввиду в общей структуре.
Еще что нибудь?

В main.js добавлено

Цитата

  function initTrees() {
$("#black").treeview({
url: "source.php"
})

$("#mixed").treeview({
url: "source.php",
// add some additional, dynamic data and request with POST
ajax: {
data: {
"additional": function() {
return "yeah: " + new Date;
}
},
type: "post"
}
});
}
$(document).ready(function(){
initTrees();
$("#refresh").click(function() {
$("#black").empty();
$("#mixed").empty();
initTrees();
});
});


#15 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Март 2012 - 22:37

В main.js вам необходимо добавить

$(document).ready(function(){
 $("#navigation").treeview({
		persist: "location",
		collapsed: true,
		unique: true
 });
});

Далее код каталога использовать такой
<!-- Каталог -->
<ul id="navigation">
{%IFNOT catalog_full_empty %}
{% FOR catalog_full %}
{% IFNOT catalog_full.HIDE %}
{% IF catalog_full.index > 1 %}{% IF catalog_full.FIRST %}<ul>{% ENDIF %}{% ENDIF %}
<li>
<a href="{catalog_full.URL}"
{% IF catalog_full.CURRENT %}
class="contentTbodycatalog_fullCurent"
{% ELSEIF catalog_full.CURRENT_PARENT %}
class="contentTbodycatalog_fullCurentBranch"
{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
>
{catalog_full.NAME}

<!-- Отображение количества товаров в категории -->
{% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
{% ENDIF %}
</a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.index > 1 %}{% IF catalog_full.LAST %}
{% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
{% ENDIF %}{% ENDIF %}
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>
<!-- end Каталог -->


#16 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 03 Март 2012 - 08:54

Просмотр сообщенияVaccina (02 Март 2012 - 22:37) писал:

В main.js вам необходимо добавить

$(document).ready(function(){
 $("#navigation").treeview({
		persist: "location",
		collapsed: true,
		unique: true
 });
});

Далее код каталога использовать такой
<!-- Каталог -->
<ul id="navigation">
{%IFNOT catalog_full_empty %}
{% FOR catalog_full %}
{% IFNOT catalog_full.HIDE %}
{% IF catalog_full.index > 1 %}{% IF catalog_full.FIRST %}<ul>{% ENDIF %}{% ENDIF %}
<li>
<a href="{catalog_full.URL}"
{% IF catalog_full.CURRENT %}
class="contentTbodycatalog_fullCurent"
{% ELSEIF catalog_full.CURRENT_PARENT %}
class="contentTbodycatalog_fullCurentBranch"
{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
>
{catalog_full.NAME}

<!-- Отображение количества товаров в категории -->
{% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
{% ENDIF %}
</a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.index > 1 %}{% IF catalog_full.LAST %}
{% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
{% ENDIF %}{% ENDIF %}
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>
<!-- end Каталог -->

Работает  :rolleyes:
Только вот как то возможно сделать, чтобы при нажатии на категорию к примеру "для мужчин" открывались только подкатегории без перехода по ссылке с отображением каталогов/папок, то есть ровно также как и при нажатии на знак [+] - открытие подкатегорий без обновления страницы?

#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 05 Март 2012 - 22:43

Пожалуйста, напомните ваш адрес сайта. Возможно что-то можно будет сделать.

#18 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 06 Март 2012 - 08:44

Просмотр сообщенияVaccina (05 Март 2012 - 22:43) писал:

Пожалуйста, напомните ваш адрес сайта. Возможно что-то можно будет сделать.
Отправлен в Л/С.

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 06 Март 2012 - 20:45

На вашем сайте не заметила рабочего меню о котором вы говорили. Так же обращаю ваше внимание на ошибку js

$("#myTree").menuTree is not a function

Эта ошибка связана с тем - что у вас в файле main.js подключен код

$(document).ready(function() {
$('#myTree').menuTree({
animation: true,
handler: 'slideToggle',
anchor: 'a[rel="withchild"]',
trace: false
});
});

от которого отсутствует библиотека.

#20 veron.nv

veron.nv

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

  • Пользователи
  • PipPip
  • 42 сообщений

Отправлено 06 Март 2012 - 20:57

Просмотр сообщенияVaccina (06 Март 2012 - 20:45) писал:

На вашем сайте не заметила рабочего меню о котором вы говорили. Так же обращаю ваше внимание на ошибку js

$("#myTree").menuTree is not a function

Эта ошибка связана с тем - что у вас в файле main.js подключен код

$(document).ready(function() {
$('#myTree').menuTree({
animation: true,
handler: 'slideToggle',
anchor: 'a[rel="withchild"]',
trace: false
});
});

от которого отсутствует библиотека.
:unsure: Ничего подобного в js(myTree) уже давно нет, как и во всех прочих файлах. Что то у вас не верно отображается.
Новое меню работает. Вы точно по адресу зашли?   :)




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных