当用户从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
有少量的选项适合设备屏幕时,菜单将显示为一个带有弹出转换的小覆盖。[…]当它有太多的选项无法在设备屏幕上显示时,框架将自动创建一个新的“页面”,其中填充了选项的标准list view。这允许我们使用设备上的本地滚动功能来浏览长列表。标签内的文本用作此页的标题。当它创建新的“页面”时,它会将
#&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;
}
关于javascript - 在jQuery Mobile中更改大选择菜单时重定向,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10920495/