jQuery Mobile: Button examples

This entry is part 12 of 73 in the series jQuery Mobile

We look at the different ways of implementing a button in jQM.

Button Examples
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>Button App</h1></div>
    <div data-role='content'>
        <p>The 2 Class Button Examples</p>
        <a href='#' class='ui-btn'>Anchor</a>
        <button class='ui-btn'>Button</button>
        <p>Input Button</p>
        <input type='button' value='Submit Button'>

        <p>The deprecated data-role button</p>
        <a href='#pageone' data-role='button'>Old Button</a>

        <p>Inline Buttons</p>
        <a href="#" class="ui-btn ui-btn-inline">Anchor</a>
        <button class="ui-btn ui-btn-inline">Button</button>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jqm_button

Anchor button is commonly used for moving to a different page or web address.

<a href='#' class='ui-btn'>Anchor</a>

General purpose Button:

<button class='ui-btn'>Button</button>

Submit button:

<input type='button' value='Submit Button'>

The deprecated old Button:

<a href='#pageone' data-role='button'>Old Button</a>

Inline buttons are displayed on the same line.

<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>

We generally use input button to submit a form.

jQuery Mobile: Transitions

This entry is part 11 of 73 in the series jQuery Mobile

To move from page to page, jQuery Mobile provides a few CSS-based transition effects that you can apply to a page link.

Some of the common transitions are flip, slide and pop.

The transition effects were first implemented by David Kaneda in jQTouch and jQuery Mobile has adapted it and built the effects into jQM.

To apply flip transition effect, we only have to add data-transition=’flip’  to the page link line.

The line would be:

<a href='#pagetwo' data-transition='flip' data-role='button'>Click Me</a>
Transitions
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
        <a href='#pagetwo' data-transition='flip' data-role='button'>Click Me</a>
    </div>
</div>
<div data-role='page' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>
</body>
</html>
Try The Code

For a complete demo of jQM transition effects, you can refer to the official jQM site.

jQuery Mobile: Dialog box

This entry is part 10 of 73 in the series jQuery Mobile

Instead of going to a page, we can also open pagetwo as a dialog box.

To do that, we add data-dialog=’true’.

<div data-role='page' data-dialog='true' id='pagetwo'>

The only change is in putting data-dialog=’true’ in pagetwo div.

Dialog Box
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Your page one content here</p>
      <a href='#pagetwo' data-role='button'>Click Me</a>
    </div>
    <div data-role="footer" data-position="fixed">
	<h1>Fixed Footer!</h1>
</div>
</div>
<div data-role='page' data-dialog='true' id='pagetwo'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>You are at page two!</p>
        <a href='#pageone' data-role='button'>Go Back</a>
    </div>
</div>

</body>
</html>
Try The Code