/docs/content/content-collapsible-events.html

https://github.com/forresst/jquery-mobile-fr_FR · HTML · 111 lines · 84 code · 27 blank · 0 comment · 0 complexity · ef29c4157313fd53d4bbca44454130d8 MD5 · raw file 

    

  1. <!DOCTYPE html> 
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    5. 

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

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

  7. 	<title>Docs jQuery Mobile Docs - Contenu pliable</title> 
    8. 

  8. 	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />  
    9. 

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

  10. 

  11. 	<script src="../../js/jquery.js"></script>
    12. 

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

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

  14. 

  15. </head> 
    16. 

  16. <body> 
    17. 

  17. 

  18. 	<div data-role="page" class="type-interior">
    19. 

  19. 

  20. 		<div data-role="header" data-theme="f">
    21. 

  21. 			<h1>Pliable</h1>
    22. 

  22. 			<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a> <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Recherche</a>
    23. 

  23. 		</div><!-- /header -->
    24. 

  24. 

  25. 	<div data-role="content">
    26. 

  26. 		<div class="content-primary">
    27. 

  27. 		<h2>Contenu pliable</h2>
    28. 

  28. 		
    29. 

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

  30. 				<li><a href="content-collapsible.html" data-role="button" data-transition="fade">Bases</a></li>
    31. 

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

  32. 				<li><a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Méthodes</a></li>
    33. 

  33. 				<li><a href="content-collapsible-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Événements</a></li>
    34. 

  34. 			</ul>
    35. 

  35. 

  36. 			<p>Liez les événements directement au conteneur, typiquement un élément <code>div</code>. Utilisez les <a href="../api/events.html">évènements virtuels</a> de jQuery Mobile ou liez les évènements standard de JavaScript tel que change, focus, blur, etc... :</p>
    37. 

  37. 			<pre><code>
    38. 

  38. $( ".selector" ).on( "collapse", function(event, ui) {
    39. 

  39.   ...
    40. 

  40. });
    41. 

  41. </code></pre>
    42. 

  42. 

  43. 			<p>Le plugin pliable a les événements personnalisés suivants :</p>
    44. 

  44. 

  45. 	<dl>
    46. 

  46. 

  47. 		<dt><code>create</code> déclenché quand un pliable est créé</dt>
    48. 

  48. 		<dd>
    49. 

  49. 

  50. 			<pre><code>
    51. 

  51. $( ".selector" ).collapsible({
    52. 

  52.    create: function(event, ui) { ... }
    53. 

  53. });
    54. 

  54. 			</code></pre>
    55. 

  55. 		</dd>
    56. 

  56. 

  57. 		<dt><code>collapse</code> déclenché quand un pliable est réduit</dt>
    58. 

  58. 		<dd>
    59. 

  59. 

  60. 			<pre><code>
    61. 

  61. $( ".selector" ).collapsible({
    62. 

  62.    collapse: function(event, ui) { ... }
    63. 

  63. });
    64. 

  64. 			</code></pre>
    65. 

  65. 		</dd>
    66. 

  66. 

  67. 		<dt><code>expand</code> déclenché quand un pliable est déplié</dt>
    68. 

  68. 		<dd>
    69. 

  69. 

  70. 			<pre><code>
    71. 

  71. $( ".selector" ).collapsible({
    72. 

  72.    expand: function(event, ui) { ... }
    73. 

  73. });
    74. 

  74. 			</code></pre>
    75. 

  75. 		</dd>
    76. 

  76. 

  77. 	</dl>
    78. 

  78. 

  79. 	</div><!--/content-primary -->		
    80. 

  80. 	
    81. 

  81. 	<div class="content-secondary">
    82. 

  82. 		
    83. 

  83. 		<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
    84. 

  84. 			
    85. 

  85. 				<h3>Aussi dans cette rubrique</h3>
    86. 

  86. 				
    87. 

  87. 				<ul data-role="listview" data-theme="c" data-dividertheme="d">
    88. 

  88. 				
    89. 

  89. 					<li data-role="list-divider">Formatage de contenu</li>
    90. 

  90. 					<li><a href="content-html.html">Styles HTML de base</a></li>
    91. 

  91. 					<li><a href="content-grids.html">Grille de mise en page (colonnes)</a></li>
    92. 

  92. 					<li><a href="content-grids-responsive.html">Grille Responsive</a></li>
    93. 

  93. 					<li data-theme="a"><a href="content-collapsible.html">Blocs de contenu pliable</a></li>
    94. 

  94. 					<li><a href="content-collapsible-set.html">Ensembles pliable (accordéons)</a></li>
    95. 

  95. 					<li><a href="content-themes.html">Thématisation du contenu</a></li>
    96. 

  96. 	
    97. 

  97. 				</ul>
    98. 

  98. 		</div>
    99. 

  99. 	</div>
    100. 

  100. 

  101. </div><!-- /content -->
    102. 

  102. 

  103. <div data-role="footer" class="footer-docs" data-theme="c">
    104. 

  104. 		<p class="jqm-version"></p>
    105. 

  105. 		<p>Copyright 2013 The jQuery Foundation</p>
    106. 

  106. </div>
    107. 

  107. 	
    108. 

  108. </div><!-- /page -->
    109. 

  109. 

  110. </body>
    111. 

  111. </html>
    112.