在jQuery Mobile中更改大选择菜单时重定向

Redirect on change of large select menu in jQuery Mobile

本文关键字：选择 菜单 重定向 jQuery Mobile      更新时间：2023-09-26

当用户从jQuery Mobile的<select>菜单中选择一个选项时，我在尝试重定向到另一个页面时遇到问题。

下面是一个非常小的示例，类似于我正在尝试执行的操作，该示例演示了我遇到的问题。问题是，当选项列表太大而无法容纳在屏幕上时，重定向不起作用。当选项适合屏幕时，它可以正常工作。（您可以通过使窗口非常小来在桌面浏览器中重现此内容。

<!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具有少量适合设备屏幕的选项时，菜单将显示为带有弹出过渡的小覆盖层。[...]当它有太多选项无法显示在设备的屏幕上时，框架将自动创建一个新的"页面"，其中填充了选项的标准列表视图。这使我们能够使用设备上包含的本机滚动在长列表中移动。标签内的文本用作此页面的标题。

当它创建新的"页面"时，它会将#&ui-state=dialog添加到 URL 的末尾，然后在选择一个选项时，它会将 URL 更改回来。我认为这就是干扰我正在尝试做的重定向的原因。

关于解决此问题的最佳方法的任何建议？

编辑#1：我应该提到我无法使用$.mobile.changePage()因为我重定向到的页面对它自己的页面进行了一些奇怪的重定向，从而弄乱了过渡。很抱歉，此示例中没有表示这一点。

编辑#2：我粘贴了上面的代码（而不是使用要点），以便人们可以通过搜索更轻松地找到这个问题。

我想通了，

所以我回答了我自己的问题。

这是为我修复它的代码：

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;
}
不妨

让jQuery Mobile完成它的小魔术表演，用jQuery Mobile的实现替换你的location.href重定向：

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

这是一个肮脏的修复，但你可以用setTimeout函数包围window.location：

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