/docs/config/loadingMessageTextVisible.html

https://github.com/forresst/jquery-mobile-fr_FR · HTML · 77 lines · 64 code · 13 blank · 0 comment · 0 complexity · 7dde22aa4281f0efd1bd1762c314980d 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 - Configuration</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>
    14. 

  14. 	$(document).on("mobileinit", function(){
    15. 

  15. 		$.mobile.loadingMessageTextVisible = true;
    16. 

  16. 	});
    17. 

  17. 	</script>
    18. 

  18. 	
    19. 

  19. 	<script src="../../js/"></script>
    20. 

  20. 

  21. </head>
    22. 

  22. <body>
    23. 

  23. 

  24. 	<div data-role="page">
    25. 

  25. 	<script>
    26. 

  26. 		$(document).on("click", ".show-page-loading-msg", function() {
    27. 

  27. 			var $this = $( this ),
    28. 

  28. 				theme = $this.jqmData("theme") || $.mobile.loadingMessageTheme,
    29. 

  29. 				msgText = $this.jqmData("msgtext") || $.mobile.loadingMessage,
    30. 

  30. 				textonly = !!$this.jqmData("textonly");
    31. 

  31. 			$.mobile.showPageLoadingMsg(theme, msgText, textonly);
    32. 

  32. 		})
    33. 

  33. 		.on("click", ".hide-page-loading-msg", function() {
    34. 

  34. 			$.mobile.hidePageLoadingMsg();
    35. 

  35. 		});
    36. 

  36. 	</script>
    37. 

  37. 

  38. 	<div data-role="header" data-theme="f">
    39. 

  39. 		<h1>Configuration appliquée</h1>
    40. 

  40. 		<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>
    41. 

  41. 	</div><!-- /header -->
    42. 

  42. 

  43. 	<div data-role="content">
    44. 

  44. 

  45. 		<h2>Le texte de loadingMessage est maintenant visible</h2>
    46. 

  46. 		<p>Pour tester, cliquez sur le bouton ci-dessous et de parcourez les docs. Notez que si un lien provoque un rafraîchissement, ce paramètre sera perdue et les paramètres par défaut seront vus.</p>
    47. 

  47. 		<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Navigation dans les docs</a>
    48. 

  48. 

  49. 		<p>Pour afficher le message de chargement à la demande :</p>
    50. 

  50. 		<pre><code>$.mobile.showPageLoadingMsg();</code></pre>
    51. 

  51. 		<p>Cliquez sur les boutons ci-dessous pour afficher et masquer le message de chargement avec les options par défaut.</p>
    52. 

  52. 		<div data-role="controlgroup">
    53. 

  53. 			<button class="show-page-loading-msg" data-inline="false" data-icon="arrow-r" data-iconpos="right">Afficher</button> <button class="hide-page-loading-msg" data-inline="false" data-icon="delete" data-iconpos="right">Masquer</button>
    54. 

  54. 		</div>
    55. 

  55. 

  56. 		<h2>Thématisation du message de chargement</h2>
    57. 

  57. 		<p>Pour afficher le message de chargement avec différent thème et message :</p>
    58. 

  58. 		<pre><code>$.mobile.showPageLoadingMsg(<strong>"a", "Chargement theme a..."</strong>);</code></pre>
    59. 

  59. 		<p>Le thème et le message peuvent être changés à la volée en appelant à nouveau la méthode. Cliquez les boutons ci-dessous pour voir le message de chargement avec le thème indiqué.</p>
    60. 

  60. 		<div data-role="controlgroup">
    61. 

  61. 			<button class="show-page-loading-msg" data-theme="a" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme a...">Thème a</button> <button class="show-page-loading-msg" data-theme="b" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme b...">Thème b</button> <button class="show-page-loading-msg" data-theme="c" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme c...">Thème c</button> <button class="show-page-loading-msg" data-theme="d" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme d...">Thème d</button> <button class="show-page-loading-msg" data-theme="e" data-icon="arrow-r" data-iconpos="right" data-msgtext="Loading theme e...">Thème e</button> <button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Masquer</button>
    62. 

  62. 		</div>
    63. 

  63. 

  64. 		<h2>Messages seulement avec du texte</h2>
    65. 

  65. 		<p>Pour afficher le message de chargement sans image :</p>
    66. 

  66. 		<pre><code>$.mobile.showPageLoadingMsg("a", "Pas d'image", <strong>true</strong>);</code></pre>
    67. 

  67. 		<p>Cliquez le bouton ci-dessous pour voir le message de chargement sans image.</p>
    68. 

  68. 		<div data-role="controlgroup">
    69. 

  69. 			<button class="show-page-loading-msg" data-textonly="true" data-msgtext="Look Ma, no spinner!" data-icon="arrow-r" data-iconpos="right">Afficher</button> <button class="hide-page-loading-msg" data-inline="false" data-icon="delete" data-iconpos="right">Masquer</button>
    70. 

  70. 		</div>
    71. 

  71. 

  72. 

  73. 		</div><!-- /ui-body wrapper -->
    74. 

  74. </div><!-- /page -->
    75. 

  75. 

  76. </body>
    77. 

  77. </html>
    78.