jQuery Mobile Listenansicht
jQuery Mobile Listenansicht
Listenansichten in jQuery Mobile sind Standard-HTML-Listen; geordnete (<ol>) und ungeordnete (<ul>).
Listenansichten sind eine leistungsstarke Funktion in jQuery Mobile. Sie machen Standard-Listen (ungeordnet oder geordnet) vielseitiger. Um sie anzuwenden, fügen Sie dem ul- oder ol-Tag das Attribut data-role="listview" hinzu. Fügen Sie in jedem Element (<li>) einen Link hinzu, auf den Benutzer klicken können:
Beispiel
<li><a href="../index.html">Listeneintrag m</a></li>
</ol>
<ul data-role="listview">
<li><a href="../index.html">Listeneintrag</a></li>
</ul>
Selbst ausprobieren »
Die abgerundeten Ecken und Kanten des Listenstils werden mit dem Attribut data-inset="true" festgelegt:
 |
Standardmäßig wird der Link in einem Listeneintrag automatisch zu einer Schaltfläche (data-role="button" ist nicht erforderlich). |
|---|
Listentrenner
Listeneinträge können auch in Listentrenner umgewandelt werden, um die Liste zu organisieren und Listeneinträge zu gruppieren.
Um einen Listentrenner anzugeben, fügen Sie dem <li>-Element des Listeneintrags einfach das Attribut data-role="list-divider" hinzu:
Beispiel
<li data-role="list-divider">Europa</li>
<li><a href="../index.html">Frankreich</a></li>
<li><a href="../index.html">Deutschland</a></li>
</ul>
Selbst ausprobieren »
Wenn Sie eine alphabetisch sortierte Liste haben (zum Beispiel ein Telefonbuch), können Sie sie so konfigurieren, dass automatisch Eintragstrenner über das Attribut data-autodividers="true" auf dem <ol>- oder <ul>-Element generiert werden:
Beispiel
<li><a href="../index.html">Adele</a></li>
<li><a href="../index.html">Agnes</a></li>
<li><a href="../index.html">Billy</a></li>
<li><a href="../index.html">Calvin</a></li>
...
</ul>
Selbst ausprobieren »
|
data-autodividers="true" kann so konfiguriert werden, dass automatisch Elementtrenner generiert werden. Standardmäßig ist der erzeugte Trennertext der erste Großbuchstabe des Listenelementtexts. |
|---|
Weitere Beispiele
Wie man eine Liste ohne Links erstellt (sie wird keine Schaltfläche sein und nicht anklickbar sein).
Wie man Panels in eine Liste einfügt