Permalink
Browse files

Selectmenu: Add demo sporting placeholder

(cherry picked from commit 9cb1040)

Closes gh-7398
Fixes gh-7396
  • Loading branch information...
gabrielschulhof committed May 13, 2014
1 parent 67d897a commit 0614979f259dd071fa8c5889be3c308cc0013863
Showing with 71 additions and 52 deletions.
  1. +71 −52 demos/selectmenu-custom-filter/index.php
@@ -12,59 +12,64 @@
<script src="../_assets/js/"></script>
<script src="../../js/"></script>
<script>
$.mobile.document
// "filter-menu-menu" is the ID generated for the listview when it is created
// by the custom selectmenu plugin. Upon creation of the listview widget we
// want to prepend an input field to the list to be used for a filter.
.on( "listviewcreate", "#filter-menu-menu", function( e ) {
var input,
listbox = $( "#filter-menu-listbox" ),
form = listbox.jqmData( "filter-form" ),
listview = $( e.target );
// We store the generated form in a variable attached to the popup so we
// avoid creating a second form/input field when the listview is
// destroyed/rebuilt during a refresh.
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
$( "#filter-menu-listbox" )
.prepend( form )
.jqmData( "filter-form", form );
}
// Instantiate a filterable widget on the newly created listview and
// indicate that the generated input is to be used for the filtering.
listview.filterable({ input: input });
})
// The custom select list may show up as either a popup or a dialog,
// depending how much vertical room there is on the screen. If it shows up
// as a dialog, then the form containing the filter input field must be
// transferred to the dialog so that the user can continue to use it for
// filtering list items.
//
// After the dialog is closed, the form containing the filter input is
// transferred back into the popup.
.on( "pagebeforeshow pagehide", "#filter-menu-dialog", function( e ) {
var form = $( "#filter-menu-listbox" ).jqmData( "filter-form" ),
placeInDialog = ( e.type === "pagebeforeshow" ),
destination = placeInDialog ? $( e.target ).find( ".ui-content" ) : $( "#filter-menu-listbox" );
form
.find( "input" )
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput( "option", "inset", !placeInDialog )
.end()
.prependTo( destination );
$.mobile.document
// The custom selectmenu plugin generates an ID for the listview by suffixing the ID of the
// native widget with "-menu". Upon creation of the listview widget we want to place an
// input field before the list to be used for a filter.
.on( "listviewcreate", "#filter-menu-menu,#title-filter-menu-menu", function( event ) {
var input,
list = $( event.target )
form = list.jqmData( "filter-form" );
// We store the generated form in a variable attached to the popup so we avoid creating a
// second form/input field when the listview is destroyed/rebuilt during a refresh.
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
list
.before( form )
.jqmData( "filter-form", form ) ;
form.jqmData( "listview", list );
}
// Instantiate a filterable widget on the newly created listview and indicate that the
// generated input is to be used for the filtering.
list.filterable({
input: input,
children: "> li:not(:jqmData(placeholder='true'))"
});
})
// The custom select list may show up as either a popup or a dialog, depending how much
// vertical room there is on the screen. If it shows up as a dialog, then the form containing
// the filter input field must be transferred to the dialog so that the user can continue to
// use it for filtering list items.
.on( "pagebeforeshow", "#filter-menu-dialog,#title-filter-menu-dialog", function( event ) {
var dialog = $( event.target )
listview = dialog.find( "ul" ),
form = listview.jqmData( "filter-form" );
// Attach a reference to the listview as a data item to the dialog, because during the
// pagehide handler below the selectmenu widget will already have returned the listview
// to the popup, so we won't be able to find it inside the dialog with a selector.
dialog.jqmData( "listview", listview );
// Place the form before the listview in the dialog.
listview.before( form );
})
// After the dialog is closed, the form containing the filter input is returned to the popup.
.on( "pagehide", "#filter-menu-dialog,#title-filter-menu-dialog", function( event ) {
var listview = $( event.target ).jqmData( "listview" ),
form = listview.jqmData( "filter-form" );
// Put the form back in the popup. It goes ahead of the listview.
listview.before( form );
});
</script>
<style>
.ui-selectmenu.ui-popup .ui-input-search {
@@ -118,6 +123,20 @@
</form>
</div>
<p>You can also handle custom menus with placeholder items:</p>
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<form>
<select id="title-filter-menu" data-native-menu="false">
<option>Select fruit...</option>
<option value="orange">Orange</option>
<option value="apple">Apple</option>
<option value="peach">Peach</option>
<option value="lemon">Lemon</option>
</select>
</form>
</div>
</div><!-- /content -->
<?php include( '../jqm-navmenu.php' ); ?>

0 comments on commit 0614979

Please sign in to comment.