1

data-inline="true"JQuery モバイルでボタン タイプを使用する方法を教えてください。

例えば： <button type="submit" data-inline="true" data-theme="b">Save</button>

私が試したところ、機能せず、アンカータグでのみ機能しています。

例えば：<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

4

4 に答える 4

4

グリッドを使用して実行できますが、入力ボックスとボタンの間に常に大きなギャップがあるため、そのソリューションは見栄えがよくありません。

それから別の方法があります。小さな css を使用して、すべてをより滑らかに見えるように変更できます。

作業例: http://jsfiddle.net/Gajotres/cbWHm/

HTML : 

<!-- FIRST SOLUTION -->

<div id="hidden-wrapper">
    <input type="text" name="name" data-inline="true" id="basic" value=""  /> 
    <button type="reset" data-inline="true" data-theme="b">Reset</button>
</div>

<!-- SECOND SOLUTION -->

<div id="hidden-wrapper2">
    <div id="text-container">
        <input type="text" name="name" data-inline="true" id="basic" value=""  /> 
    </div>
    <div id="btn-container">
        <button type="reset" data-inline="true" data-theme="b">Reset</button>
    </div>        
</div>

CSS : 

/* FIRST SOLUTION */
#hidden-wrapper .ui-input-text {
   width: 68% !important;
    display: inline-block !important;
}

#hidden-wrapper .ui-btn {
   width: 19% !important;
}

/* SECOND SOLUTION */

#text-container, #btn-container {
    display: inline-block;
    height: 40px;
}

#text-container {
    width: 70%;     
}

#btn-container {
    width: 28%;  
}

#btn-container .ui-btn {
    margin-top: -9px !important;
    width: 100% !important;
}

ボタンの幅だけに注意する必要があります。この例は、現在のボタンに対応するように作成されています。それ以外の場合は、最初と 2 番目の CSS スタイルの幅を変更します。

2 番目の解決策は、おそらく最良の解決策です。

于 2013-04-04T08:13:45.670 に答える
3

を使用した別の例を次に示しgridsます。グリッドは、レスポンシブであるため、このような場合に役立ちます。向きが変わっても心配する必要はありません。

デモ

マークアップ

<div class="ui-grid-a">
 <div class="ui-block-a">
  <input type="text" name="" value="" />
 </div>
 <div class="ui-block-b">
    <button type="reset" data-theme="b">Reset</button>
 </div>
</div>

CSS

.ui-block-b {
 width: 25% !important;
}
.ui-block-a {
 width: 75% !important;
 padding-top: 3px !important; // to push down input box.
}
于 2013-04-04T08:46:58.930 に答える
1

アップデート

data-inline 属性を使用して、ボタンとテキスト入力を同じ行に混在させることはできません。

代わりにGrids を使用してください。

<div class="ui-grid-a">
    <div class="ui-block-a"><input type="text" name="name" data-inline="true" id="basic" value=""  /> </div>
    <div class="ui-block-b" align="right"><button type="reset" data-inline="true" data-theme="b">Reset</button></div>
</div>

http://jsfiddle.net/mayooresan/ewaBd/1/で利用可能なライブ フィドルの例

古い答え

<button type="submit" data-inline="true" data-theme="b">Save</button> 
<button type="submit" data-inline="true" data-theme="b">Rest</button>

うまく機能しています。

これをチェックしてくださいLive fiddle http://jsfiddle.net/mayooresan/BFWvG/

于 2013-04-04T06:09:36.883 に答える
0

スタイルは正常に機能しています。@MayuMayooresan のフィドルを確認してください。次のようにします。

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

見てください：http://jsfiddle.net/BFWvG/3/

于 2013-04-04T06:22:33.087 に答える