Direkt zum Inhalt | Direkt zur Navigation

Benutzerspezifische Werkzeuge

Sie sind hier: Startseite / Tech-Blog / Plone: Mit Diazo eine HTML-Liste in eine Selection verwandeln

Plone: Mit Diazo eine HTML-Liste in eine Selection verwandeln

Wenn mann statt einer HTML-Liste (<ul>) eine Auswahlliste (<select>) benötigt, kann man dies leicht mit Diazo umwandeln, ohne tief ins System eingreifen zu müssen. Im folgenden wird die Aktion anhand eines Beispiels erläutert. Wir wandeln hier ein einfaches flaches Navigations-Portlet von Plone in eine Auswahl-Liste (<select>) um.

Ausgangsstruktur

Das HTML des Portlets, welches nur die Unterordner anzeigt, also aus einer Ebene besteht, sieht wie folgt aus:

<dl class="portlet portletNavigationTree">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
    <a href="http://127.0.0.1:8081/Plone/sitemap" class="tile">SubNavi</a>
    <span class="portletTopRight"></span>
  </dt>

  <dd class="portletItem lastItem">
    <ul class="navTree navTreeLevel0">
      <li class="navTreeItem visualNoMarker navTreeFolderish section-etwas-ueber-plone">
        <a title="" class="state-published navTreeFolderish contenttype-folder"
          href="etwas-ueber-plone">
          <span>Etwas über Plone</span>
        </a>
      </li>
      <li class="navTreeItem visualNoMarker navTreeFolderish section-etwas-ueber-python">
        <a title="" class="state-published navTreeFolderish contenttype-folder"
          href="etwas-ueber-python">
          <span>Etwas über Python</span>
        </a>
      </li>
      <li class="navTreeItem visualNoMarker navTreeFolderish section-etwas-ueber-zope">
        <a title="" class="state-published navTreeFolderish contenttype-folder"
          href="etwas-ueber-zope">
          <span>Etwas über Zope</span>
        </a>
      </li>
    </ul>
     <span class="portletBottomLeft"></span>
     <span class="portletBottomRight"></span>
  </dd>
</dl>

Zielstruktur

Die HTML-Zielstruktur sieht wie folgt aus:

<div id="subNavWrapper">
  <form action="" method="get">
    <select name="subNavSel" size="1">
      <option value="etwas-ueber-plone"Etwas über Plone</option>
      <option value="etwas-ueber-python">Etwas über Python</option>
      <option value="etwas-ueber-zope">Etwas über Zope</option>
    </select>
  </form>
</div>

Diazo-Rules

Diazo-Rules (Regeln) zum umwandeln in die Zielstruktur:

<replace
  content-children="//dl[contains(@class, 'portletNavigationTree') and ./dt/a/text() = 'SubNavi']">

  <select name="subNavSel" size="1">
  <xsl:for-each select=".//ul[contains(@class, 'navTree')]/li/a">
    <option><xsl:attribute
        name="value"><xsl:value-of
          select="./@href" /></xsl:attribute><xsl:copy-of
          select="./span/text()" /></option>
  </xsl:for-each>
  </select>

</replace>
abgelegt unter: ,