重定向jQuery Mobile中大选择菜单的更改 [英] Redirect on change of large select menu in jQuery Mobile
问题描述
当用户从< select> 菜单中选择一个选项时，我遇到了尝试重定向到另一个页面的问题： //jquerymobile.com/rel =nofollow> jQuery Mobile 。
I'm having an issue with trying to redirect to another page when a user selects an option from a <select> menu in jQuery Mobile.
下面是一个非常小的例子，类似于我正在尝试做的事情这证明了我所拥有的问题。问题是当选项列表太大而不适合屏幕时，重定向会不工作。当选项适合屏幕时，它工作正常。 （您可以通过使窗口非常小来在桌面浏览器中重现这一点。）
Below is a very small example similar to what I'm trying to do that demonstrates the issue I'm having. The problem is that when the list of options is too big to fit on the screen, the redirect does not work. It works fine when the options fit on the screen. (You can reproduce this in a desktop browser by making your window really small.)
<!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 ：
当
选择有少量适合设备屏幕的选项，菜单将显示为带有弹出过渡的小叠加层。 [...]如果在设备屏幕上显示的选项太多，框架将自动创建一个新的页面，其中填充了标准列表视图。这允许我们使用设备上包含的本机滚动来移动长列表。标签内的文字用作此页面的标题。
When the
selecthas a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition. [...] When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard list view for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the label is used as the title for this page.
当它创建新的页面时，它会添加＃& ui-state = dialog 到URL的末尾，然后在选择一个选项时，它会更改URL。我认为这是干扰我正在尝试做的重定向。
When it creates the new "page", it adds #&ui-state=dialog to the end of the URL, and then when select an option, it changes the URL back. I think this is what is interfering with the redirect that I'm trying to do.
有关解决此问题的最佳方法的任何建议吗？
Any suggestions on the best way to fix this?
编辑＃1：我应该提到我无法使用 $ .mobile.changePage（）因为我正在重定向的页面做了一些奇怪的重定向，它自己正在弄乱过渡。对不起，这个例子中没有显示。
Edit #1: I should have mentioned that I'm unable to use $.mobile.changePage() because the page to which I'm redirecting does some weird redirecting of it's own that's messing up the transitions. I'm sorry that this was not represented in the example.
编辑＃2：我粘贴了上面的代码（而不是使用gist ）这样人们就可以通过搜索更容易地找到这个问题了。
Edit #2: I pasted my code above (instead of using a gist) so that people can find this question easier via search.
推荐答案
我想通了，所以我回答了我自己的问题。
I figured it out so I'm answering my own question.
以下是修复它的代码：
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中大选择菜单的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
