HTML5 Zone
HTML5 Zone is brought to you in partnership with:

I am mastered in computer application (MCA)and working as Architect in one of the leading software services company in India. I have more than 7 years of experience in software development. Sumit is a DZone MVB and is not an employee of DZone and has posted 24 posts at DZone. You can read more from them at their website. View Full User Profile

jQuery Mobile: Buttons

08.07.2012
| 4217 views |
  • submit to reddit

We Recommend These Resources

NOSQL for the Enterprise

In this article I will talk about Buttons in jQuery Mobile. Buttons of jQuery Mobile renders with centered label, rounded corners and shadows by default.

Let's see how it works.

Step 1: Create a .html page to demonstrate Button Icons of jQuery Mobile.

Step 2: Place below code in the html page. If you noticed I am using Microsoft CDN

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title></title>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.js" type="text/javascript"></script>
   <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css" />
   <link href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Step 3: Now place below code in the body section of HTML page.

<li>Button Icons</li>

<a href="javascript:void(0)" data-role="button" data-icon="delete">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check">Check</a>
<a href="javascript:void(0)" data-role="button" data-icon="grid">Grid</a>
<a href="javascript:void(0)" data-role="button" data-icon="forward">Foward</a>
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a> <a href="javascript:void(0)" data-role="button" data-icon="gear">Gear</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-l">Left Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-r">Right Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="arrow-u">Up Arrow</a> <a href="javascript:void(0)" data-role="button" data-icon="arrow-d">Down Arrow</a>
<a href="javascript:void(0)" data-role="button" data-icon="home">Home</a>
<a href="javascript:void(0)" data-role="button" data-icon="alert">Alert</a>
<a href="javascript:void(0)" data-role="button" data-icon="star">Star</a>
<a href="javascript:void(0)" data-role="button" data-icon="info">Info</a>
<a href="javascript:void(0)" data-role="button" data-icon="refresh">Refresh</a>
<a href="javascript:void(0)" data-role="button" data-icon="back">Back</a>

Step 4: You get screen like below. The below screen shot is from Windows Phone device.


jquery mobile - button icons

You can browse it in your Windows Phone or any other device using below URL.

http://dotnetspeaks.com/LiveDemos/jquerymobileButtonIcons.html

Step 5: Create another .html page and repeate Step 2 to demonstrate Buttons with no text in jQuery Mobile.

Step 6: Place below code inside body tag of html page created in Step 5.

<li>Icons with no text</li>

<a href="javascript:void(0)" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check" data-iconpos="notext">Check</a>

Step 7: Now run the application and you will get screen like below on Windows Phone.

jQuery Mobile - Button with no text


You can browse it in your Windows Phone or any other device using below URL

http://dotnetspeaks.com/LiveDemos/jquerymobilebuttonwithnotext.html

Step 8: Create another .html page and repeate Step 2 to demonstrate Inline Button and Button Grouping in jQuery Mobile.

Step 9: Place below code inside body tag of html page created in Step 8.

<li>Inline</li>
<a href="javascript:void(0)" data-role="button" data-icon="delete" data-inline="true">Delete</a>
<a href="javascript:void(0)" data-role="button" data-icon="plus" data-inline="true">Plus</a>
<a href="javascript:void(0)" data-role="button" data-icon="minus" data-inline="true">Minus</a>
<a href="javascript:void(0)" data-role="button" data-icon="check" data-inline="true">Check</a>

<li>Horizontal Grouping</li>

<div data-role="controlgroup" data-type="horizontal">
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 1</a>
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
   <a href="javascript:void(0)" data-role="button" data-inline="true">Button 2</a>
</div>

<li>Normal Grouping</li>

<div data-role="controlgroup">
   <a href="javascript:void(0)" data-role="button">Button 1</a>
   <a href="javascript:void(0)" data-role="button">Button 2</a>
   <a href="javascript:void(0)" data-role="button">Button 2</a>
</div>

Step 10: Now run the application and you will get screen like below on Windows Phone.

jQuery Mobile Button Inline and Button Grouping


You can browse it in your Windows Phone or any other device using below URL

http://dotnetspeaks.com/LiveDemos/jquerymobileInlineAndGroupedButton.html

Step 11: Create another .html page and repeate Step 2 to demonstrate No Shadow, No Corners and Icon Position in Button in jQuery Mobile.

Step 12: Place below code inside body tag of html page created in Step 11.

<li>No Shadow</li>

<a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="delete" data-inline="true">Delete</a>
<a href="javascript:void(0)" data-role="button" data-shadow="false" data-icon="plus" data-inline="true">Plus</a>

<li>No Corners</li>

<a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="minus" data-inline="true">Minus</a>
<a href="javascript:void(0)" data-role="button" data-corners="false" data-icon="check" data-inline="true">Check</a>

<li>Icon Position</li>

<a href="javascript:void(0)" data-role="button" data-iconpos="right" data-icon="grid" data-inline="true">Grid</a>    
<a href="javascript:void(0)" data-role="button" data-iconpos="left" data-icon="forward" data-inline="true">Foward</a>
<a href="javascript:void(0)" data-role="button" data-iconpos="bottom" data-icon="refresh" data-inline="true">Refresh</a>
<a href="javascript:void(0)" data-role="button" data-iconpos="top" data-icon="gear" data-inline="true">Gear</a>

Step 12: Now run the application and you will get screen like below on Windows Phone.

jquery mobile Buttons with shadow no corners icon position

You can browse it in your Windows Phone or any other device using below URL

http://dotnetspeaks.com/LiveDemos/effectsiconpositioningshadow.html

This ends the article of jQuery Mobile Buttons

Published at DZone with permission of Sumit Dutta, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers