Clever Geek Handbook

Upgrade button from jQuery Mobile 1.1 to 1.4

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

Create 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 at jsfiddle

I need to upgrade to jQuery Mobile 1.4.3

I am following the official jQuery Mobile 1.4 Upgrade Guide

Now, the 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 the 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 at jsfiddle

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

Similar question How to get "old fashioned" rounded 3d buttons in new jQuery Mobile 1.4+

I would like to have the same html styles and elements if possible, so these questions are incomplete for me.

+3


source to share


1 answer


You can change styles, but you cannot change the structure. jQuery Mobile has made significant changes to the latest version (1.4) to meet the goals.

Looking at both buttons, the main differences are border-radius

and font-weight

. You have two options to achieve what you want, both solutions are pure CSS.



  • The following apply to everyone .ui-btn

    , whether they are input

    , button

    or a

    .

    • Html

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

    • CSS

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

  • Target specific elements by creating your own class and adding it to the target elements as an attribute 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

+3


source






More articles:


All Articles