2011-09-29 17:03:00 +00:00
<!DOCTYPE html>
2012-01-04 21:59:17 +00:00
< html class = "ui-mobile-rendering" >
2011-09-29 17:03:00 +00:00
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > jQuery Mobile Docs - Button events< / title >
2012-01-10 21:35:08 +00:00
< link rel = "stylesheet" href = "../../css/themes/default/jquery.mobile.css" / >
2011-09-29 17:03:00 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2012-01-13 05:25:59 +00:00
2011-12-24 08:48:08 +00:00
< script data-main = "../../js/jquery.mobile.docs" src = "../../external/requirejs/require.js" > < / script >
2012-01-13 05:25:59 +00:00
< script src = "../../js/jquery.js" > < / script >
2011-09-29 17:03:00 +00:00
< / head >
< body >
< div data-role = "page" class = "type-interior" >
< div data-role = "header" data-theme = "f" >
< h1 > Button basics< / h1 >
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
< / div > <!-- /header -->
< div data-role = "content" >
< div class = "content-primary" >
< form action = "#" method = "get" >
< 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" > 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" class = "ui-btn-active" > Events< / a > < / li >
< / ul >
2011-09-29 17:06:04 +00:00
< p > Bind events directly to the < code > a< / code > , < code > input< / code > , or < code > button< / code > element. Use jQuery Mobile's < a href = "../api/events.html" > virtual events< / a > , or bind standard JavaScript events, like change, focus, blur, etc.:< / p >
2011-09-29 17:03:00 +00:00
< pre > < code >
$( ".myButton" ).bind( "click", function(event, ui) {
...
});
< / code > < / pre >
< p > The < strong > form button< / strong > plugin has the following custom events:< / p >
< dl >
< dt > < code > create< / code > triggered when a form button is created< / dt >
< dd >
< pre > < code >
$('[type='submit']').button({
create: function(event, ui) { ... }
});
< / code > < / pre >
< / dd >
< / dl >
< / form >
< / 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-09-29 17:03:00 +00:00
< h3 > More in this section< / h3 >
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
< li data-role = "list-divider" > Buttons< / li >
< li data-theme = "a" > < a href = "buttons-types.html" > Button basics< / a > < / li >
< 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 >
< li > < a href = "buttons-themes.html" > Theming buttons< / a > < / li >
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
< p > © 2011 The jQuery Project< / p >
< / div >
< / div > <!-- /page -->
< / body >
< / html >
