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

我在尝试重定向到另一个页面时出现问题，当用户从jQuery Mobile的<select>菜单中选择一个选项时。重定向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更改回来。我认为这是干扰我尝试去做的重定向的原因。

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

编辑＃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中的大选择菜单的更改

回答

相关问题