jQuery Mobile Listen

Ein beliebtes Mittel zur Gestaltung von Webseiten sind Listen. Sie werden nicht nur für unnummerierte und nummerierte Aufzählungen genutzt, sondern bilden sehr häufig auch die Grundlage für Navigationen. Auch jQuery Mobile nutzt derartige Listenstrukturen ausgiebig.

Grundformen der Listen und Verschachtelungen

Grundlage für eine Liste ist data-role="listview". Das erste Beispiel ist ganz unspektakulär, sowohl was den Quellcode als auch das sichtbare Ergebnis betrifft. Letzterer sieht so aus:

<div data-role="page"  data-position="fixed">
  <div data-role="header"   data-position="fixed" data-theme="f">
    <h1>Listen</h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" rel="external">Home</a>
  </div><!-- Ende header -->
  <div data-role="content">
    <ul data-role="listview">
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    </ul>
  </div><!-- Ende content -->
  <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="c">
    <p>Der Footer ist einfach nur so hier</p>
  </div>
</div><!-- Ende page -->

Dieser Code enthält, abgesehen von bereits genannten data-role="listview" keinerlei Besonderheiten. Man kann am Stelle des ul-Tags für ungeordnete Listen natürlich auch geordnete Listen (ol-Tag) verwenden. Dann steht vor jedem Listenpunkt eine Ziffer.

Wenn man in einen Listenpunkt eine Link einfügt, dann erscheint automatisch recht ein Icon.

In einen Listview-li-Tag können weitere Tags, z.B. Überschriften, p-Tags usw. eingefügt werden.

Schließlich kann man Listen auch noch Verschachteln. Dabei ist die Unterebene nicht zu sehen. Diese wird erst wie nach einem Seitenwechsel sichtbar, wenn die darüber liegende Ebene angeklickt wird.

Schauen wird uns diese vierListen einmal an: Erstes Listen Demo ansehen

Dazu dann noch einmal der gesamte Quellcode:

<div data-role="page"  data-position="fixed">
  <div data-role="header"   data-position="fixed" data-theme="f">
    <h1>Listen</h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" rel="external">Home</a>
  </div><!-- Ende header -->
  <div data-role="content">
    <!-- Erster Listview, ganz einfach -->
    <ul data-role="listview">
      <li>Erster Punkt</li>
      <li>Zweiter Punkt</li>
    </ul>
    <!-- Zweiter Listview, mit Nummerierung -->
    <ol data-role="listview">
      <li>Erster Punkt</li>
      <li>Zweiter Punkt</li>
    </ol>
    <!-- Dritter Listview, mit Links -->
    <ul data-role="listview">
      <li>Link nach nirgendwo</li>
      <li>Link nach Utopia</li>
    </ul>
    <!-- Vierter Listview, teilweise mit Verschachtelung -->
    <ul data-role="listview">
      <li>
        <h3>Listview-Punkt ohne Verschachtelung</h3>
        <p>In einem Listviewpunkt können sich weitere Tags befinden.</p>
      </li>
      <li>
        <div>Listview-Punkt mit Verschachtelung</div>
        <span class="ui-li-count">3</span>
        <ul>
          <li><a href="demo-01">Demo 1</a></li>
          <li><a href="demo-02-mit-navigation">Demo 2 mit Navigation</a></li>
          <li><a href="demo-03-gridlayout">Demo 3 mit Gridlayout</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- Ende content -->
  <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="c">
    <p>Der Footer ist einfach nur so hier</p>
  </div>
</div><!-- Ende page -->

Listen mit Thumbnails

In diese Listview-Strukturen kann man auch kleine Grafiken integrieren. Ein kompletter Listview-Punkt mit Grafik, Zwischenüebrschrift, Text und Verlinkung sieht so aus:

<li>
  <a href="/projekte-bpgs-ohne-third-level" rel="external">
    <img src="url zum bild" title="Text" alt="Text"/>
    <h3>Design mit Spinnen</h3>
    <p>Das kleine Bildchen zeigt eine Design mit Spinnen</p>
  </a>
</li>

Wie man an diesem Listview Demo mit ThumbNails sieht, kann man auch einzelne Elemente der Standardstruktur weglassen. Die Größe des Thumbnails ist intern durch Voreinstellungen von JQuery Mobile vorgegeben. Der komplette Quellcode des Content-Bereiches des zweiten Listview-Demos sieht so aus:

<div data-role="content">
  <ul data-role="listview">
    <li>
      <img src="url zum bild" title="Text" alt="Text"/>
    </li>
    <li>
      <a href="/projekte-bpgs-ohne-third-level" rel="external">
        <img src="url zum bild" title="Text" alt="Text"/>
        <h3>Design mit Spinnen</h3>
        <p>Das kleine Bildchen zeigt eine Design mit Spinnen</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="url zum bild" title="Text" alt="Text"/>
        <p>Ohne h3-Tag</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h3>Ohne Bild...Achtung, zu langer Text wird abgeschnitten</h3>
        <p>...dafür aber mit langem Text. Manchmal ist länger auch dümmer aber nücht ümmer. Nicht immer ist länger dimmer</p>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="url zum bild" title="Text" alt="Text"/>
        <h3>Ohne p-tag</h3>
      </a>
    </li>
    <li>
      <img src="url zum bild" title="Text" alt="Text"/>
      <h3>Ohne a-Tag</h3>
      <p>...also kein Link</p>
    </li>
  </ul>
</div><!-- Ende content -->

Listen filtern

Listen besitzen bei jQuery Mobile noch eine weitere Eigenschaft, die ihren Einsatz vor allem bei größeren Datenmengen sehr nützlich macht: man kann die Listen filtern. Das ist überhaupt nicht kompliziert, man muss der Liste data-role="listview" lediglich noch data-filter="true" mitgeben. Das Ergebnis sieht dann so aus: Beispiel Listen mit Filter. jQuery Mobile fügt automatisch ein Suchfeld ein. Dort kann man Zeichenfolgen eingeben. jQuery Mobile filtert die nachfolgende Liste automatisch.

Nachdem ich bereits allgemein über das Handling von Seiten mit jQuery Mobile geschrieben habe, möchte ich dieses Thema noch einmal aufgreifen und eine kurze Einführung zu den Dialogen geben, die bei jQ-Mobile eine Spezialform der sind.