从jQuery Mobile 1.1升级到1.4

使用jQuery Mobile 1.1.1，可以获得以下代码：

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

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

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

登录

举例

我需要迁移到jQuery Mobile 1.4.3

我遵从官方的指示

下面是代码：

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

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

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

登录

举例

新的按钮样式与旧的jQuery移动版本非常不同。有没有一种简单的方法可以让新版jQuery Mobile保持旧式风格

类似问题

---

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

您可以更改样式，但不能更改结构。为了提高性能，jQuery Mobile在最新版本（1.4）中进行了重大更改

查看这两个按钮，主要区别在于

边框半径

和

字体重量

。你有两个选择来实现你想要的，两个解决方案都是纯CSS

以下内容将适用于所有

.ui btn

，无论它们是

输入

、

按钮

还是

a

• HTML

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

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

通过创建一个自定义类并将其作为属性添加到目标元素中，来确定特定元素的目标

数据包装器class=“custom”

• HTML

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

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

---

谢谢，数据包装器类对我非常有用。我正在测试自定义主题，因为我可以使用.ui btn customtheme类