jQuery移动选项值
jQuery Mobile Option Value
我已经实现了选项值作为下拉菜单导航。我的问题是,当我从页面A更改到页面B,我希望页面B处于活动状态,我希望它是在下拉菜单和其他方式可见的主要选项。请看下面的代码:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- Start of index page -->
<div data-role="page" data-theme="b" id="page_a">
<div data-role="header" data-position="inline">
<h1>A</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-1"></label>
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="#page_a">Page A</option>
<option value="#page_b">Page B</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-1').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Page A</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /index page -->
<!-- Start of about page -->
<div data-role="page" data-theme="b" id="page_b">
<div data-role="header" data-position="inline">
<h1>B</h1>
</div><!-- /header -->
<div class="ui-field-contain">
<label for="select-custom-2"></label>
<select name="select-custom-2" id="select-custom-2" data-native-menu="false">
<option value="#page_a">Page A</option>
<option value="#page_b">Page B</option>
</select>
<script>
$(function(){
// bind change event to select
$('#select-custom-2').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
$.mobile.changePage( url, { transition: "slide", changeHash: false });
}
return false;
});
});
</script>
</div>
<div data-role="content" data-theme="b">
<p>Page B</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
</div><!-- /footer -->
</div><!-- /about page -->
</body>
</html>
首先,在每个页面上将选中的属性添加到与页面匹配的选项中,并将相同的类名分配给所有页面上的所有导航选择(在我的示例中为class="navSelect"
)。在a页:
<select name="select-custom-1" id="select-custom-1" data-native-menu="false" class="navSelect">
<option value="#page_a" selected="selected">Page A</option>
<option value="#page_b">Page B</option>
</select>
和b页:
<select name="select-custom-2" id="select-custom-2" data-native-menu="false" class="navSelect">
<option value="#page_a">Page A</option>
<option value="#page_b" selected="selected">Page B</option>
</select>
现在从页面中删除脚本,并在页面底部的类名上使用一个更改处理程序:
$(document).on("change", ".navSelect", function (e) {
var url = $(this).val(); // get selected value
var curPage = $("body").pagecontainer( "getActivePage" );
//reset this select to the current page
$(this).val("#" + curPage.prop("id")).selectmenu( "refresh", true );
if (url) { // require a URL
$.mobile.changePage(url, {
transition: "slide",
changeHash: false
});
}
});
脚本会像原来那样更改页面,但它也会将选择重置为当前页面id,因此当您返回到页面时,它会显示正确的值。还请注意,在jQM中,当更新底层选择时,必须在小部件上调用.selectmenu("refresh", true)。
这是一个DEMO
相关文章:
- 在用户关闭/更改移动浏览器选项卡之前进行检测
- 在两个多选字段之间移动选项
- 检测通过移动 Safari 中的 JavaScript 关闭浏览器选项卡
- 使用AngularJS在Bootstrap选项卡之间移动DOM元素
- 在选定元素中上下移动选项的方式
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 使用鼠标移动操作选择选项
- 更改移动web应用程序的字体大小选项
- 带有 AngularJS 的移动架构选项
- 禁用移动设备中的默认保存图像选项
- 如何声明,以便在 jquery 移动 UI 中突出显示默认选项卡
- 如何在使用angularjs选项卡时单击按钮移动到下一个选项卡
- 引导选项卡在单击时移动
- 如果用户不更改该选项,请将焦点移动到下一个字段
- 将引导选项卡栏转换为移动大小的手风琴菜单
- 检查选项卡是否已在移动设备上打开
- Jquery移动选项卡和可折叠
- 将其混合在选项卡1中不起作用,但在另一个选项卡中起作用,即chrome和移动设备中的选项卡2
- jQuery选项appendTo select移动到下一个选项,而不是选择一个
- 如何使用javascript将大量的选择选项移动到另一个选择控件