jQuery Mobile Button Example

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>Concretepage</h1></header> <div class="content" data-role="content"> <h3>Buttons</h3> <input type="button" value="input Button" /> <button class="ui-btn">Button Tag</button> <a href="#" data-role="button">Link Button</a> </div> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> </body> </html>

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>Concretepage</h1></header> <div class="content" data-role="content"> <h3>Inline Buttons</h3> <a href="#" data-role="button" data-inline="true">Link Button1</a> <a href="#" data-role="button" data-inline="true">Link Button2</a> <a href="#" data-role="button" data-inline="true">Link Button3</a> <a href="#" data-role="button" data-inline="true">Link Button4</a> </div> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> </body> </html>

Button Control Groups

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>Concretepage</h1></header> <div class="content" data-role="content"> <h3>Control Group Buttons</h3> <div data-role="main" class="ui-content"> <div data-role="controlgroup" data-type="vertical"> <p>Vertical group (default):</p> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a> </div> <br> <div data-role="controlgroup" data-type="horizontal"> <p>Horizontal group:</p> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a> </div> </div> <footer data-role="footer"><h1>Footer</h1></footer> </section> </body> </html>

Buttons are simply HTML input elements. We can make more attractive and usable button by CSS3 on mobile device using jQuery Mobile Button. jQuery mobile framework convert automatically stylized button by class for mobile device and desktop computers. Buttons are created by input tag or button tag. jQuery mobile can also create buttons out of simple anchor links by applying data-role="button".In jQuery mobile, button can be created in three ways-1. By using the input tag in html code2. By using button tag with class ui-btn3. By using anchor link with class ui-btnFind the Output.In mobile page, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires.Find the Output.jQuery mobile button can also grouped together in control groups. It provides data-role ="controlgroup" for connecting button to each other. All buttons wrap in containing element and apply the data-role="controlgroup" to that container.Two types of attribute are used to set button position in mobile application, one is horizontal and another is vertical. By default, these control groups form a vertical list, but if you apply theattribute to the container the button will be rendered inline position.Find the Output.