VPF::Проблема с постраничной навигацией

Anna87

Дата 23.6.2012, 01:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.2.2012

Репутация: нет
Всего: нет

Привет всем! Столкнулась с проблемой постраничной навигации. Вывожу контент через табы, пытаюсь с помощью плагина easypaginate добавить постраничную навигацию
входящий документ (xml):

Код


<categories>
    <category title="big" id="big">
        <images>
        <image filename="images/orange.png"/>
            <image filename="images/grey.png"/>
            <image filename="images/blue.png"/>
        </images>
    </category>
     <category title="small" id="small">
        <images>
            <image filename="images/th_orange.png"/>
            <image filename="images/th_grey.png"/>
        <image filename="images/th_grey.png"/>
        <image filename="images/th_grey.png"/>
            <image filename="images/th_blue.png"/>
        </images>
    </category>
</categories>

xsl преобразование

Код


<div id="tabs">
    <ul>
     <xsl:for-each select="/categories/category"><li><a href="#{@id}"><xsl:value-of select="@title"/></a></li></xsl:for-each>
    </ul>
    <xsl:for-each select="/categories/category">
     <xsl:variable name="idcurrent" select="@id"/>
       <div id="{@id}">
      <ul id="items">
            <xsl:for-each select="../category[@id = $idcurrent]/images/image">
                <li>  <img src="{@filename}"/></li>
            </xsl:for-each>
        </ul>
       </div>
    </xsl:for-each>
</div>

далее если прописывать чтоб на одной странице выводилось одно изображение, т.е.

Код


jQuery(function($){
                $('ul#items').easyPaginate({
                    step:1
                });
            });

в итоге получается, что на двух вкладках одинаковое количество страниц 1 2 3 4 5 6 7 8 Next, т.е. считает все <image> не зависимо от категории, скрин можно посмотреть здесь http://s2.ipicture.ru/uploads/20120623/16nS37H3.png

хотелось бы чтобы на первой вкладке было 3 страницы(теги <image> из категории "big", т.е. 1 2 3 Next) , на второй 5 страниц (из категории "small" т.е. 1 2 3 4 5 Next), подскажите плз как правильно должно выглядеть xsl преобразование

diadiavova

Дата 23.6.2012, 10:48 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5820
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 22
Всего: 142

Anna87, ты здесь описываешь какие-то табы, хотя непонятно как они у тебя должны создаваться. То, что ты привела дает следующий вывод

Код


    <div id="tabs">
      <ul>
        <li><a href="#big">big</a></li>
        <li><a href="#small">small</a></li>
      </ul>
      <div id="big">
        <ul id="items">
          <li><img src="images/orange.png"></li>
          <li><img src="images/grey.png"></li>
          <li><img src="images/blue.png"></li>
        </ul>
      </div>
      <div id="small">
        <ul id="items">
          <li><img src="images/th_orange.png"></li>
          <li><img src="images/th_grey.png"></li>
          <li><img src="images/th_grey.png"></li>
          <li><img src="images/th_grey.png"></li>
          <li><img src="images/th_blue.png"></li>
        </ul>
      </div>
    </div>

Что в результате преобразования хочешь получить ты?

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

Anna87

Дата 24.6.2012, 00:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.2.2012

Репутация: нет
Всего: нет

Сейчас при использовании плагина разметка выглядит так:

Код


<div id="tabs" class="ui-tabs">
    <ul class="ui-tabs-nav">
     <li class="ui-state-default ui-tabs-selected ui-state-active"><a href="#big">big</a></li>
        <li class="ui-state-default "><a href="#small">small</a></li>
    </ul>
    <div id="big">
        <ul id="items"  class="ui-tabs-panel">
            <li style="display: list-item;"><img src="images/orange.png"></li>
            <li style="display: none;"><img src="images/grey.png"></li>
            <li style="display: none;"><img src="images/blue.png"></li>
        </ul>
        <ol id="pagination">
            <li style="display: none;" class="prev">Previous</li>
            <li class="current" data-index="1">1</li>
            <li data-index="2">2</li>
            <li data-index="3">3</li>
            <li data-index="4">4</li>
            <li data-index="5">5</li>
            <li data-index="6">6</li>
            <li data-index="7">7</li>
            <li data-index="8">8</li>
            <li style="display: list-item;" class="next">Next</li>
        </ol>
    </div>
    <div id="small" class="ui-tabs-panel ui-tabs-hide">
        <ul id="items">
            <li style="display: none;"><img src="images/th_orange.png"></li>
            <li style="display: none;"><img src="images/th_grey.png"></li>
            <li style="display: none;"><img src="images/th_grey.png"></li>
            <li style="display: none;"><img src="images/th_grey.png"></li>
            <li style="display: none;"><img src="images/th_blue.png"></li>
        </ul>
        <ol id="pagination">
            <li style="display: none;" class="prev">Previous</li>
            <li data-index="1">1</li>
            <li data-index="2">2</li>
            <li data-index="3">3</li>
            <li data-index="4">4</li>
            <li data-index="5">5</li>
            <li data-index="6">6</li>
            <li data-index="7">7</li>
            <li data-index="8">8</li>
            <li style="display: list-item;" class="next">Next</li>
        </ol>
    </div>
</div>

скрин изображения можно посмотреть здесь http://s2.ipicture.ru/uploads/20120623/16nS37H3.png , т.е. на каждой из вкладок перечислены все 8 элементов

Код


<ol id="pagination">
            <li style="display: none;" class="prev">Previous</li>
            <li class="current" data-index="1">1</li>
            <li data-index="2">2</li>
            <li data-index="3">3</li>
            <li data-index="4">4</li>
            <li data-index="5">5</li>
            <li data-index="6">6</li>
            <li data-index="7">7</li>
            <li data-index="8">8</li>
            <li style="display: list-item;" class="next">Next</li>
        </ol>

вне зависимости от категории ( 1 2 4 5 6 7 8 Next ), хотелось бы чтобы на каждой из вкладок было то количество элементов <li data-index="i">i</li> которое указано в каждой из категории тега <category title="big" id="big"><images><image/><image/><image/></images></category> соответственно, т.е. разметка должна выглядеть, как мне кажется, следующим образом:

Код


<div id="tabs" class="ui-tabs">
    <ul class="ui-tabs-nav">
     <li class="ui-state-default ui-tabs-selected ui-state-active"><a href="#big">big</a></li>
        <li class="ui-state-default "><a href="#small">small</a></li>
    </ul>
    <div id="big">
        <ul id="items"  class="ui-tabs-panel">
            <li style="display: list-item;"><img src="images/orange.png"></li>
            <li style="display: none;"><img src="images/grey.png"></li>
            <li style="display: none;"><img src="images/blue.png"></li>
        </ul>
        <ol id="pagination">
            <li style="display: none;" class="prev">Previous</li>
            <li class="current" data-index="1">1</li>
            <li data-index="2">2</li>
            <li data-index="3">3</li>
            <li style="display: list-item;" class="next">Next</li>
        </ol>
    </div>
    <div id="small" class="ui-tabs-panel ui-tabs-hide">
        <ul id="items">
            <li style="display: none;"><img src="images/th_orange.png"></li>
            <li style="display: none;"><img src="images/th_grey.png"></li>
            <li style="display: none;"><img src="images/th_grey.png"></li>
            <li style="display: none;"><img src="images/th_grey.png"></li>
            <li style="display: none;"><img src="images/th_blue.png"></li>
        </ul>
        <ol id="pagination">
            <li style="display: none;" class="prev">Previous</li>
            <li data-index="4">1</li>
            <li data-index="5">2</li>
            <li data-index="6">3</li>
            <li data-index="7">4</li>
            <li data-index="8">5</li>
            <li style="display: list-item;" class="next">Next</li>
        </ol>
    </div>
</div>

Пример того что должно получится на первой вкладке http://s1.ipicture.ru/uploads/20120624/do32eiHj.png
На второй - http://s1.ipicture.ru/uploads/20120624/Dw4VsUN6.png

diadiavova

Дата 24.6.2012, 03:06 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5820
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 22
Всего: 142

Цитата(Anna87 @ 24.6.2012, 01:58

)

Сейчас при использовании плагина разметка выглядит так

При чем тут плагин? Если это вопрос по использованию плагина, то его следовало задать в разделе посвященном яваскрипту. Здесь обсуждаются технологии связанные с XML. На данный момент ситуация такова: есть исходный документ, нужно получить некоторый HTML-вывод средствами XSLT, поэтому вопрос только в том, какой результат надо получить. Что с этим результатом будет делать плагин - это уже совсем другой вопрос и совсем для другого раздела.

Цитата(Anna87 @ 24.6.2012, 01:58

)

т.е. разметка должна выглядеть, как мне кажется, следующим образом:

У тебя проблема в 9-ой строке преобразования

Код


../category[@id = $idcurrent]/images/image

Это выражение обходит все элементы category документа, а тебе надо выбирать только текущую категорию. То есть внутренний форич должен обходить просто изображения текущей категории, а у тебя он обходит все

Код


images/image

Этого было бы достаточно. А вообще, преобразование будет выглядеть так, вроде делает что надо.

Код


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output indent="yes" method="html"/>
  <xsl:template match="/">
    <html>
      <body>
        <div id="tabs" class="ui-tabs">
          <xsl:apply-templates select="categories/category"/>
        </div>
      </body>
    </html>
  </xsl:template>


  <xsl:template match="category">
    <div id="{@id}">
      <ul id="items"  class="ui-tabs-panel">
        <xsl:apply-templates select="images" mode="items"/>
      </ul>
      <ol id="pagination">
        <xsl:apply-templates select="images" mode="pagination"/>
      </ol>
    </div>
  </xsl:template>

  <xsl:template match="images" mode="items">
    <xsl:for-each select="image">
      <li style="display: list-item;">
        <xsl:attribute name="style">
          <xsl:choose>
            <xsl:when test="count(preceding-sibling::image) = 0">
              <xsl:text>display: list-item;</xsl:text>
            </xsl:when>
            <xsl:otherwise>
              <xsl:text>display: none;</xsl:text>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:attribute>

        <img src="{@filename}"/>
      </li>
    </xsl:for-each>
  </xsl:template>

  <xsl:template match="images" mode="pagination">
    <li style="display: none;" class="prev">Previous</li>
    <xsl:for-each select="image">
      <xsl:variable name="index" select="count(preceding-sibling::image)"/>
      <li data-index="{$index + 1}">
        <xsl:if test="$index = 0">
          <xsl:attribute name="class">current</xsl:attribute>
        </xsl:if>
        <xsl:value-of select="$index + 1"/>
      </li>
    </xsl:for-each>
    <li style="display: list-item;" class="next">Next</li>
  </xsl:template>

</xsl:stylesheet>

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

Anna87

Дата 25.6.2012, 01:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.2.2012

Репутация: нет
Всего: нет

Да вопрос был именно в том как настроить фильтрацию по категории в разметке

Код


<div id="tabs">
    <ul>
     <xsl:for-each select="/categories/category"><li><a href="#{@id}"><xsl:value-of select="@title"/></a></li></xsl:for-each>
    </ul>
    <xsl:for-each select="/categories/category">
     <xsl:variable name="idcurrent" select="@id"/>
       <div id="{@id}">
      <ul id="items">
            <xsl:for-each select="../category[@id = $idcurrent]/images/image">
                <li>  <img src="{@filename}"/></li>
            </xsl:for-each>
        </ul>
       </div>
    </xsl:for-each>
</div>

я пыталась это сделать ../category[@id = $idcurrent] либо ../category[@id = current()/@id],
подскажите пожалуйста, как правильно сделать фильтрацию по текущей категории

diadiavova

Дата 25.6.2012, 10:01 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5820
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 22
Всего: 142

Цитата(Anna87 @ 25.6.2012, 02:07

)

Да вопрос был именно в том как настроить фильтрацию по категории в разметке

Ну у тебя ведь все фильтруется. Я в первом посте опубликовал результат преобразования, который получается из того, что было представлено в топикстарте. Другой вопрос, что в данном случае фильтрация вообще не нужна, достаточно в фориче брать элементы текущей категории и результат будет тем же. Я же сразу спросил о том, что в том выводе не так и что хочешь получить ты. Разве там отфильтровано не так, как тебе надо?

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

Anna87

Дата 25.6.2012, 12:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.2.2012

Репутация: нет
Всего: нет

Нет отфильтровано не так как мне надо, выводит нужные элементы <ul id="items"  class="ui-tabs-panel"><li ><img src="images/orange.png"></li>
и все подряд элементы <ol id="pagination"><li data-index="i">i</li> по текущей категории не фильтрует, фильтрацию которую я использовала  ../category[@id = $idcurrent] либо ../category[@id = current()/@id], не привела к нужному результату
элементы <ol id="pagination"><li data-index="i">i</li> генерирует сам плагин easypaginate когда я помещаю элемент вывода в  <ul id="items"><li></li></ul>
Пример того что должно получится на первой вкладке http://s1.ipicture.ru/uploads/20120624/do32eiHj.png
На второй - http://s1.ipicture.ru/uploads/20120624/Dw4VsUN6.png

magelan

Дата 26.6.2012, 11:31 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 7
Всего: 16

может Анна хочет необычного?

Код


<div id="tabs">
    <ul>
     <xsl:for-each select="/categories/category"><li><a href="#{@id}"><xsl:value-of select="@title"/></a></li></xsl:for-each>
    </ul>
    <xsl:for-each select="/categories/category">
     <xsl:variable name="idcurrent" select="@id"/>
       <div id="{@id}">
      <ul id="items">
            <xsl:for-each select="images/image">
                <li>  <img src="{@filename}"/></li>
            </xsl:for-each>
        </ul>
       </div>
    </xsl:for-each>
</div>

Anna87

Дата 26.6.2012, 14:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 20.2.2012

Репутация: нет
Всего: нет

Такое преобразование дает тот же результат

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| XML, XSL \| Следующая тема »