https://wiki.umisoft.ru/index.php?title=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81%D0%BE_%D1%81%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5%D0%BC/%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BD%D0%B0_jquery_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%BE%D0%B2_%D0%B2_demodizyy&feed=atom&action=history
Работа со скрытием/отображением элементов на jquery на примере фильтров в demodizyy - История изменений
2024-03-28T21:16:40Z
История изменений этой страницы в вики
MediaWiki 1.31.0
https://wiki.umisoft.ru/index.php?title=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81%D0%BE_%D1%81%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5%D0%BC/%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BD%D0%B0_jquery_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%BE%D0%B2_%D0%B2_demodizyy&diff=6326&oldid=prev
Mad grant в 14:59, 23 сентября 2013
2013-09-23T14:59:24Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 14:59, 23 сентября 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l50" >Строка 50:</td>
<td colspan="2" class="diff-lineno">Строка 50:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Filter7.png]][[Файл:Filter8.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Файл:Filter7.png]][[Файл:Filter8.png]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Полезные ссылки ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Полезные ссылки ==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*Документация по макросу %catalog getObjectList()% [http://dev.docs.umi-cms.ru/spravochnik_makrosov_umicms/katalog/catalog_getobjectslist/]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*Документация по макросу %catalog search()% [http://dev.docs.umi-cms.ru/spravochnik_makrosov_umicms/katalog/catalog_search/]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*Документация по протоколу USel [http://dev.docs.umi-cms.ru/shablony_i_makrosy/xslt-shablonizator_umi_cms/vyborki_iz_bd_protokol_usel/]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*Документация по Selector [http://api.docs.umi-cms.ru/spravochnik_po_klassam_yadra_umicms/vyborki/selector/]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*Документация по классу umiHierarchyElement [http://api.docs.umi-cms.ru/spravochnik_po_klassam_yadra_umicms/model_ierarhii/umihierarchyelement/]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">*Конструкция foreach [http://www.php.net/manual/ru/control-structures.foreach.php]</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*css свойство display [http://htmlbook.ru/css/display]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*css свойство display [http://htmlbook.ru/css/display]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*Правильные show/hide/toggle [http://javascript.ru/ui/show-hide-toggle]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*Правильные show/hide/toggle [http://javascript.ru/ui/show-hide-toggle]</div></td></tr>
</table>
Mad grant
https://wiki.umisoft.ru/index.php?title=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81%D0%BE_%D1%81%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5%D0%BC/%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BD%D0%B0_jquery_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%BE%D0%B2_%D0%B2_demodizyy&diff=6324&oldid=prev
Mad grant в 14:58, 23 сентября 2013
2013-09-23T14:58:33Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ru">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Предыдущая</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Версия 14:58, 23 сентября 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Строка 1:</td>
<td colspan="2" class="diff-lineno">Строка 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[category:Верстка в XSLT]][[Категория:Модуль Каталог]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[category:Верстка в XSLT]][[Категория:Модуль Каталог]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Актуально для версии 2.9.1'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Актуально для версии 2.9.1'''</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">=== Задача ===</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Так как форма с фильтрами занимаем значительное место, и, наверно, не всем пользователям она нужна, нужно сделать</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Так как форма с фильтрами занимаем значительное место, и, наверно, не всем пользователям она нужна, нужно сделать</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>так, чтобы пользователь сам мог включать/выключать форму с фильтрами. Реализовать этот проще всего на jquery, тем более, что она уже подключена.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>так, чтобы пользователь сам мог включать/выключать форму с фильтрами. Реализовать этот проще всего на jquery, тем более, что она уже подключена.</div></td></tr>
</table>
Mad grant
https://wiki.umisoft.ru/index.php?title=%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81%D0%BE_%D1%81%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5%D0%BC/%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%BD%D0%B0_jquery_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5_%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%BE%D0%B2_%D0%B2_demodizyy&diff=6323&oldid=prev
Mad grant: Новая страница: «category:Верстка в XSLTКатегория:Модуль Каталог '''Актуально для версии 2.9.1''' Так как форма с …»
2013-09-23T14:58:18Z
<p>Новая страница: «<a href="/%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%92%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0_%D0%B2_XSLT" title="Категория:Верстка в XSLT">category:Верстка в XSLT</a><a href="/%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C_%D0%9A%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3" title="Категория:Модуль Каталог">Категория:Модуль Каталог</a> '''Актуально для версии 2.9.1''' Так как форма с …»</p>
<p><b>Новая страница</b></p><div>[[category:Верстка в XSLT]][[Категория:Модуль Каталог]]<br />
'''Актуально для версии 2.9.1'''<br />
Так как форма с фильтрами занимаем значительное место, и, наверно, не всем пользователям она нужна, нужно сделать<br />
так, чтобы пользователь сам мог включать/выключать форму с фильтрами. Реализовать этот проще всего на jquery, тем более, что она уже подключена.<br />
=== Решение через jquery ===<br />
Сначала, обрамим вызов результатов работы макроса catalog search тегами div с id="filter" и отключением отображения через css display:none, см. "Полезные ссылки":<br />
<source lang="xml"><br />
<div id="filter" style="display:none"><br />
<xsl:apply-templates select="document(concat('udata://catalog/search////', $type))"/><br />
</div><br />
</source><br />
Потом, после вызова макроса catalog search зададим произвольный текст с картинкой, добавив в img id="filterButton":<br />
<source lang="xml"><br />
<div><br />
Фильтр товаров <img src="/images/icons/plus.png" id="filterButton"/><br />
</div><br />
</source><br />
Далее, в директорию /images/icons/ добавим две картинки plus.png и minus.png соответствующего содержания.<br />
И, наконец, зададим скрипт, для этого сразу после темлпейта match="udata[@method = 'getObjectsList'][total]" вставим внутри тега:<br />
<source lang="xml"><br />
<script type="text/javascript"> </script><br />
</source><br />
следующий код:<br />
<source lang="javascript"><br />
$(document).ready(function(){<br />
//при клике на элемент с id "filterButton"<br />
$('#filterButton').click(function(){<br />
//если элемент с id "filter" скрыт<br />
if ($('#filter').is(':hidden')) {<br />
//то включаем его отображение <br />
$('#filter').show();<br />
//и меняем картинку на "минус"<br />
$(this).attr('src','/images/icons/minus.png');<br />
}<br />
//иначе, то есть если элемент с id "filter" не скрыт<br />
else{<br />
//скрываем его<br />
$('#filter').hide();<br />
//меняем картинку на "плюс"<br />
$(this).attr('src','/images/icons/plus.png');<br />
}<br />
});<br />
});<br />
</source><br />
*Правильнее будет в дальнейшем вынести это скрипт в отдельный файл и подключить его в шаблоне.<br />
=== Результат ===<br />
В результате пользователь может включать/выключать отображения фильтров, кликая по картинке:<br />
<br />
[[Файл:Filter7.png]][[Файл:Filter8.png]]<br />
== Полезные ссылки ==<br />
*Документация по макросу %catalog getObjectList()% [http://dev.docs.umi-cms.ru/spravochnik_makrosov_umicms/katalog/catalog_getobjectslist/]<br />
*Документация по макросу %catalog search()% [http://dev.docs.umi-cms.ru/spravochnik_makrosov_umicms/katalog/catalog_search/]<br />
*Документация по протоколу USel [http://dev.docs.umi-cms.ru/shablony_i_makrosy/xslt-shablonizator_umi_cms/vyborki_iz_bd_protokol_usel/]<br />
*Документация по Selector [http://api.docs.umi-cms.ru/spravochnik_po_klassam_yadra_umicms/vyborki/selector/]<br />
*Документация по классу umiHierarchyElement [http://api.docs.umi-cms.ru/spravochnik_po_klassam_yadra_umicms/model_ierarhii/umihierarchyelement/]<br />
*Конструкция foreach [http://www.php.net/manual/ru/control-structures.foreach.php]<br />
*css свойство display [http://htmlbook.ru/css/display]<br />
*Правильные show/hide/toggle [http://javascript.ru/ui/show-hide-toggle]</div>
Mad grant