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.
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.

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.

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.
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
|