Question

现在正在与此争斗一段时间。我正在尝试使用选择菜单作为导航菜单，但我无法使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-->

Answer 1

尝试

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

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

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

<强>更新

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

导航网址正在解析为http://www.domain.com/...，页面会在http://domain.com/...下加载，jQuery mobile会默认阻止跨域网页。

有一些解决方案（未经测试）

在文档头中添加基本标签
<base href="http://domain.com/" />
在DOM准备好之前通过设置以下内容来允许jQuery中的crossDomainPages $.mobile.allowCrossDomainPages = true

Answer 2

不知道为什么，但是如果我切换到早期版本的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>

带有URL的jQuery Mobile和Select菜单

2 个答案: