Eine kurze Analyse des Schreibens von Inline-Schaltflächen und Gruppenschaltflächen in jQuery mobile development_jquery

Inline-Schaltfläche data-inline=true
Standardmäßig werden alle Schaltflächen innerhalb des Hauptinhalts als Elemente auf Blockebene bezeichnet, sodass sie die Breite des Bildschirms ausfüllen.

Wenn Sie jedoch möchten, dass die Schaltfläche kompakt aussieht und die Breite nur zum darin enthaltenen Text und Symbol passt, fügen Sie der Schaltfläche das Attribut data-inline="true" hinzu.

Wenn Sie mehrere Schaltflächen haben, die nebeneinander in derselben Zeile liegen sollen, legen Sie das Attribut data-inline="true" für jede Schaltfläche fest. Dadurch wird die Schaltfläche so gestaltet, dass sie der Breite ihres Inhalts entspricht, und die Schaltfläche wird so verschoben, dass sie in derselben Zeile liegt.

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

Fügen Sie data-mini="true" hinzu, um eine kompaktere Version der Inline-Schaltfläche zu erstellen:

<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</a>

Gruppenschaltfläche data-role=controlgroup
Manchmal möchten Sie eine Gruppe von Schaltflächen in einem separaten Container unterbringen, damit sie wie ein separates Navigations-Widget aussehen. Sie können eine Gruppe von Schaltflächen in einen Container einschließen und dann das Attribut data-role="controlgroup" zum Container hinzufügen. JQuery Mobile erstellt eine vertikale Schaltflächengruppe, löscht den Rand und den Schatten zwischen den Schaltflächen und fügt dann nur die hinzu first Die ersten und letzten Schaltflächen haben abgerundete Ecken, sodass sie wie eine Gruppe von Schaltflächen aussehen.

<div data-role="controlgroup">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Horizontal anordnen data-type="horizontal"

Standardmäßig werden die Gruppenschaltflächen als vertikale Liste angezeigt. Wenn Sie dem Container das Attribut data-type="horizontal" hinzufügen, kann es in eine Liste horizontaler Schaltflächen umgewandelt werden um eins und legen Sie fest, dass es nur so groß ist, dass es in die Breite des Inhalts passt. ((Achten Sie also darauf, nicht zu viele Schaltflächen oder zu viele Wörter auf den Schaltflächen im horizontalen Layout zu haben)

<div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Mini-Version data-mini="true"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Nur ​​Symbol data-iconpos="notext"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>