Как сгенерировать случайный выбор HTML с помощью xslt - PullRequest
1 голос
/ 30 августа 2010

Я использую XSLT и XML для генерации моего HTML.

У меня ниже XML.

1) destinationTabs.xml

<?xml version="1.0"?>
<list type="Tabs">
<tab id="594978-64" title="Overview" url="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx" />
<tab id="597468-64" title="Guide" url="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx" />
<tab id="597348-64" title="Flight Schedule" url="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx" />
<tab id="597238-64" title="Special Offers" url="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx" />
<tab id="597243-64" title="Photos" url="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx" />
</list>

Теперь я хочу создать HTML ниже, используя XSLT.

<ul class="tabHead tabs-nav">
            <li class="tabLeftEnd"></li>            
            <li class="tabs-selected" id="tab-1"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a></li>           
            <li id="tab-2"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a></li>
            <li id="tab-3"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedules</span></a></li>            
            <li id="tab-4"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a></li>           
            <li id="tab-5"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/Photo.aspx"><span>Photos</span></a></li>           
            <li class="tabRightEnd"></li>   
</ul>

Обратите внимание, что это вкладки, которые зависят от номера идентификатора вкладки в destinationTabs.xml, и всякий раз, когда любой пользователь щелкает нужную вкладку, вызывается новая страница, и она также выбирается.

Существует класс "tabs-selected", который отображается при выборе каждой вкладки.

Пожалуйста, предложите!

Ответы [ 2 ]

1 голос
/ 30 августа 2010

Это преобразование :

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="html" omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:param name="pSelectedNo" select="1"/>

 <xsl:template match="/*">
  <ul class="tabHead tabs-nav">
   <li class="tabLeftEnd"></li>
     <xsl:apply-templates/>
   <li class="tabRightEnd"></li>
  </ul>
 </xsl:template>

 <xsl:template match="tab">
  <li id="tab-{position()}">
    <xsl:if test="position() = $pSelectedNo">
      <xsl:attribute name="class">tabs-selected</xsl:attribute>
    </xsl:if>
    <a href="{@url}"><span><xsl:value-of select="@title"/></span></a>
  </li>
 </xsl:template>
</xsl:stylesheet>

при применении к предоставленному документу XML :

<list type="Tabs">
    <tab id="594978-64" title="Overview"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx" />
    <tab id="597468-64" title="Guide"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx" />
    <tab id="597348-64" title="Flight Schedule"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx" />
    <tab id="597238-64" title="Special Offers"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx" />
    <tab id="597243-64" title="Photos"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx" />
</list>

дает желаемый, правильный результат :

<ul class="tabHead tabs-nav">
   <li class="tabLeftEnd"></li>
   <li id="tab-1" class="tabs-selected"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a></li>
   <li id="tab-2"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a></li>
   <li id="tab-3"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedule</span></a></li>
   <li id="tab-4"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a></li>
   <li id="tab-5"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx"><span>Photos</span></a></li>
   <li class="tabRightEnd"></li>
</ul>
0 голосов
/ 30 августа 2010

Эта таблица стилей:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="list">
        <ul class="tabHead tabs-nav">
            <li class="tabLeftEnd"></li>
            <xsl:apply-templates/>
            <li class="tabRightEnd"></li>
        </ul>
    </xsl:template>
    <xsl:template match="tab">
        <li id="tab-{position()}">
            <a href="{@url}">
                <span>
                    <xsl:value-of select="@title"/>
                </span>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>

Выход:

<ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li id="tab-1">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx">
            <span>Overview</span>
        </a>
    </li>
    <li id="tab-2">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx">
            <span>Guide</span>
        </a>
    </li>
    <li id="tab-3">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx">
            <span>Flight Schedule</span>
        </a>
    </li>
    <li id="tab-4">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx">
            <span>Special Offers</span>
        </a>
    </li>
    <li id="tab-5">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx">
            <span>Photos</span>
        </a>
    </li>
    <li class="tabRightEnd"></li>
</ul>

Примечание : о @class: необходимо передать параметр в таблицу стилей, с помощью javascript или с помощью метаданных в восстановленном ресурсе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...