/docs/buttons/buttons-inline.html

https://github.com/asgeo1/jquery-mobile · HTML · 80 lines · 54 code · 26 blank · 0 comment · 0 complexity · c8c3e703e0e9591ce6dc1a459162b55e MD5 · raw file 

    

  1. <!DOCTYPE html> 
    2. 

  2. <html class="ui-mobile-rendering"> 
    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 - Inline buttons</title> 
    7. 

  7. 	<link rel="stylesheet"  href="../../css/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 data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
    12. 

  12. </head> 
    13. 

  13. <body> 
    14. 

  14. 

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

  16. 

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

  18. 		<h1>Inline buttons</h1>
    19. 

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

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

  21. 

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

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

  24. 		
    25. 

  25. 		<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
    26. 

  26. 		
    27. 

  27. 		<a href="index.html" data-role="button">Button</a>
    28. 

  28. 		
    29. 

  29. 			
    30. 

  30. 		<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
    31. 

  31. 		
    32. 

  32. 		
    33. 

  33. 		<a href="index.html" data-role="button" data-inline="true">Button</a>
    34. 

  34. 		
    35. 

  35. 		<p>If you have multiple buttons that should sit side-by-side on the same line, add the <code> data-inline="true"</code> attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. </p>
    36. 

  36. 			
    37. 

  37. <pre><code>
    38. 

  38. &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot;&gt;Cancel&lt;/a&gt;
    39. 

  39. &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;
    40. 

  40. </code></pre>
    41. 

  41. 

  42. 		<p>The result is this:</p>
    43. 

  43. 

  44. 			<a href="index.html" data-role="button" data-inline="true">Cancel</a>
    45. 

  45. 			<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
    46. 

  46. 

  47. 		
    48. 

  48. 		<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>	
    49. 

  49. 			
    50. 

  50. 		</div><!--/content-primary -->		
    51. 

  51. 

  52. 		<div class="content-secondary">
    53. 

  53. 

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

  55. 

  56. 					<h3>More in this section</h3>
    57. 

  57. 

  58. 					<ul data-role="listview" data-theme="c" data-dividertheme="d">
    59. 

  59. 

  60. 						<li data-role="list-divider">Buttons</li>
    61. 

  61. 						<li><a href="buttons-types.html">Button basics</a></li>
    62. 

  62. 						<li><a href="buttons-icons.html">Button icons</a></li>
    63. 

  63. 						<li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
    64. 

  64. 						<li><a href="buttons-grouped.html">Grouped buttons</a></li>
    65. 

  65. 						<li><a href="buttons-themes.html">Theming buttons</a></li>
    66. 

  66. 

  67. 					</ul>
    68. 

  68. 			</div>
    69. 

  69. 		</div>		
    70. 

  70. 

  71. 	</div><!-- /content -->
    72. 

  72. 

  73. 	<div data-role="footer" class="footer-docs" data-theme="c">
    74. 

  74. 			<p>&copy; 2011 The jQuery Project</p>
    75. 

  75. 	</div>
    76. 

  76. 

  77. 	</div><!-- /page -->
    78. 

  78. 

  79. 	</body>
    80. 

  80. 	</html>
    81.