O'Reilly logo

jQuery Mobile by Jon Reid

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Buttons

jQuery Mobile will automatically create stylized buttons out of regular form buttons, whether they be created with the input tag or the button tag. jQuery Mobile can also create buttons out of simple anchor links, by applying the data-role="button" to them.

By default, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires (Example 3-13, Figure 3-17).

Example 3-13. Button, button, who’s got the button?

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Buttons</h3>
    <a href="#" data-role="button">Link-based button</a>
    <input type="submit" value="submit" data-inline="true">
    <input type="reset" value="reset" data-inline="true">
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
Button, button, who’s got the button?

Figure 3-17. Button, button, who’s got the button?

Warning

As of this writing, the jQuery Mobile documentation states that by applying the data-inline="true" attribute to a containing element, all buttons contained therein will be rendered inline. This is not working. The data-inline="true" attribute must be applied to each individual button. See http://jquerymobile.com/demos/1.0a4.1/docs/buttons/buttons-inline.html for more information. I expect ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required