jQuery モバイル開発_jquery でのインライン ボタンとグループ ボタンの記述の簡単な分析

インラインボタン data-inline=true
デフォルトでは、本文コンテンツ内のすべてのボタンはブロックレベル要素と呼ばれるため、画面の幅いっぱいに表示されます。

ただし、ボタンをコンパクトに見せ、幅が内部のテキストとアイコンのみに収まる場合は、ボタンに data-inline="true" 属性を追加します。

同じ行に複数のボタンを並べて配置する必要がある場合は、各ボタンに data-inline="true" 属性を設定します。これにより、コンテンツの幅に合わせてボタンのスタイルが設定され、ボタンが同じ行に配置されるようにボタンがフローティングされます。

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

data-mini="true" を追加して、インライン ボタンのよりコンパクトなバージョンを作成します。

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

グループボタン data-role=controlgroup
場合によっては、ボタンのグループを別のコンテナに配置して、別のナビゲーション ウィジェットのように見せたいことがあります。ボタンのグループをコンテナーにラップし、 data-role="controlgroup" 属性をコンテナーに追加すると、Jquery Mobile は垂直ボタン グループを作成し、ボタン間のマージンとシャドウを削除して、 first 最初と最後のボタンは角が丸く、ボタンのグループのように見えます。

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

水平方向に配置 data-type="horizo​​ntal"

デフォルトでは、グループボタンは縦方向のリストとして表示されますが、コンテナに data-type="horizo​​ntal" 属性を追加すると、ボタンが横方向に 1 つずつ配置されるリストに変換できます。 1 つずつ増やして、コンテンツの幅に合わせて十分な大きさのみを設定します。 ((したがって、横型レイアウトではボタンが多すぎたり、ボタン上の単語が多すぎたりしないように注意してください)

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

ミニバージョン 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>

アイコンのみ data-conpos="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>