/docs/forms/radiobuttons/events.html

https://github.com/inorganik/jquery-mobile · HTML · 102 lines · 77 code · 25 blank · 0 comment · 0 complexity · 752b37f70548ccc7dff542d033802fbd MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6. 	<title>jQuery Mobile Docs - Radio buttons</title>
    7. 

  7. 	<link rel="stylesheet"  href="../../../themes/default/" />
    8. 

  8. 	<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
    9. 

  9. 	<script src="../../../js/jquery.js"></script>
    10. 

  10. 	<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
    11. 

  11. 	<script src="../../_assets/js/jqm-docs.js"></script>
    12. 

  12. 	<script src="../../../js/"></script>
    13. 

  13. </head>
    14. 

  14. <body>
    15. 

  15. 

  16. 	<div data-role="page" class="type-interior">
    17. 

  17. 

  18. 		<div data-role="header" data-theme="f">
    19. 

  19. 		<h1>Radio buttons</h1>
    20. 

  20. 		<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
    21. 

  21. 	</div><!-- /header -->
    22. 

  22. 

  23. 	<div data-role="content">
    24. 

  24. 		<div class="content-primary">
    25. 

  25. 

  26. 		<form action="#" method="get">
    27. 

  27. 

  28. 		<h2>Radio buttons</h2>
    29. 

  29. 			
    30. 

  30. 			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
    31. 

  31. 				<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
    32. 

  32. 				<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
    33. 

  33. 				<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
    34. 

  34. 				<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
    35. 

  35. 			</ul>
    36. 

  36. 			
    37. 

  37. 			<p>Since the native  radio button is used as a proxy for the custom radio button, you can watch for events on the original, native radio button instead of needing to go through the radio button plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.</p>
    38. 

  38.       <pre><code>
    39. 

  39. $("input[type='radio']").bind( "change", function(event, ui) {
    40. 

  40.   ...
    41. 

  41. });
    42. 

  42. </code></pre> 
    43. 

  43. 			
    44. 

  44. 			<p>The radio button plugin has the following custom events:</p>
    45. 

  45. 

  46. 	<dl>
    47. 

  47. 				
    48. 

  48. 		<dt><code>create</code> triggered when a radio button is created</dt>
    49. 

  49. 		<dd>
    50. 

  50. 			<p>This event is used to find out when a custom radio button was created. It is not used to create a custom radio button. The radio button create event can be used like this: </p>
    51. 

  51. 

  52. 			<pre><code>
    53. 

  53. $("input[type='radio']").checkboxradio({
    54. 

  54.    create: function(event, ui) { ... }
    55. 

  55. });		
    56. 

  56. 			</code></pre>
    57. 

  57. 		</dd>
    58. 

  58. 		
    59. 

  59. 

  60. 	</dl>
    61. 

  61. 	    
    62. 

  62. 	</form>
    63. 

  63. 	</div><!--/content-primary -->		
    64. 

  64. 	
    65. 

  65. 	<div class="content-secondary">
    66. 

  66. 		
    67. 

  67. 		<div data-role="collapsible" data-collapsed="true" data-theme="b">
    68. 

  68. 			
    69. 

  69. 				<h3>More in this section</h3>
    70. 

  70. 				
    71. 

  71. 				<ul data-role="listview" data-theme="c" data-dividertheme="d">
    72. 

  72. 				
    73. 

  73. 					<li data-role="list-divider">Form elements</li>
    74. 

  74. 					<li><a href="../docs-forms.html">Form basics</a></li>
    75. 

  75. 					<li><a href="../forms-all.html">Form element gallery</a></li>
    76. 

  76. 					<li><a href="../texts/index.html">Text inputs</a></li>
    77. 

  77. 					<li><a href="../forms-search.html">Search inputs</a></li>
    78. 

  78. 					<li><a href="../forms-slider.html">Slider</a></li>
    79. 

  79. 					<li><a href="../forms-switch.html">Flip toggle switch</a></li>
    80. 

  80. 					<li data-theme="a"><a href="index.html">Radio buttons</a></li>
    81. 

  81. 					<li><a href="../checkboxes/index.html">Checkboxes</a></li>
    82. 

  82. 					<li><a href="../selects/index.html">Select menus</a></li>
    83. 

  83. 					<li><a href="../forms-themes.html">Theming forms</a></li>
    84. 

  84. 					<li><a href="../forms-all-native.html">Native form elements</a></li>
    85. 

  85. 					<li><a href="../forms-sample.html">Submitting forms</a></li>
    86. 

  86. 					<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
    87. 

  87. 	
    88. 

  88. 				</ul>
    89. 

  89. 		</div>
    90. 

  90. 	</div>		
    91. 

  91. 

  92. </div><!-- /content -->
    93. 

  93. 

  94. <div data-role="footer" class="footer-docs" data-theme="c">
    95. 

  95. 		<p>&copy; 2011 The jQuery Project</p>
    96. 

  96. </div>
    97. 

  97. 	
    98. 

  98. </div><!-- /page -->
    99. 

  99. 

  100. </body>
    101. 

  101. </html>
    102.