Автоматическое Открытие Подменю Без Обновления Страницы
#1
Отправлено 18 Февраль 2012 - 11:15
Помогите, пожалуйста, реализовать идею каталога товара расположенный в левом вертикальном меню с помощью скрипта JQuery, чтобы при нажатии на категорию происходило автоматическое открытие подкатегорий без обновления страницы, то есть чтобы при нажатии в меню к примеру на категорию «Электроника» она не имела ссылки для перехода, а лишь открыла все имеющиеся подкатегории. Переход по ссылке к содержимому/товару происходит по конечной подкатегории.
Что то подобное обсуждалось "здесь", но заставить работать не удалось Были испытаны все варианты предложеные в топике - может потому, что это для Лайт темы, а у меня Мокко?
#2
Отправлено 19 Февраль 2012 - 09:15
#3
Отправлено 20 Февраль 2012 - 22:45
#4
Отправлено 21 Февраль 2012 - 08:36
Vaccina (20 Февраль 2012 - 22:45) писал:
Все ПОЛНОСТЬЮ соответствует приведенной инструкции - НЕ РАБОТАЕТ. Жаль бубна нет, может помог бы...
P.S: Уважаемая Адмиинстрация зайдите ко мне на сайт, посмотрите код, ведь все сделано по инструкции, может что то в ней упущено? Без корректной работы не могу запустить сайт Помогите....
#5
Отправлено 21 Февраль 2012 - 21:40
#6
Отправлено 21 Февраль 2012 - 22:29
Vaccina (21 Февраль 2012 - 21:40) писал:
Цитата
<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 Каталог -->
Цитата
$('#myTree').menuTree({
animation: true,
handler: 'slideToggle',
anchor: 'a[rel="withchild"]',
trace: false
});
});
Цитата
content: "[+] ";
}
#myTree .expanded:before {
content: "[-] ";
}
#myTree .collapsed {
display: none;
#7
Отправлено 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
Отправлено 23 Февраль 2012 - 08:35
Vaccina (22 Февраль 2012 - 22:36) писал:
Только вот помогите решить вопрос с открытием подкатегорий: открываются почему то 'только' по двойному щелчку мыши
Vaccina (22 Февраль 2012 - 22:36) писал:
#9
Отправлено 24 Февраль 2012 - 11:58
Цитата
#10
Отправлено 24 Февраль 2012 - 22:37
Vaccina (24 Февраль 2012 - 11:58) писал:
P.S: Может есть еще легкие варианты jquery с плавным открытием и приятным деревом? А то что то тут как то, ну можете сами посмотреть
#11
Отправлено 27 Февраль 2012 - 17:12
По установке он не такой сложный, но гибкий.
Как выглядит можно посмотреть тут http://jquery.bassis.../treeview/demo/
А скачать тут https://github.com/j...jquery-treeview
Главное правило не подключайте файл <script type="text/javascript" src="js/jquery-1.2.3.js"></script>
так как он у вас уже подключен по умолчанию
#12
Отправлено 29 Февраль 2012 - 22:33
Vaccina (27 Февраль 2012 - 17:12) писал:
По установке он не такой сложный, но гибкий.
Как выглядит можно посмотреть тут http://jquery.bassis.../treeview/demo/
А скачать тут https://github.com/j...jquery-treeview
Главное правило не подключайте файл <script type="text/javascript" src="js/jquery-1.2.3.js"></script>
так как он у вас уже подключен по умолчанию
Здесь что нибудь нужно менять?
Цитата
{% 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.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 добавил:
Цитата
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
Отправлено 01 Март 2012 - 21:28
#14
Отправлено 01 Март 2012 - 21:33
Vaccina (01 Март 2012 - 21:28) писал:
Еще что нибудь?
В main.js добавлено
Цитата
$("#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
Отправлено 02 Март 2012 - 22:37
$(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
Отправлено 03 Март 2012 - 08:54
Vaccina (02 Март 2012 - 22:37) писал:
$(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 Каталог -->
Работает
Только вот как то возможно сделать, чтобы при нажатии на категорию к примеру "для мужчин" открывались только подкатегории без перехода по ссылке с отображением каталогов/папок, то есть ровно также как и при нажатии на знак [+] - открытие подкатегорий без обновления страницы?
#17
Отправлено 05 Март 2012 - 22:43
#19
Отправлено 06 Март 2012 - 20:45
$("#myTree").menuTree is not a function
Эта ошибка связана с тем - что у вас в файле main.js подключен код
$(document).ready(function() { $('#myTree').menuTree({ animation: true, handler: 'slideToggle', anchor: 'a[rel="withchild"]', trace: false }); });
от которого отсутствует библиотека.
#20
Отправлено 06 Март 2012 - 20:57
Vaccina (06 Март 2012 - 20:45) писал:
$("#myTree").menuTree is not a function
Эта ошибка связана с тем - что у вас в файле main.js подключен код
$(document).ready(function() { $('#myTree').menuTree({ animation: true, handler: 'slideToggle', anchor: 'a[rel="withchild"]', trace: false }); });
от которого отсутствует библиотека.
Новое меню работает. Вы точно по адресу зашли?
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных