Analisis ringkas tentang penulisan butang sebaris dan butang kumpulan dalam jQuery mobile development_jquery

Data butang sebaris-sebaris=true
Secara lalai, semua butang dalam kandungan badan dipanggil elemen peringkat blok, jadi ia memenuhi lebar skrin.

Walau bagaimanapun, jika anda mahu butang kelihatan padat dan lebarnya hanya sesuai dengan teks dan ikon di dalamnya, kemudian tambahkan atribut data-inline="true" pada butang.

Jika anda mempunyai berbilang butang yang sepatutnya terletak bersebelahan pada baris yang sama, tetapkan atribut data-inline="true" untuk setiap butang. Ini akan menggayakan butang untuk menjadi lebar kandungannya dan mengapungkan butang supaya mereka duduk dalam baris yang sama.

<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>

Tambah data-mini="true" untuk mencipta versi butang sebaris yang lebih padat:

<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>

Kumpulan butang data-role=controlgroup
Kadangkala, anda ingin meletakkan sekumpulan butang ke dalam bekas yang berasingan supaya ia kelihatan seperti widget navigasi yang berasingan. Anda boleh membungkus sekumpulan butang dalam bekas, dan kemudian menambah atribut data-role="controlgroup" pada bekas Jquery Mobile akan membuat kumpulan butang menegak, memadamkan jidar dan bayangan antara butang, dan kemudian hanya menambah pertama Butang pertama dan terakhir mempunyai bucu bulat, menjadikannya kelihatan seperti sekumpulan butang.

<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>

Susun secara mendatar data-type="horizontal"

Secara lalai, butang kumpulan dipaparkan sebagai senarai menegak Jika anda menambah atribut data-type="horizontal" pada bekas, ia boleh ditukar menjadi senarai butang mendatar dengan satu dan set Hanya cukup besar untuk memuatkan lebar kandungan. ((Jadi berhati-hati untuk tidak mempunyai terlalu banyak butang atau terlalu banyak perkataan pada butang dalam susun atur mendatar)

<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>

Versi mini 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>

Ikon sahaja 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>