jQuery Mobile和带有URL的选择菜单

现在一直在与此战斗。我试图让一个选择菜单作为导航菜单工作，但我无法获取这些URL以使其工作并实际更改页面。jQuery Mobile和带有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-->

来源

2012-12-16 Kirk

尝试

$(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默认情况下会阻止跨域页面。

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

添加一个基本标记的文件头
<base href="http://domain.com/" />
允许在jQuery的crossDomainPages通过设置以下之前，DOM是准备
$.mobile.allowCrossDomainPages = true

来源

2012-12-16 06:13:50 Enrico

它尝试。但它只是没有去任何地方。如果我点击导航项目，jQuery“我在想”旋转图标出现，但它从不切换页面。它可能是数据ajax的东西？ – Kirk

据我所知，它应该工作，这可能是别的。你能提供一个链接到你正在处理的页面吗？ – Enrico

http://kickfitness.com/services/index2.php#.UM1xfaXCJ4E它使用响应式CSS完成，因此如果您将屏幕尺寸调整得足够小，则移动导航会弹出。 – Kirk

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

<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-17 23:05:30 Kirk

jQuery Mobile和带有URL的选择菜单

回答

相关问题