collapse для списка информационных элементов

24 апреля 2015 г.

Такая задачка появилась, скрывать все элементы после 6-го в выдаче, сообразил такой xsl шаблон

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
    <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
        
        <xsl:template match="/">
            <div class="container">
                <div class="row">
                    <div class="services__list">
                        <xsl:apply-templates select="/informationsystem/informationsystem_item" />
                    </div>
                </div>
            </div>
        </xsl:template>
        <xsl:template match="informationsystem_item">

                
                <xsl:if test="position() = 7">
                        </div>
                        <div id="services__more" class="services__more collapse">
                    <div class="services__list">
                </xsl:if>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon">
                            <img src="{url}{image_large}" alt="{item_name}" class="img-circle" />
                        </div>
                        <h3 class="services__header">
                            <xsl:value-of disable-output-escaping="yes" select="name" />
                        </h3>
                    </div>
                
                <xsl:if test="position() > 7 and position = last()">
                            </div>
                        </div>
                        <div class="services__all-btn">
                            <button data-toggle="collapse" data-target="#services__more" aria-expanded="false" aria-controls="services__more" class="services__btn button button-light--dark-border">Все услуги</button>
                </xsl:if>
    </xsl:template>
</xsl:stylesheet>

в оригинале должен получится такой код

<section class="services">
        <div class="container">
            <div class="row">
                <div class="services__list">
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon"><img src="../img/services/ginekologiya.png" alt="Гинекология" class="img-circle"></div>
                        <h3 class="services__header">Гинекология</h3>
                    </div>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon services__icon__pct"></div>
                        <h3 class="services__header">Проктология</h3>
                    </div>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon services__icon__uro"></div>
                        <h3 class="services__header">Урология</h3>
                    </div>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon services__icon__gstr"></div>
                        <h3 class="services__header">Гастроэнтерология</h3>
                    </div>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon services__icon__pdtr"></div>
                        <h3 class="services__header">Педиатрия</h3>
                    </div>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon services__icon__edsc"></div>
                        <h3 class="services__header">Эндоскопия</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="services__more" class="services__more collapse">
                    <div class="services__list">
                        <div class="services__item col-md-4 col-sm-4 col-xs-6">
                            <div class="services__icon"><img src="../img/services/ginekologiya.png" alt="Гинекология" class="img-circle"></div>
                            <h3 class="services__header">Гинекология</h3>
                        </div>
                        <div class="services__item col-md-4 col-sm-4 col-xs-6">
                            <div class="services__icon services__icon__pct"></div>
                            <h3 class="services__header">Проктология</h3>
                        </div>
                        <div class="services__item col-md-4 col-sm-4 col-xs-6">
                            <div class="services__icon services__icon__uro"></div>
                            <h3 class="services__header">Урология</h3>
                        </div>
                        <div class="services__item col-md-4 col-sm-4 col-xs-6">
                            <div class="services__icon services__icon__gstr"></div>
                            <h3 class="services__header">Гастроэнтерология</h3>
                        </div>
                        <div class="services__item col-md-4 col-sm-4 col-xs-6">
                            <div class="services__icon services__icon__pdtr"></div>
                            <h3 class="services__header">Педиатрия</h3>
                        </div>
                        <div class="services__item col-md-4 col-sm-4 col-xs-6">
                            <div class="services__icon services__icon__edsc"></div>
                            <h3 class="services__header">Эндоскопия</h3>
                        </div>
                    </div>
                </div>
                <div class="services__all-btn">
                    <button data-toggle="collapse" data-target="#services__more" aria-expanded="false" aria-controls="services__more" class="services__btn button button-light--dark-border">Все услуги</button>
                </div>
            </div>
        </div>
    </section>

, но ругается на незакрытые тэги, ГУРУ, подскажите решение, если кто знает

P.S. Через JS/JQ знаю как решить, интересует именно посредством hostcms

24 апреля 2015 г.

Re: collapse для списка информационных элементов

alexey_corenet,
теги изображений не закрыты

HostDev.pw - модули для HostCMS, Telegram: @hostdev

24 апреля 2015 г.

Re: collapse для списка информационных элементов

Как же не закрыты? В xsl

что еще не так? Ошибок масса... Примером скрытия в коллапс слой не поделитесь?

24 апреля 2015 г.

Re: collapse для списка информационных элементов

Попробуйте так написать div-ы в условиях

<xsl:if .. > <div> </div> </xsl:if>

skype: mcross82

24 апреля 2015 г.

Re: collapse для списка информационных элементов

попробовал написать так

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
    <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
        
        <xsl:template match="/informationsystem">
            <div class="container">
                <div class="row">
                    <div class="services__list">
                        <xsl:apply-templates select="informationsystem_group" />
                    </div>
                </div>
            </div>
        </xsl:template>
        <xsl:template match="informationsystem_group" group="groups">

                
                <xsl:if test="position() = 7">
                        </div>
                        <div id="services__more" class="services__more collapse">
                    <div class="services__list">
                </xsl:if>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon">
                            <img src="{url}{image_large}" alt="{item_name}" class="img-circle" />
                        </div>
                        <h3 class="services__header">
                            <xsl:value-of disable-output-escaping="yes" select="name" />
                        </h3>
                    </div>
                
                <xsl:if test="position() > 7 and position = last()">
                            </div>
                        </div>
                        <div class="services__all-btn">
                            <button data-toggle="collapse" data-target="#services__more" aria-expanded="false" aria-controls="services__more" class="services__btn button button-light--dark-border">Все услуги</button>
                </xsl:if>
    </xsl:template>
</xsl:stylesheet>

ошибки нет, но тэги текстом выводятся, не как разметка

24 апреля 2015 г.

Re: collapse для списка информационных элементов

alexey_corenet, поробуйте так:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
    <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
        
        <xsl:template match="/informationsystem">
            <div class="container">
                <div class="row">
                    <div class="services__list">
                        <xsl:apply-templates select="informationsystem_group" />
                    </div>
                </div>
            </div>
        </xsl:template>
        <xsl:template match="informationsystem_group" group="groups">

                
                <xsl:if test="position() = 7">
               <xsl:text disable-output-escaping="yes">
                     </div>
                     <div id="services__more" class="services__more collapse">
                  <div class="services__list">
               </xsl:text>
                </xsl:if>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon">
                            <img src="{url}{image_large}" alt="{item_name}" class="img-circle" />
                        </div>
                        <h3 class="services__header">
                            <xsl:value-of disable-output-escaping="yes" select="name" />
                        </h3>
                    </div>
                
                <xsl:if test="position() > 7 and position = last()">
               <xsl:text disable-output-escaping="yes">
                            </div>
                        </div>
                        <div class="services__all-btn">
                            <button data-toggle="collapse" data-target="#services__more" aria-expanded="false" aria-controls="services__more" class="services__btn button button-light--dark-border">Все услуги</button>
               </xsl:text>
            </xsl:if>
    </xsl:template>
</xsl:stylesheet>

skype: mcross82

25 апреля 2015 г.

Re: Re: collapse для списка информационных элементов

Благодарю Вас! Все отлично работает.

один момент только поправил еще, в нижней части ошибка, position без () написал

Итак, годный xsl шаблон

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
    <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
        
        <xsl:template match="/informationsystem">
            <div class="container">
                <div class="row">
                    <div class="services__list">
                        <xsl:apply-templates select="informationsystem_group" />
                    </div>
                </div>
            </div>
        </xsl:template>
        <xsl:template match="informationsystem_group" group="groups">

                
                <xsl:if test="position() = 7">
               <xsl:text disable-output-escaping="yes">
                     </div>
                     <div id="services__more" class="services__more collapse">
                  <div class="services__list">
               </xsl:text>
                </xsl:if>
                    <div class="services__item col-md-4 col-sm-4 col-xs-6">
                        <div class="services__icon">
                            <img src="{dir}{image_small}" alt="{name}" class="img-circle" />
                        </div>
                        <h3 class="services__header">
                            <xsl:value-of disable-output-escaping="yes" select="name" />
                        </h3>
                    </div>
                
                <xsl:if test="position() > 7 and position() = last()">
               <xsl:text disable-output-escaping="yes">
                            </div>
                        </div>
                        <div class="services__all-btn">
                            <button data-toggle="collapse" data-target="#services__more" aria-expanded="false" aria-controls="services__more" class="services__btn button button-light--dark-border">Все услуги</button>
               </xsl:text>
            </xsl:if>
    </xsl:template>
</xsl:stylesheet>

25 апреля 2015 г.

Re: collapse для списка информационных элементов

alexey_corenet,
все проще

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
   <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
      
      <xsl:template match="/informationsystem">
         <div class="container">
            <div class="row">
               <div class="services__list">
                  <xsl:apply-templates select="informationsystem_group[position() < 7]" />
               </div>
               <xsl:if test="informationsystem_group[position() > 6]">
                  <div id="services__more" class="services__more collapse">
                     <div class="services__list">
                        <xsl:apply-templates select="informationsystem_group[position() > 6]" />
                        <div class="services__all-btn"> <button data-toggle="collapse" data-target="#services__more" aria-expanded="false" aria-controls="services__more" class="services__btn button button-light--dark-border">Все услуги</button>
                     </div>
                  </div>
               </xsl:if>
            </div>
         </div>
      </xsl:template>
      <xsl:template match="informationsystem_group" group="groups">

               <div class="services__item col-md-4 col-sm-4 col-xs-6">
                  <div class="services__icon">
                     <img src="{dir}{image_small}" alt="{name}" class="img-circle" />
                  </div>
                  <h3 class="services__header">
                     <xsl:value-of disable-output-escaping="yes" select="name" />
                  </h3>
               </div>
   </xsl:template>
</xsl:stylesheet>

HostDev.pw - модули для HostCMS, Telegram: @hostdev

25 апреля 2015 г.

Re: collapse для списка информационных элементов

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

Авторизация