/docs/lists/lists-readonly-inset.html

https://github.com/yarontron/jquery-mobile · HTML · 123 lines · 101 code · 22 blank · 0 comment · 0 complexity · d65e94ee53956bc7ef917bba125ab05f 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 - Readonly Inset Lists</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="../../js/"></script>
    11. 

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

  12. </head> 
    13. 

  13. <body> 
    14. 

  14. 

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

  16. 

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

  18. 		<h1>Readonly Inset Lists</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. 	
    24. 

  24. 			<h2>Simple list</h2>
    25. 

  25. 

  26. 			<ul data-role="listview" data-inset="true">
    27. 

  27. 				<li>Acura</li>
    28. 

  28. 				<li>Audi</li>
    29. 

  29. 				<li>BMW</li>
    30. 

  30. 				<li>Cadillac</li>
    31. 

  31. 				<li>Ferrari</li>
    32. 

  32. 			</ul>
    33. 

  33. 

  34. 		<h2>Count bubbles</h2>
    35. 

  35. 		<ul data-role="listview" data-inset="true">
    36. 

  36. 			<li>Inbox <span class="ui-li-count">12</span></li>
    37. 

  37. 				<li>Outbox <span class="ui-li-count">0</span></li>
    38. 

  38. 				<li>Drafts <span class="ui-li-count">4</span></li>
    39. 

  39. 				<li>Sent <span class="ui-li-count">328</span></li>
    40. 

  40. 				<li>Trash <span class="ui-li-count">62</span></li>
    41. 

  41. 		</ul>
    42. 

  42. 		
    43. 

  43. 		<h2>Numbered list</h2>
    44. 

  44. 			<ol data-role="listview" data-inset="true">
    45. 

  45. 				<li>The Godfather</li>
    46. 

  46. 				<li>Inception</li>
    47. 

  47. 				<li>The Good, the Bad and the Ugly </li>
    48. 

  48. 				<li>Pulp Fiction</li>
    49. 

  49. 				<li>Schindler's List</li>
    50. 

  50. 			</ol>
    51. 

  51. 			
    52. 

  52. 		<h2>Divided, formatted content</h2>
    53. 

  53. 		<ul data-role="listview" data-inset="true">
    54. 

  54. 			<li>
    55. 

  55. 				<h3>Stephen Weber</h3>
    56. 

  56. 				<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
    57. 

  57. 				<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
    58. 

  58. 				<p class="ui-li-aside"><strong>6:24</strong>PM</p>
    59. 

  59. 			</li>
    60. 

  60. 			<li>
    61. 

  61. 				<h3>jQuery Team</h3>
    62. 

  62. 				<p><strong>Boston Conference Planning</strong></p>
    63. 

  63. 				<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
    64. 

  64. 				<p class="ui-li-aside"><strong>9:18</strong>AM</p>
    65. 

  65. 			</li>
    66. 

  66. 		</ul>
    67. 

  67. 		
    68. 

  68. 			
    69. 

  69. 

  70. 		
    71. 

  71. 		<h2>Icon list</h2>
    72. 

  72. 		<ul data-role="listview" data-inset="true">
    73. 

  73. 			<li><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></li>
    74. 

  74. 			<li><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></li>
    75. 

  75. 			<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></li>
    76. 

  76. 			<li><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></li>
    77. 

  77. 			<li><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></li>
    78. 

  78. 			<li><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></li>
    79. 

  79. 		</ul>
    80. 

  80. 		
    81. 

  81. 		<h2>Thumbnail list</h2>
    82. 

  82. 

  83. 			<ul data-role="listview" data-inset="true">
    84. 

  84. 				<li>
    85. 

  85. 				<img src="images/album-bb.jpg" />
    86. 

  86. 				<h3>Broken Bells</h3>
    87. 

  87. 				<p>Broken Bells</p>
    88. 

  88. 			</li>
    89. 

  89. 			<li>
    90. 

  90. 				<img src="images/album-hc.jpg" />
    91. 

  91. 				<h3>Warning</h3>
    92. 

  92. 				<p>Hot Chip</p>
    93. 

  93. 			</li>
    94. 

  94. 			<li>
    95. 

  95. 				<img src="images/album-p.jpg" />
    96. 

  96. 				<h3>Wolfgang Amadeus Phoenix</h3>
    97. 

  97. 				<p>Phoenix</p>
    98. 

  98. 			</li>
    99. 

  99. 			</ul>
    100. 

  100. 			
    101. 

  101. 		<h2>Divided, filterable list</h2>
    102. 

  102. 			<ul data-role="listview" data-filter="true" data-inset="true">
    103. 

  103. 				<li data-role="list-divider">A</li>
    104. 

  104. 				<li>Adam Kinkaid</li>
    105. 

  105. 				<li>Alex Wickerham</li>
    106. 

  106. 				<li>Avery Johnson</li>
    107. 

  107. 				<li data-role="list-divider">B</li>
    108. 

  108. 				<li>Bob Cabot</li>
    109. 

  109. 				<li data-role="list-divider">C</li>
    110. 

  110. 				<li>Caleb Booth</li>
    111. 

  111. 				<li>Christopher Adams</li>
    112. 

  112. 			</ul>
    113. 

  113. 

  114. 

  115. 

  116. 

  117. 		
    118. 

  118. 		
    119. 

  119. 	</div><!-- /content -->
    120. 

  120. </div><!-- /page -->
    121. 

  121. 

  122. </body>
    123. 

  123. </html>
    124.