jquery - 从 jQuery Mobile 1.1 升级到 1.4 的按钮

Question

使用 jQuery Mobile 1.1.1 以下代码:

<input type="button" id="submitButton" class="ui-btn-right" value="Login" data-theme="custom" data-inline="true" />

生成以下 HTML 元素:

<div class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-fullsize ui-btn-right ui-btn-up-custom" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="custom" data-inline="true" data-mini="false" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Login</span>
    </span>
    <input id="submitButton" class="ui-btn-right ui-btn-hidden" type="button" data-inline="true" data-theme="custom" value="Login" aria-disabled="false">
    </div>
    </div>

jsfiddle 中的示例

我需要迁移到 jQuery Mobile 1.4.3

我关注官方jQuery Mobile 1.4 upgrade guide

现在，以下代码:

<input type="button" id="submitButton" class="ui-btn-custom ui-btn-up-custom ui-shadow ui-corner-all" value="Login" data-inline="true" data-mini="false" aria-disabled="false"/>

生成以下 HTML 元素:

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-btn-inline">
Login
<input id="submitButton" class="ui-btn-custom ui-btn-up-custom ui-shadow ui-corner-all" type="button" aria-disabled="false" data-mini="false" data-inline="true" value="Login">
</div>

jsfiddle 中的示例

新的按钮样式与旧的 jQuery Mobile 版本有很大不同。有没有一种简单的方法可以在新版本的 jQuery Mobile 中保持旧风格？

类似问题How to get “old-style” rounded 3d buttons in newer jQuery Mobile 1.4+

如果可能的话，我希望有相同的样式和 html 元素，所以这个问题对我来说是不完整的。

Answer 1

您可以更改样式，但无法更改结构。出于性能目的，jQuery Mobile 在最新版本 (1.4) 中进行了重大更改。

观察这两个按钮，主要区别在于 border-radius 和 font-weight。您有两种选择来实现您想要的目标，两种解决方案都是纯 CSS。

1. 以下内容将适用于所有 .ui-btn，无论它们是 input、button 还是 a.

   • HTML

     <input type="button" id="submitButton" value="Login" />
     

   • CSS

     .ui-btn.ui-corner-all {
        border-radius: 1em;
        font-weight: normal;
     }
     

2. 通过创建自定义类并将其作为属性 data-wrapper-class="custom" 添加到目标元素来定位特定元素。

   • HTML

     <input type="button" value="Login" data-wrapper-class="custom" />
     

   • CSS

     .ui-btn.ui-corner-all.custom {
        border-radius: 1em;
        font-weight: normal;
     }
     

Demo