我想将这个http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/实现到我的项目中,但我没有得到任何东西,只有一个图像循环在屏幕中心。
<fieldset data-role="collapsible">
<label>Your preferred programming language: </label>
<form>
<select id="filter-menu" data-native-menu="false">
<option value="SFO">San Francisco</option>
<option value="LAX">Los Angeles</option>
<option value="YVR">Vancouver</option>
<option value="YYZ">Toronto</option>
</select>
</form>
</fieldset>
身体标签后:
<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 );
});
</script>
我还尝试将$ .mobile.document放在$ .function()中,结果是一样的,一个图像在屏幕中心循环而没有任何内容。
http://i.stack.imgur.com/zBsK0.jpg
我做错了什么?感谢。