JQuery Mobile родной выбор не работает на Droid - PullRequest
Новая
       8

JQuery Mobile родной выбор не работает на Droid

14 голосов
/ 15 июня 2011

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

<!DOCTYPE HTML>

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <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>

Ответы [ 3 ]

15 голосов
/ 01 июля 2011

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

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

2 голосов
/ 15 июня 2011

Из того, что я знаю, нет необходимости использовать 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>

Образец здесь

0 голосов
/ 11 октября 2012

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

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

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

...