Question

我有一个jQuery-mobile应用程序，它在beforepageshow事件中从服务器检索数据，然后根据检索到的数据创建UI元素。

现在，在这些动态创建的UI元素中，有一个多选菜单。我已经尝试了原生选择菜单和自定义选择菜单。它接缝他们都有一些问题。

首先，本机选择菜单方法（在移动设备上查看）：

https://jsfiddle.net/pengyanb/kb8ad014/7/

问题是每次用户点击选择菜单中的一个项目时，菜单会自动隐藏。用户必须再次打开菜单以进行更多选择。

＆＃13;

$(document).on("pagebeforeshow", "#page1", function(){
   console.log("pagebeforeshow");
   $('#page1UiContent').empty();
   $('#page1UiContent').append('<select id="dynamicSelect" multiple="multiple" data-theme="b">'+
            '<option value="1" selected>option 1</option>'+
            '<option value="2" selected>option 2</option>'+
            '<option value="3">option 3</option>'+
            '<option value="4">option 4</option>'+
            '<option value="5" selected>option 5</option>'+
            '<option value="6" selected>option 6</option>'+
            '<option value="7">option 7</option>'+
            '<option value="8">option 8</option>'+
            '<option value="9">option 9</option>'+
            '<option value="10">option 10</option>'+
            '<option value="11">option 11</option>'+
            '<option value="12">option 12</option>'+
        '</select>'); 
    $('#dynamicSelect').selectmenu().trigger('create');
});

＆＃13;

<div data-role="page" data-theme="a" id="page1">
    <div data-role="header" data-position="fixed">
        <h5>Native Multi-Select Menu</h5>
    </div>
    <div data-role="main" class="ui-content" id="page1UiContent">
    </div>
</div>

＆＃13;

其次，我测试了自定义选择菜单方法：

https://jsfiddle.net/pengyanb/9q6ows90/2/

这次问题是当长列表＆＃34;弹出选择菜单＆＃34;关闭，它将导致原始页面重新加载，＆＃34; pagebeforeshow＆＃34;事件被触发，一切都将被重新创建。因此，用户对选择菜单的修改将丢失。

＆＃13;

$(document).on("pagebeforeshow", "#page1", function(){
   console.log("pagebeforeshow");
   $('#page1UiContent').empty();
   $('#page1UiContent').append('<select id="dynamicSelect" data-native-menu="false" multiple="multiple" data-theme="b">'+
            '<option value="1" selected>option 1</option>'+
            '<option value="2" selected>option 2</option>'+
            '<option value="3">option 3</option>'+
            '<option value="4">option 4</option>'+
            '<option value="5" selected>option 5</option>'+
            '<option value="6" selected>option 6</option>'+
            '<option value="7">option 7</option>'+
            '<option value="8">option 8</option>'+
            '<option value="9">option 9</option>'+
            '<option value="10">option 10</option>'+
            '<option value="11">option 11</option>'+
            '<option value="12">option 12</option>'+
        '</select>'); 
    $('#dynamicSelect').selectmenu().trigger('create');
});

＆＃13;

<div data-role="page" data-theme="a" id="page1">
    <div data-role="header" data-position="fixed">
        <h5>Custom Multi-Select Menu</h5>
    </div>
    <div data-role="main" class="ui-content" id="page1UiContent">
    </div>
</div>

＆＃13;

任何人都可以提前解决这些问题。

Answer 1

使用pagecontainer小部件的beforeshow事件代替pagebeforeshow：

http://api.jquerymobile.com/pagecontainer/#event-beforeshow

对于长列表，jQM创建一个对话框而不是一个实际上是新页面的弹出窗口。因此，它在打开和关闭时触发页面事件。该对话框的id为select +' - dialog';所以在pagecontainer事件中，当toPage为page1且prevPage不是对话框时，你可以创建动态选择：

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    if (ui.toPage.prop("id") == "page1" && ui.prevPage.prop("id") != "dynamicSelect-dialog") {
       $('#page1UiContent').empty().append('<select id="dynamicSelect" data-native-menu="false" multiple="multiple" data-theme="b">'+
                '<option value="1" selected>option 1</option>'+
                '<option value="2" selected>option 2</option>'+
                '<option value="3">option 3</option>'+
                '<option value="4">option 4</option>'+
                '<option value="5" selected>option 5</option>'+
                '<option value="6" selected>option 6</option>'+
                '<option value="7">option 7</option>'+
                '<option value="8">option 8</option>'+
                '<option value="9">option 9</option>'+
                '<option value="10">option 10</option>'+
                '<option value="11">option 11</option>'+
                '<option value="12">option 12</option>'+
            '</select>'); 
        $('#dynamicSelect').selectmenu();
    }
});

更新了 FIDDLE

JQuery Mobile多选菜单（原生和自定义）问题

1 个答案: