2010-10-11 18:25:08 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-02-03 22:29:48 +00:00
< title > jQuery Mobile Docs - Button types< / title >
2011-01-06 00:19:24 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-04-14 20:04:47 +00:00
< script src = "../../js/jquery.js" > < / script >
2011-06-20 19:41:40 +00:00
< script src = "../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../_assets/js/jqm-docs.js" > < / script >
2011-04-14 20:04:47 +00:00
< script src = "../../js/" > < / script >
2010-10-11 18:25:08 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2010-10-11 18:25:08 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2011-09-29 17:03:35 +00:00
< h1 > Button basics< / h1 >
2011-03-10 03:36:14 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-11 18:25:08 +00:00
< / div > <!-- /header -->
2011-03-10 03:36:14 +00:00
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2011-09-29 17:03:35 +00:00
< h2 > Button basics< / h2 >
< ul data-role = "controlgroup" data-type = "horizontal" class = "localnav" >
< li > < a href = "buttons-types.html" data-role = "button" data-transition = "fade" class = "ui-btn-active" > Basics< / a > < / li >
< li > < a href = "buttons-options.html" data-role = "button" data-transition = "fade" > Options< / a > < / li >
< li > < a href = "buttons-methods.html" data-role = "button" data-transition = "fade" > Methods< / a > < / li >
< li > < a href = "buttons-events.html" data-role = "button" data-transition = "fade" > Events< / a > < / li >
< / ul >
< p > Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (< code > a< / code > elements) to mark up navigation buttons, and < code > input< / code > or < code > button< / code > elements for form submission.< / p >
2010-10-15 21:34:00 +00:00
2010-10-13 20:38:29 +00:00
< h2 > Styling links as buttons< / h2 >
2011-09-29 17:03:35 +00:00
< p > In the main content block of a page, you can style any anchor link as a button by adding the < code > data-role="button"< / code > attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: < / p >
2010-10-13 20:38:29 +00:00
< code >
2011-03-10 03:36:14 +00:00
< a href=" index.html" data-role=" button" > Link button< /a>
2010-10-13 20:38:29 +00:00
< / code >
2010-10-15 21:29:50 +00:00
< p > Produces this < strong > link-based< / strong > button:< / p >
2011-03-10 03:36:14 +00:00
< a href = "index.html" data-role = "button" > Link button< / a >
2010-10-11 18:31:33 +00:00
2010-10-13 20:38:29 +00:00
< h2 > Form buttons< / h2 >
2011-09-29 17:40:39 +00:00
< p > For ease of styling, the framework automatically converts any < code > button< / code > or < code > input< / code > element with a < code > type< / code > of < code > submit< / code > , < code > reset< / code > , < code > button< / code > , or < code > image< / code > into a custom styled, link-based button — there is no need to add the < code > data-role="button"< / code > attribute. < / p >
2011-09-29 17:39:54 +00:00
< p > To preserve events bound to the original < code > button< / code > or < code > input< / code > , the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element.< / p >
2010-10-13 20:38:29 +00:00
2010-10-15 21:31:29 +00:00
< p > < strong > Button< / strong > based button:< / p >
2010-10-11 18:25:08 +00:00
< button > Button element< / button >
2010-10-15 21:31:29 +00:00
< p > < strong > Input type="button"< / strong > based button:< / p >
2011-10-12 22:08:43 +00:00
< input type = "button" value = "buttonBtn" / >
2010-10-11 18:25:08 +00:00
2010-10-15 21:31:29 +00:00
< p > < strong > Input type="submit"< / strong > based button:< / p >
2011-10-12 22:08:43 +00:00
< input type = "submit" value = "submitBtn" / >
2010-10-11 18:25:08 +00:00
2010-10-15 21:31:29 +00:00
< p > < strong > Input type="reset"< / strong > based button:< / p >
2011-10-12 22:08:43 +00:00
< input type = "reset" value = "resetBtn" / >
2010-10-11 18:25:08 +00:00
2010-10-15 21:31:29 +00:00
< p > < strong > Input type="image"< / strong > based button:< / p >
2011-10-12 22:08:43 +00:00
< input type = "image" value = "imageBtn" / >
2010-10-11 18:25:08 +00:00
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
2011-09-29 20:35:31 +00:00
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" data-content-theme = "d" >
2011-06-20 20:35:27 +00:00
2011-06-20 22:23:09 +00:00
< h3 > More in this section< / h3 >
2011-06-20 20:35:27 +00:00
2011-09-29 17:03:35 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-06-20 21:17:04 +00:00
< li data-role = "list-divider" > Buttons< / li >
2011-09-29 17:03:35 +00:00
< li data-theme = "a" > < a href = "buttons-types.html" > Button basics< / a > < / li >
2011-06-20 21:17:04 +00:00
< li > < a href = "buttons-icons.html" > Button icons< / a > < / li >
< li > < a href = "buttons-inline.html" > Inline buttons< / a > < / li >
< li > < a href = "buttons-grouped.html" > Grouped buttons< / a > < / li >
2011-09-29 17:03:35 +00:00
< li > < a href = "buttons-themes.html" > Theming buttons< / a > < / li >
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
2011-06-20 22:50:52 +00:00
< p > © 2011 The jQuery Project< / p >
2011-06-20 20:35:27 +00:00
< / div >
2010-10-11 18:25:08 +00:00
< / div > <!-- /page -->
< / body >
< / html >
