Benutzer-Werkzeuge

Webseiten-Werkzeuge


webedition:code-examples:displaying-document-contents-in-tabs-yui

Dokumenteninhalt in Karteireitern darstellen (Yahoo! UI Library)

Das folgende Beispiel zeigt Ihnen, wie Sie Informationen auf einer webEdition-Seite mit Hilfe von Karteireitern darstellen können. Der Redakteur bestimmt dabei selber, wie viele Karteireiter es geben soll, welche Beschriftung und welchen Inhalt die Karteireiter haben sollen. Zusätzlich kann der Redakteur angeben, welcher Karteireiter beim Laden der Seite ausgewählt sein soll.

Für die Darstellung wird die Yahoo! User Interface Library (YUI) verwendet.

Die Funktionalität der Karteireiter wird über JavaScript realisiert. Ist beim Besucher der Webseite JavaScript im Browser deaktiviert, werden die Karteireiter als Liste dargestellt. In jedem Listeneintrag befindet sich ein Anker-Link, mit dem der Besucher der Webseite zu dem dazugehörigen Inhalt springen kann.

Screenshot

Demo

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <we:title></we:title>
    <we:description/>
    <we:keywords/>
    <we:charset defined="UTF-8">UTF-8</we:charset>
    <we:ifEditmode>
      <!--
        Dieses CSS-Definitionen dienen dazu, Formatierung innerhalb
        der Ansicht "Bearbeiten" für den Redakteur durchzuführen.
      -->
      <style type="text/css">
        .editmode {
          color: #FF0000;
        }
 
        .editmode-block {
          padding: 10px;
          margin: 5px 0 10px 0;
          border: 1px solid #006DB8;
        }
      </style>
    </we:ifEditmode>
    <we:ifNotEditmode>
      <style type="text/css">
        html {
          font-family: arial;
          font-size: .8em;
          color: #000000;
        }
 
        a {
          color: #000000;
        }
      </style>
 
      <!-- Yahoo! User Interface Library (YUI) -->
        <!-- Dependencies -->
        <!-- Sam Skin CSS for TabView -->
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/tabview/assets/skins/sam/tabview.css" />
 
        <!-- JavaScript Dependencies for Tabview: -->
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
 
        <!-- Source file for TabView -->
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/tabview/tabview-min.js"></script>
      <!-- /Yahoo! User Interface Library (YUI) -->
 
    </we:ifNotEditmode>
  </head>
 
  <body class="yui-skin-sam">
 
    <we:ifEditmode>
      <div class="editmode">Seiten-Überschrift</div>
    </we:ifEditmode>
    <h1><we:input type="text" name="Headline" size="50"/></h1>
 
    <!--
      Dieser Bereich ist nur für den Redakteur innerhalb
      der Ansicht Bearbeiten sichtbar.
      Er dient nur der Eingabe.
    -->
    <we:ifEditmode>
      <we:block name="Content">
        <div class="editmode-block">
          <span class="editmode">Ausgewählter Tab beim Laden der Seite: </span>
          <we:input type="checkbox" name="Selected"/> <span class="editmode">ja</span>
          <br /><br />
          <div class="editmode">Tab-Überschrift</div>
          <we:input type="text" name="Headline" size="30"/>
          <br /><br />
          <div class="editmode">Text</div>
          <we:textarea wysiwyg="true" name="Text" width="600" height="200" inlineedit="false"/>
        </div>
      </we:block>
    </we:ifEditmode>
 
    <!-- Dieser Bereich ist nicht in der Ansicht Bearbeiten sichtbar. -->
    <!-- Er dient nur der Ausgabe. -->
    <we:ifNotEditmode>
      <div id="tabs" class="yui-navset">
        <!-- TABS -->
          <ul class="yui-nav">
            <we:block name="Content">
              <li<we:ifNotEmpty match="Selected"> class="selected"</we:ifNotEmpty>>
                <a href="#tab<we:position type="block" format="1" reference="Content"/>">
                  <em>
                    <we:var type="document" name="Headline" htmlspecialchars="true"/>
                  </em>
                </a>
              </li>
            </we:block>
          </ul>
        <!-- /TABS -->
 
        <!-- TAB-INHALT -->
          <div class="yui-content">
            <we:block name="Content">
              <div id="tab<we:position type="block" format="1" reference="Content"/>">
                <we:var type="document" name="Text"/>
              </div>
            </we:block>
          </div>
        <!-- /TAB-INHALT -->
      </div>
 
      <script type="text/javascript">
        // Build a TabView from markup
        var tabView = new YAHOO.widget.TabView('tabs');
      </script>
    </we:ifNotEditmode>
 
  </body>
</html>

Weiterführende Informationen

webedition/code-examples/displaying-document-contents-in-tabs-yui.txt · Zuletzt geändert: 2015/12/22 16:39 von Marc Krämer

Recent changes RSS feed