jQuery モバイル開発_jquery でのインラインボタンとグループボタンの記述の簡単な分析-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:27:29

オリジナル

1495 人が閲覧しました

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

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

2015124160046088.jpg (818×88)

同じ行に複数のボタンを並べて配置する必要がある場合は、各ボタンに 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>

ログイン後にコピー

2015124160112596.jpg (822×91)

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

2015124160130770.jpg (824×60)

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

ログイン後にコピー

2015124160156830.jpg (823×86)

グループボタン 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>

ログイン後にコピー

2015124160223090.jpg (821×146)

水平方向に配置 data-type="horizontal"

デフォルトでは、グループボタンは縦方向のリストとして表示されますが、コンテナに data-type="horizontal" 属性を追加すると、ボタンが横方向に 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>

ログイン後にコピー

2015124160427751.jpg (829×71)

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

ログイン後にコピー

2015124160450552.jpg (815×64)

アイコンのみ 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>

ログイン後にコピー

2015124160513451.jpg (822×55)