Question

我尝试使用右侧有按钮的列表项创建列表视图。就像jQuery Mobile拆分按钮列表视图一样，但只有正确的按钮应该是可点击的。左侧部分应包含标签和文本输入。

我找到了这个答案：https://stackoverflow.com/a/15292521/2026623

但是在jQuery mobile 1.4.0中删除/重命名了这个答案中使用的类。我发现有些属性现在是.ui-btn-a但不是全部。

所以我自己尝试实现它（对CSS知之甚少）。这是它到目前为止的样子：

HTML：

<li class="readonly-li-a">
    <a class="readonly-btn-a ui-field-contain">
        <label for="boss">Boss:</label>
        <input type="text" id="boss" name="boss">
    </a>
    <a data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext"></a>
</li>

CSS：

.readonly-btn-a {
    background: #fff!important /*{a-bup-background-color}*/;
    color: #333!important /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
    cursor: default !important; /* don't change to hand cursor */
    border: none !important;
}

.readonly-li-a {
    border: 0 solid #ddd !important;
    border-top-width: 1px !important; /*the line above the li */
    padding: .7em 1em !important; /*copied from .ui-li-static */
    background: #fff!important; /*white background instead of grey*/
    margin: 0 1px!important; /*the li stands out by 1px left/right without this*/
    -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/      rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
    -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/         rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
    box-shadow: 0 1px 3px /*{global-box-shadow-size}*/              rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
}

这就是它的行动： http://jsfiddle.net/MasterQuestMaster/QJ9m2/

此解决方案存在两个问题，我希望有人可以帮我解决。

如果您输入文本字段，蓝色光泽将被切断 -Tag的边界。我认为这是因为我添加了填充到.readonly-li-a。
文本输入未正确对齐（虽然标签是

或许有人甚至在我面前试过这个并找到了更好的解决方案。如果是，请发布。

Answer 1

你必须使用jQuery mobile进行样式设计吗？如果您将data-role ='none'分配给输入框并在CSS中单独设置样式，则可能会更容易。我在项目上做到这一点只是因为试图让jQuery mobile行为有点困难。

Answer 2

标记略有变化，我相信你可以用2个CSS规则来做到这一点。现有的ui-li-static和ui-body-inherit类负责LI，所以你只需要一个边距规则来排列输入和readonly-btn-a的类：

<ul data-role="listview" data-inset="true">
    <li>
        <div class="ui-field-contain">
            <label>Normal:</label>
            <input type="text" id="normal" name="normal"/>
        </div>
    </li>
    <li class="ui-li-static ui-body-inherit">
        <a href="#" class="readonly-btn-a" >
            <div class="ui-field-contain">
                <label>Link:</label>
                <input type="text" id="link" name="link"/>
            </div>
        </a>
        <a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-inline"></a>
    </li>
    <li>
        <div class="ui-field-contain">
            <label>Normal:</label>
            <input type="text" id="normal2" name="normal2"/>
        </div>
    </li>
</ul>

li .ui-field-contain {
    margin-right: 42px; !important;
}
.readonly-btn-a {
    background:             #fff!important /*{a-bup-background-color}*/;
    color:                  #333!important /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
    cursor: default !important;
    border: none !important;
    padding: 0 !important;
    margin: 0!important;
}

以下是更新的 FIDDLE （基于杰夫的好回答）

更新：为了减少LI元素中的填充，添加：

.ui-listview>.ui-li-static {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

更新了 DEMO

jQuery Mobile 1.4.0分割按钮，右键只有CSS

2 个答案: