Introduction
If you are a smart phone user who regularly visit websites using your mobile browser or use mobile apps, you might be knowing the power of buttons. Buttons are the integral part of mobile apps and mobile optimized websites which allow you to tap to display screens you want or to make calculations. jQuery Mobile allows you to create and configure buttons so easily by providing a number of options.
Creating Buttons
In jQuery Mobile, you can create a basic button using the standard HTML markups in three ways: using the <input> element with type equals to button, using the <button> element and also using the <a> element. As the standard behavior of <input> element with type equals to button and the <button> element is that of buttons, we do not have to assign the role of a button explicitly. On the other hand, as a hyperlink (<a>) does not normally behave like a button, we need to set the value of data-role attribute to button to make it look and act like a button.
Try this yourself:
<!DOCTYPE html> <html> <head> <title>Sample Code</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <input type="button" value="Input Button"> <button>Button</button> <a href="#" data-role="button">Hyper Link</a> </body> </html>
Save the file as buttons.html and open it using your web browser. You will get a screen like this:
You could see three buttons that span across the whole screen.
Change the Size of Buttons
By default, the created buttons span across the whole screen. You can adjust the size of the buttons to the text displayed on them by setting the value of data-inline attribute to true. You can make your buttons still compact by setting the value of data-mini
Try this yourself:
<!DOCTYPE html> <html> <head> <title>Sample Code</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div id="welcome" data-role="page" data-add-back-btn="false"> <div data-role="header" data-theme="b"> <h1>Welcome!!!</h1> </div> <div data-role="content"> <input type="button" value="Input Button"> <button data-inline="true">Button</button> <a href="#" data-role="button" data-mini="true" data-inline="true">Hyper Link</a> </div> <div data-role="footer" data-theme="b"> <h3>Copyright All Rights Reserved</h3> </div> </div> </body> </html>
Save the file as buttonsize.html and open it using your browser. You will get a screen like this:
You could find that the Input Button spans across the screen whereas the other two buttons have their size adjusted to the text on them. This is because we have set the value of data-inline to true for the last two buttons. You could also find that the Hyper Link button is smaller compared to the Button button because we have set the value of data-mini to true for the Hyper Link button.
Change the Appearance of Buttons
You can make your buttons more attractive and useable on mobile devices by changing the appearance. By default, buttons have rounded corners. You can make them appear like boxes (without rounded corners) by setting the value of data-corners to false. You can apply different themes to your buttons by setting appropriate value to the data-theme attribute. By default, jQuery Mobile buttons have a shadow effect. You can remove this effect by setting the value of data-shadow attribute to false.
You can also add icons to your buttons using the data-icon attribute. The possible values for data-icon attribute are alert, arrow-d, arrow-l, arrow-r, arrow-u, back, custom, check, delete, forward, gear, grid, home, info, minus, plus, refresh, search and star. You can also decide where to display the icon on a button by setting the value of data-iconpos attribute to top, left, right or bottom. If you want only the icon to appear on the button without any text, then set the value of data-iconpos attribute to notext. You can also disable the shadow effect on icons by setting the value of data-iconshadow attribute to false.
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<input type="button" value="With Corners" data-inline="true">
<input type="button" value="Without Corners" data-inline="true" data-corners="false">
<button data-theme="b">With Theme</button>
<input type="button" value="With Shadow" data-inline="true">
<input type="button" value="Without Shadow" data-inline="true" data-shadow="false">
<a href="#" data-role="button" data-inline="true" data-icon="delete" data-iconpos="right">Delete</a>
<button data-inline="true" data-icon="search" data-iconpos="notext">Search</button>
<button data-inline="true" data-icon="grid" data-iconshadow="false">Grid</button>
</body>
</html>
Save the file as buttonappearance.html and open it using your browser. You will get a screen like this:
You could find the difference between button with rounded corners and button without rounded corners. You could also find a button with shadow and another one without shadow. We have added the delete icon to the Delete button and positioned the icon to the right. We have displayed only the search icon by setting the value of data-iconpos attribute to notext. We have added a button Grid with data-iconshadow equals to false though the shadow effect is not that visible in case of an icon.
Summary
In this section, we have seen how to create and configure buttons using jQuery Mobile to make them mobile optimized.