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。

以下内容适用于所有.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;
}

通过创建自定义类并将其作为属性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

从jQuery Mobile 1.1升级到1.4

1 个答案: