Over a million developers have joined DZone.

jQuery Mobile: Buttons

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}