jquery - 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您自己的 CSS 文件的末尾或包含在 jQuery Mobile 之后）。这些方面的东西：

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}*/;
}