1

谁能告诉我如何使用data-inline="true"JQuery mobile 中的按钮类型？

例如： <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;
}

你只需要关心按钮的宽度，这个例子是为了适应你当前的按钮。在任何其他情况下，修改第一个和第二个 css 样式宽度。

第二种解决方案可能是最好的解决方案。

于 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 的小提琴，但如果你想href 正在努力；像这样做：

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