3

Using jQuery Mobile 1.1.1 the following code:

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

Generate the following HTML elements:

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

Example in jsfiddle

I need migrate to jQuery Mobile 1.4.3

I follow official jQuery Mobile 1.4 upgrade guide

Now, following code:

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

Generate following HTML elements:

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

Example in jsfiddle

New button styles are very different from the old jQuery Mobile versions. Is there an easy way to keep the old style with the new version of jQuery Mobile?

Similar question How to get “old-style” rounded 3d buttons in newer jQuery Mobile 1.4+

I would like have the same styles and html elements if it is posible, so this questions is incomplete for me.

4

1 回答 1

3

您可以更改样式，但不能更改结构。出于性能目的，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;
}

演示

于 2014-08-04T10:54:50.247 回答