0

一直在与这个斗争一段时间。我试图让选择菜单作为导航菜单工作，但我无法让 URL 正常工作并让它实际更改页面。

在头上：

<script>
$(function() {
    $("#select-choice-1").click(function() {
        $.mobile.changePage($("#select-choice-1"));
    });        
});
</script>

使用此菜单：

<div id="MobileWrapper" data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1" data-theme="a" data-form="ui-btn-up-a" data-mini="true">
<option data-placeholder="true">Navigation</option><!-- data=placeholder makes this not show up in the pop up-->
<option value="/index.php" data-ajax="false">Home</option>
<option value="/services/index.php" data-ajax="false">Services</option>
<option value="/trainers/index.php" data-ajax="false">Trainers</option>
<option value="/locations/index.php" data-ajax="false">Locations</option>
<option value="/calendar/index.php" data-ajax="false">Calendar</option>
<option value="/contactus/index.php" data-ajax="false">Contact Us</option>
</select>
</div><!--END MobileWrapper DIV-->
4

2 回答 2

1

尝试

$(function() {
    $("#select-choice-1").change(function() {
        $.mobile.changePage($(this).val());
    });        
});

每次用户单击下拉菜单时，您都在告诉 jQuery mobile 更改为下拉菜单。

.change$(this).val()仅当从下拉列表中选择新选项并获取所选项目的值时才会触发。

更新

上述解决方案解决了部分问题，但导航仍然无法正常工作，因为......

导航 URL 被解析为http://www.domain.com/...和页面加载http://domain.com/...，默认情况下 jQuery mobile 阻止跨域页面。

有几个解决方案（未经测试）

  1. 在文档头部添加基本标签
    <base href="http://domain.com/" />
  2. 通过在 DOM 准备好之前设置以下内容来允许 jQuery 中的 crossDomainPages
    $.mobile.allowCrossDomainPages = true
于 2012-12-16T06:13:50.577 回答
0

不知道为什么，但是如果我切换到 jQuery mobile 的早期版本，我的菜单可以工作：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
于 2012-12-17T23:05:30.187 回答