Переадресация на изменение большого меню выбора в jQuery Mobile

У меня возникла проблема с попыткой перенаправления на другую страницу, когда пользователь выбирает опцию из меню <select> в jQuery Mobile.Переадресация на изменение большого меню выбора в jQuery Mobile

Ниже приведен небольшой пример, аналогичный тому, что я пытаюсь сделать, что демонстрирует проблему, с которой я сталкиваюсь. Проблема в том, что, когда список опций слишком велик, чтобы поместиться на экране, перенаправление делает не работы. Он отлично работает, когда параметры подходят на экране. (Вы можете воспроизвести это в браузере настольного компьютера, делая ваше окно очень мало.)

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery Mobile Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script> 
    $(function() { 
     $('#mySelect').bind('change', function() { 
     // The actual logic for building the URL is more complicated, obviously. 
     // This is just an example. 
     var url = 'jquery-mobile-test.html?param=' + this.value; 
     location.href = url; 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div data-role="page" class="type-home"> 
    <div data-role="content"> 
     <div data-role="fieldcontain"> 
     <select data-native-menu="false" name="param" id="mySelect"> 
      <option>Select an Option...</option> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
      <option value="3">Three</option> 
      <option value="4">Four</option> 
      <option value="5">Five</option> 
      <option value="6">Six</option> 
      <option value="7">Seven</option> 
      <option value="8">Eight</option> 
      <option value="9">Nine</option> 
      <option value="10">Ten</option> 
     </select> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Некоторый фон из jQuery Mobile Docs:

Когда select имеет небольшое количество вариантов, которые будут соответствовать на экран устройства, меню появится в виде небольшого наложения с переходом поп-музыки. [...] Когда у него слишком много параметров для отображения на экране устройства, среда автоматически создаст новую «страницу», заполненную стандартом list view для параметров. Это позволяет нам использовать встроенную прокрутку, включенную в устройство, для перемещения по длинному списку. Текст внутри метки используется как заголовок для этой страницы.

Когда он создает новую «страницу», он добавляет #&ui-state=dialog к концу URL, а затем, когда выберите вариант, он изменяет URL обратно. Я думаю, что это то, что мешает перенаправлению, которое я пытаюсь сделать.

Любые предложения по наилучшему способу исправить это?

Edit # 1: я должен отметить, что я не могу использовать $.mobile.changePage() потому, что страница, на которую я перенаправлении делает некоторые странные перенаправление его собственный, который портя переходы. Мне жаль, что это не было представлено в примере.

Редактировать # 2: Я вставил свой код выше (вместо использования сущности), чтобы люди могли легче найти этот вопрос с помощью поиска.

источник

2012-06-06 jnrbsn

я имел переместите это на jsfiddle.net, чтобы проверить свой код. Я что-то упускаю, или можно проверить его в своей сути? – BumbleB2na

Вы можете просто скачать html-файл и протестировать его локально на своем компьютере. – jnrbsn

Я решил не ставить его на jsfiddle, потому что он будет внутри iframe, и было бы труднее объяснить, как воспроизвести проблему. – jnrbsn

Я понял это так, что я отвечая на мой собственный вопрос.

Вот код, который установил его для меня:

var url = 'redirect-to-this-page.html', 
    $dialog = $('div.ui-page.ui-dialog.ui-page-active'); 

if ($dialog.length > 0) { 
    $dialog.bind('pagebeforehide', function() { 
     location.href = url; 
    }); 
} else { 
    location.href = url; 
}

источник

2012-06-06 20:12:14 jnrbsn

У меня такая проблема не только с полным списком опций, но и с всплывающими опциями. Это исправление будет работать только для «полного экрана». Для всплывающего окна должен быть другой обработчик событий (и селектор) - я использовал mouseleave. –

Мог бы также позволить JQuery Mobile закончить свои маленькие волшебные шоу, заменив ваш location.href перенаправлять с реализацией JQuery Mobile в:

$.mobile.changePage('jquery-mobile-test.html?param=' + this.value);

источник

2012-06-06 19:34:22 BumbleB2na

См. «Изменить» в моем вопросе. – jnrbsn

Все в порядке. Интересное использование события «pagebeforehide», которое мне нужно будет запомнить. – BumbleB2na

Кстати, '$ .mobile.changePage()' даже не работает последовательно в моем базовом примере выше. – jnrbsn

Это грязная исправить, но вы можете окружить window.location с SetTimeout функции:

setTimeout(function() { 
    window.location.href = '/some-url.html'; 
}, 0);

источник

2013-12-30 13:34:07

Переадресация на изменение большого меню выбора в jQuery Mobile

ответ

Смежные вопросы