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