Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery Mobile: Buttons

DZone's Guide to

jQuery Mobile: Buttons

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

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

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:

Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}