jquery mobile - пользовательское меню выбора во всплывающем окне

Пожалуйста, найдите ниже скрипку http://jsfiddle.net/yesvin/Xj8p8/

<ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="pageselect">page select</label>
            <select name="pageselect" id="pageselect" data-native-menu="false">                
                <option value="">Choose One</option>
                <option value="">pageselect opt 1</option>
                <option value="">pageselect opt 2</option>
                <option value="">pageselect opt 3</option>
            </select>
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
</ul>   

<a href="#pop" data-rel="popup" data-position-to="window" data-role="button" id="farmer_family_member">Add Popup</a>


<div data-role="popup" id="pop">
    <ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="popupselect">popup select</label>
            <select name="popupselect" id="popupselect" data-native-menu="false">                
                <option value="">popup select opt 1</option>
                <option value="">popup select opt 2</option>
                <option value="">popup select opt 3</option>
            </select>
        </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
         <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>        
    </ul> 
</div>

Тот же, что и на моей странице, когда я просматриваю эту страницу в мобильном телефоне, у нее есть некоторые проблемы,

  1. Когда я нажимаю кнопку "Добавить всплывающее окно", открывается всплывающее окно. Внутри этого всплывающего окна есть меню выбора, а data-native-menu = false для этого меню выбора не работает. Как мне это включить?

  2. Если я изменю меню "popupselect" внутри всплывающего окна, откроется меню "pageselect". Как я могу предотвратить это?

Пожалуйста посоветуй...

Заранее спасибо.

Источник

1 ответ

Решение

Первый ответ

Короткий ответ: ты не можешь этого сделать. Я знаю, это звучит глупо, но у jQuery Mobile есть некоторые ограничения для всплывающих окон, и главное ограничение заключается в том, что вы не можете связывать всплывающие окна. Поскольку пользовательское меню выбора - это просто еще одно всплывающее окно, его нельзя отобразить во всплывающем окне.

Примечание. Цепочка всплывающих окон запрещена.

В настоящее время фреймворк не поддерживает цепочку всплывающих окон, поэтому невозможно вставить ссылку из одного всплывающего окна в другое. Все ссылки с data-rel="popup" внутри всплывающего окна ничего не сделают.

Это также означает, что пользовательские меню выбора не будут работать во всплывающих окнах, поскольку они сами реализуются с помощью всплывающих окон. Если вы поместите меню выбора внутри всплывающего меню, оно будет отображено как собственное меню выбора, даже если вы укажете data-native-menu="false".

Официальная документация: http://api.jquerymobile.com/popup/

Существует доступное решение этой проблемы, но его нельзя использовать в этом случае. Чтобы обходной путь работал, одно всплывающее окно должно быть закрыто до открытия второго. К сожалению, здесь это невозможно.

Второй ответ

Это также известно как падение через события. Это холодная ошибка javascript, хорошо, не ошибка perse, потому что javascript никогда не предназначался для такой работы.

В основном, когда вы нажимаете на один элемент, событие click попадает на элемент ниже.

Это можно предотвратить с помощью следующих функций:

А вот пример jsFiddle, чтобы вы могли понять эту проблему: http://jsfiddle.net/Gajotres/Xz2np/

$('#page1').live('pagebeforeshow',function(e,data){
    $('.someDiv').live('click', function (e) {   
        alert('Event is not going to propagate to content div, thus not hiding a header');             
        event.stopPropagation();   
        event.stopImmediatePropagation();
    });
});

Чтобы понять эту проблему, просто нажмите на пример DIV, затем прокомментируйте эти 2 строки, снова запустите пример и снова нажмите на DIV.

Одна последняя вещь

Это будет звучать грубо, но это нужно сказать. Не забывайте время от времени принимать ответ. Я вижу, я дал вам несколько ответов на ваши предыдущие вопросы. Я обычно не против этого, но другие делают, и они не помогут вам.

Источник
Другие вопросы по тегам