jQuery Mobile button
Mobile apps are built on simple point-and-click things you want to display.
Creating buttons in jQuery Mobile
In jQuery Mobile, buttons can be created in three ways:
Using <button> ; Element
Use <input> element
Use <a> element## with data-role="button"
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <button class="ui-btn">按钮</button> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Run Example»Click the "Run Instance" button to view the online instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <input type="button" value="按钮"> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Run Instance»Click the "Run Instance" button to view the online instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>按钮</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn">按钮</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Click the "Run Instance" button to view Online Example
In jQuery Mobile, buttons are automatically styled so that they move More attractive and usable on the device. ![]() |
---|
![]() | ##By default, combination buttons are vertically combined with no margins and space between them. And only the first and last buttons have rounded corners so that they create a nice look when combined.
---|
Back buttonTo create a back button, use the data-rel="back" attribute (this ignores the anchor href value):
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>访问第二个页面</h1> </div> <div data-role="main" class="ui-content"> <a href="#pagetwo" class="ui-btn">访问第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>返回按钮实例</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn" data-rel="back">返回</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Run Instance»Click the "Run Instance" button to view the online instance
More link button instances
Description | Instance | |
---|---|---|
Modify the button color to black and the font to white (the default is gray background and black font). | Try it | |
Add rounded corners to the button | Try it | |
Make a small button | Try it | |
Add for the button Shade | Try it |
![]() | If you need to use more styles, separate each style class with a space, such as: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" By default, the <input> button has rounded corners and shadow effects. <a> and The <button> element has none. |
---|
For a more complete set of CSS classes, check out our jQuery Mobile CSS Classes Reference.
The next chapter demonstrates how to add an icon to a button.