jQuery移动控制组

Question

我有一个包含jQuery-mobile的自定义模板。问题是大多数按钮都在data-role="controlgroup" - 它很好，因为它也调整大小和居中元素，但现在我有桌子，我需要使用一些按钮，因此jQuery mobile尝试显示它在一个圆角的组中。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <table>
            <tr><td></td><td>Name</td><td></td></tr>
            <tr><td>1</td><td>ADS</td><td><a href="#" data-role="button" data-ajax="false">Run</a></td></tr>
            <tr><td>2</td><td>ASDF</td><td><a href="#" data-role="button" data-ajax="false">Run</a></td></tr>
            <tr><td>3</td><td>ASD</td><td><a href="#" data-role="button" data-ajax="false">Run</a></td></tr>
            <tr><td>4</td><td>ASDF</td><td><a href="#" data-role="button" data-ajax="false">Run</a></td></tr>
        </table>
    </fieldset>
</div>

那么可以使用data-role="controlgroup"并且不显示表格中的圆角或显示每个角落吗？

Answer 1

您需要为控制组中位于表列中的按钮编写自己的CSS规则。您还需要将这些规则放在原始jQuery Mobile CSS定义之后（即jquery-mobile.css的末尾）或者放入jQuery Mobile之后的CSS文件中。这些方面的东西：

table td .ui-controlgroup-controls .ui-corner-top, table td .ui-controlgroup-controls .ui-corner-bottom {
        -moz-border-radius: .6em /*{global-radii-blocks}*/;
        -webkit-border-radius: .6em /*{global-radii-blocks}*/;
        border-radius: .6em /*{global-radii-blocks}*/;
        -moz-border-radius: .6em /*{global-radii-blocks}*/;
        -webkit-border-radius: .6em /*{global-radii-blocks}*/;
        border-radius: .6em /*{global-radii-blocks}*/;
}