PageRenderTime 52ms CodeModel.GetById 23ms RepoModel.GetById 1ms app.codeStats 0ms

/demos/selectmenu-custom-filter/index.php

https://github.com/zenvendof/jquery-mobile
PHP | 274 lines | 217 code | 36 blank | 21 comment | 5 complexity | d629e84fa150420acf3bde5bea403d45 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Filterable inside custom select - jQuery Mobile Demos</title>
  7. <link rel="shortcut icon" href="../favicon.ico">
  8. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
  9. <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
  10. <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
  11. <script src="../../external/jquery/jquery.js"></script>
  12. <script src="../_assets/js/"></script>
  13. <script src="../../js/"></script>
  14. <script>
  15. ( function( $ ) {
  16. function pageIsSelectmenuDialog( page ) {
  17. var isDialog = false,
  18. id = page && page.attr( "id" );
  19. $( ".filterable-select" ).each( function() {
  20. if ( $( this ).attr( "id" ) + "-dialog" === id ) {
  21. isDialog = true;
  22. return false;
  23. }
  24. });
  25. return isDialog;
  26. }
  27. $.mobile.document
  28. // Upon creation of the select menu, we want to make use of the fact that the ID of the
  29. // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
  30. // We retrieve the listview and insert a search input before it.
  31. .on( "selectmenucreate", ".filterable-select", function( event ) {
  32. var input,
  33. selectmenu = $( event.target ),
  34. list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
  35. form = list.jqmData( "filter-form" );
  36. // We store the generated form in a variable attached to the popup so we avoid creating a
  37. // second form/input field when the listview is destroyed/rebuilt during a refresh.
  38. if ( !form ) {
  39. input = $( "<input data-type='search'></input>" );
  40. form = $( "<form></form>" ).append( input );
  41. input.textinput();
  42. list
  43. .before( form )
  44. .jqmData( "filter-form", form ) ;
  45. form.jqmData( "listview", list );
  46. }
  47. // Instantiate a filterable widget on the newly created selectmenu widget and indicate that
  48. // the generated input form element is to be used for the filtering.
  49. selectmenu
  50. .filterable({
  51. input: input,
  52. children: "> option[value]"
  53. })
  54. // Rebuild the custom select menu's list items to reflect the results of the filtering
  55. // done on the select menu.
  56. .on( "filterablefilter", function() {
  57. selectmenu.selectmenu( "refresh" );
  58. });
  59. })
  60. // The custom select list may show up as either a popup or a dialog, depending on how much
  61. // vertical room there is on the screen. If it shows up as a dialog, then the form containing
  62. // the filter input field must be transferred to the dialog so that the user can continue to
  63. // use it for filtering list items.
  64. .on( "pagecontainerbeforeshow", function( event, data ) {
  65. var listview, form;
  66. // We only handle the appearance of a dialog generated by a filterable selectmenu
  67. if ( !pageIsSelectmenuDialog( data.toPage ) ) {
  68. return;
  69. }
  70. listview = data.toPage.find( "ul" );
  71. form = listview.jqmData( "filter-form" );
  72. // Attach a reference to the listview as a data item to the dialog, because during the
  73. // pagecontainerhide handler below the selectmenu widget will already have returned the
  74. // listview to the popup, so we won't be able to find it inside the dialog with a selector.
  75. data.toPage.jqmData( "listview", listview );
  76. // Place the form before the listview in the dialog.
  77. listview.before( form );
  78. })
  79. // After the dialog is closed, the form containing the filter input is returned to the popup.
  80. .on( "pagecontainerhide", function( event, data ) {
  81. var listview, form;
  82. // We only handle the disappearance of a dialog generated by a filterable selectmenu
  83. if ( !pageIsSelectmenuDialog( data.toPage ) ) {
  84. return;
  85. }
  86. listview = data.prevPage.jqmData( "listview" ),
  87. form = listview.jqmData( "filter-form" );
  88. // Put the form back in the popup. It goes ahead of the listview.
  89. listview.before( form );
  90. });
  91. })( jQuery );
  92. </script>
  93. <style>
  94. .ui-selectmenu.ui-popup .ui-input-search {
  95. margin-left: .5em;
  96. margin-right: .5em;
  97. }
  98. .ui-selectmenu.ui-dialog .ui-content {
  99. padding-top: 0;
  100. }
  101. .ui-selectmenu.ui-dialog .ui-selectmenu-list {
  102. margin-top: 0;
  103. }
  104. .ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
  105. border-top-width: 1px;
  106. -webkit-border-radius: 0;
  107. border-radius: 0;
  108. }
  109. .ui-selectmenu.ui-dialog .ui-header {
  110. border-bottom-width: 1px;
  111. }
  112. </style>
  113. </head>
  114. <body>
  115. <div data-role="page" class="jqm-demos">
  116. <div data-role="header" class="jqm-header">
  117. <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
  118. <p><span class="jqm-version"></span> Demos</p>
  119. <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
  120. <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
  121. </div><!-- /header -->
  122. <div role="main" class="ui-content jqm-content">
  123. <h1>Filterable inside custom select</h1>
  124. <p>
  125. These examples show how you can filter the list inside a custom select menu.
  126. </p>
  127. <p>You can create an input field and prepend it to the popup and/or the dialog used by the custom select menu list and you can use it to filter items inside the list by instantiating a filterable widget on the select menu.</p>
  128. <h2>Examples</h2>
  129. <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
  130. <form>
  131. <div class="ui-field-contain">
  132. <label for="filter-menu">Basic:</label>
  133. <select id="filter-menu" data-native-menu="false" class="filterable-select">
  134. <option value="SFO">San Francisco</option>
  135. <option value="LAX">Los Angeles</option>
  136. <option value="YVR">Vancouver</option>
  137. <option value="YYZ">Toronto</option>
  138. </select>
  139. </div>
  140. </form>
  141. </div>
  142. <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
  143. <form>
  144. <div class="ui-field-contain">
  145. <label for="title-filter-menu">Placeholder:</label>
  146. <select id="title-filter-menu" data-native-menu="false" class="filterable-select">
  147. <option>Select fruit...</option>
  148. <option value="orange">Orange</option>
  149. <option value="apple">Apple</option>
  150. <option value="peach">Peach</option>
  151. <option value="lemon">Lemon</option>
  152. </select>
  153. </div>
  154. </form>
  155. </div>
  156. <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
  157. <form>
  158. <div class="ui-field-contain">
  159. <label for="filtertext">Filter text:</label>
  160. <select id="filtertext" data-native-menu="false" class="filterable-select">
  161. <option>Select fruit...</option>
  162. <option value="orange" data-filtertext="Florida">Orange</option>
  163. <option value="apple">Apple</option>
  164. <option value="peach">Peach</option>
  165. <option value="lemon">Lemon</option>
  166. </select>
  167. </div>
  168. </form>
  169. </div>
  170. <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
  171. <form>
  172. <div class="ui-field-contain">
  173. <label for="select-custom-20">Long list:</label>
  174. <select name="select-custom-20" id="select-custom-20" data-native-menu="false" class="filterable-select">
  175. <option value="AL">Alabama</option>
  176. <option value="AK">Alaska</option>
  177. <option value="AZ">Arizona</option>
  178. <option value="AR">Arkansas</option>
  179. <option value="CA">California</option>
  180. <option value="CO">Colorado</option>
  181. <option value="CT">Connecticut</option>
  182. <option value="DE">Delaware</option>
  183. <option value="FL">Florida</option>
  184. <option value="GA">Georgia</option>
  185. <option value="HI">Hawaii</option>
  186. <option value="ID">Idaho</option>
  187. <option value="IL">Illinois</option>
  188. <option value="IN">Indiana</option>
  189. <option value="IA">Iowa</option>
  190. <option value="KS">Kansas</option>
  191. <option value="KY">Kentucky</option>
  192. <option value="LA">Louisiana</option>
  193. <option value="ME">Maine</option>
  194. <option value="MD">Maryland</option>
  195. <option value="MA">Massachusetts</option>
  196. <option value="MI">Michigan</option>
  197. <option value="MN">Minnesota</option>
  198. <option value="MS">Mississippi</option>
  199. <option value="MO">Missouri</option>
  200. <option value="MT">Montana</option>
  201. <option value="NE">Nebraska</option>
  202. <option value="NV">Nevada</option>
  203. <option value="NH">New Hampshire</option>
  204. <option value="NJ">New Jersey</option>
  205. <option value="NM">New Mexico</option>
  206. <option value="NY">New York</option>
  207. <option value="NC">North Carolina</option>
  208. <option value="ND">North Dakota</option>
  209. <option value="OH">Ohio</option>
  210. <option value="OK">Oklahoma</option>
  211. <option value="OR">Oregon</option>
  212. <option value="PA">Pennsylvania</option>
  213. <option value="RI">Rhode Island</option>
  214. <option value="SC">South Carolina</option>
  215. <option value="SD">South Dakota</option>
  216. <option value="TN">Tennessee</option>
  217. <option value="TX">Texas</option>
  218. <option value="UT">Utah</option>
  219. <option value="VT">Vermont</option>
  220. <option value="VA">Virginia</option>
  221. <option value="WA">Washington</option>
  222. <option value="WV">West Virginia</option>
  223. <option value="WI">Wisconsin</option>
  224. <option value="WY">Wyoming</option>
  225. </select>
  226. </div>
  227. </form>
  228. </div><!--/demo-html -->
  229. </div><!-- /content -->
  230. <?php include( '../jqm-navmenu.php' ); ?>
  231. <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
  232. <p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
  233. <p>Copyright 2014 The jQuery Foundation</p>
  234. </div><!-- /footer -->
  235. <?php include( '../jqm-search.php' ); ?>
  236. </div><!-- /page -->
  237. </body>
  238. </html>