JQuery Mobile native не работает над дроидом

Это абсолютно сводит меня с ума. У меня есть Droid X 2.3.3. По какой-то причине пользовательские меню выбора не откроются, если установлены data-role="none" или "data-native-menu="true". Кто-нибудь знает, почему это происходит?

<!DOCTYPE HTML>

<html>
    <head>
        <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css'; return false;" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
        </head>
    <body>
        <div id="wrapper-div">
            <div data-role="page" data-theme="b"> 
                <div data-position="inline" data-role="header">                
                    <h1>Test Page</h1>
                </div>
                <div id="content" data-role="content">               
                    <form action="" method="post">
                        <fieldset data-role="fieldcontain">
                        <label for="some-options">Some Options:</label>
                            <select data-native-menu="true" name="some-options" id="some-options">
                                <option value="1">Option 1</option>    
                                <option value="2">Option 2</option>      
                            </select>
                        </fieldset>

                        <fieldset data-role="fieldcontain">
                        <label for="mote-options">More Options:</label>
                            <select data-role="none" name="more-options" id="more-options">
                                <option value="1">Option 1</option>    
                                <option value="2">Option 2</option>      
                            </select>
                        </fieldset>

                        <fieldset data-role="fieldcontain">
                        <label for="evenmore-options">Even More Options:</label>
                            <select name="more-options" id="evenmore-options">
                                <option value="1">Option 1</option>    
                                <option value="2">Option 2</option>      
                            </select>
                        </fieldset>
                    </form>
                </div>
            </div>    
        </div>
    </body>
</html>

Ответы

Ответ 1

Я испытал то же самое. Вы должны сохранить data-type="page" непосредственно под <body>. См. Эту статью jQM для более подробной информации: https://github.com/jquery/jquery-mobile/issues/1051

Итак, удалите <div id="wrapper-div"> - он вам все равно не нужен;-) Однако я считаю, что jQM не должен ставить такие ограничения на нас разработчикам. В конце концов, он работает на iPhone, поэтому мне очень любопытно, почему он не работает должным образом на Android.

Ответ 2

Из того, что я знаю, нет необходимости использовать data-role="none"

просто установите data-native-menu="true".

 <select data-native-menu="true" name="some-options" id="some-options">
          <option value="1">Option 1</option>    
          <option value="2">Option 2</option>      
 </select>

Пример здесь

Ответ 3

У меня была такая же проблема, и мне пришлось изменить ее на data-native-menu = false, потому что у меня нет элемента SELECT внутри элемента FORM.

Если я правильно понял, вы должны установить data-native-menu = true, если у вас есть SELECT внутри FORM, на основе обсуждения здесь:

JQuery Mobile Select Box не работает