在jquery mobile中使用选择导航
在jquery mobile中使用选择导航
提问于 2012-02-18 12:44:21
我目前正在使用用于WordPress的obox移动插件来创建站点的“移动”版本，但这并不重要，它实际上使用jQuery mobile作为基础，我希望使用select元素作为导航，这样用户就可以在默认的OS弹出窗口中选择一个选项(例如在屏幕底部的iPhone上)，这在一定程度上有效，但它没有与基于的导航集成，而是按正常方式加载页面吗？用户可以从菜单中选择一个选项，然后切换到页面，就像用户单击了链接一样？
我已经查了很久了，但似乎想不出实现它的方法.
回答 2
Stack Overflow用户
发布于 2012-02-18 12:59:53
您可以在调用changePage 函数:时指定转换类型。
$(document).delegate("#select", "change", function(){
$.mobile.changePage("#"+this.options[this.selectedIndex].value,{
transition: "slideup" //add your app's default transition here
});
});Stack Overflow用户
发布于 2012-02-18 17:06:23
我会这样做：
- http://jsfiddle.net/TrghW/1/
JS
$('.navigateToPage').change(function() {
var page = $(this).val();
$.mobile.changePage( "#"+page, { transition: "slideup"} );
});HTML
<div data-role="page" id="home">
<div data-role="content">
<label for="pages" class="select">Navigate to page:</label>
<select name="pages" id="selectPages" class="navigateToPage">
<option>Select a Page</option>
<option value="page2">Page 2</option>
<option value="page3">Page 3</option>
<option value="page4">Page 4</option>
<option value="page5">Page 5</option>
</select>
<br />
<span>This is the Home Page</span>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<label for="pages2" class="select">Navigate to page:</label>
<select name="pages2" id="selectPages2" class="navigateToPage">
<option>Select a Page</option>
<option value="home">Home Page</option>
<option value="page3">Page 3</option>
<option value="page4">Page 4</option>
<option value="page5">Page 5</option>
</select>
<br />
<span>This is Page 2</span>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<label for="pages3" class="select">Navigate to page:</label>
<select name="pages3" id="selectPages3" class="navigateToPage">
<option>Select a Page</option>
<option value="home">Home Page</option>
<option value="page2">Page 2</option>
<option value="page4">Page 4</option>
<option value="page5">Page 5</option>
</select>
<br />
<span>This is Page 3</span>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="content">
<label for="pages4" class="select">Navigate to page:</label>
<select name="pages4" id="selectPages4" class="navigateToPage">
<option>Select a Page</option>
<option value="home">Home Page</option>
<option value="page2">Page 2</option>
<option value="page3">Page 3</option>
<option value="page5">Page 5</option>
</select>
<br />
<span>This is Page 4</span>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="content">
<label for="pages5" class="select">Navigate to page:</label>
<select name="pages5" id="selectPages5" class="navigateToPage">
<option>Select a Page</option>
<option value="home">Home Page</option>
<option value="page2">Page 2</option>
<option value="page3">Page 3</option>
<option value="page4">Page 4</option>
</select>
<br />
<span>This is Page 5</span>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9341244
复制相关文章
相似问题
腾讯云开发者
