在JQuery Mobile中的页面之间传递滑块值 [英] Passsing slider values between pages in JQuery Mobile
问题描述
我正在尝试在页面之间传递表单滑块值，以便可以在目标页面中使用更改的设置.为此，我只是按照答案这里.
I'm trying to pass form slider values between pages so that the changed settings can be used in the target page. For that I'm just accessing the DOM on the same page as explained in the answer here.
这是我的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', '#review', function() {
$('form').submit(function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$.mobile.changePage('#front');
return false;
});
});
$(document).on('pageinit', '#front', function() {
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
});
</script>
</head>
<body>
<!-- ======================== -->
<div data-role="page" id="review" data-theme="a">
<div data-role="header">
<h1>Review</h1>
</div>
<p>
Review content
</p>
<div data-role="content" data-theme="a">
<form>
<label for="first_slider">First:</label>
<input type="range" id="first_slider" value="60" min="0" max="100" />
<label for="second_slider">Second:</label>
<input type="range" id="second_slider" value="60" min="0" max="100" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<!-- ======================== -->
<div data-role="page" id="front" data-theme="a">
<div data-role="header">
<h1>Front</h1>
</div>
<div data-role="content" data-theme="a">
<p>
Front content
</p>
<p id='first_count'></p>
<p id='second_count'></p>
<p>
<a href="#review" data-role="button">Main</a>
</p>
</div>
</div>
</body>
</html>
这似乎第一次起作用，并且更改的设置将显示在首页"上，但不会在后续的页面调用中显示.我尝试了除"pageinit"以外的其他JQM页面事件，但无法使其正常工作.
This seems to work the first time and the changed setting would show on the 'front' page, but not on subsequent page calls. I tried other JQM page events than 'pageinit' but can't get this to work.
推荐答案
我玩弄了您的示例并使它正常运行.我从文档中使用了此信息
I played around with your example and got it working. I used this info from the docu
表单按钮
为了便于样式设置，框架会自动转换任何按钮 或输入元素，其类型为提交"，重置"或自定义"中的按钮 样式的按钮-无需添加data-role ="button" 属性.但是，如果需要，您可以直接调用按钮插件 在任何选择器上，就像任何jQuery插件一样:
For ease of styling, the framework automatically converts any button or input element with a type of submit, reset, or button into a custom styled button — there is no need to add the data-role="button" attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:
$('[type="submit"]').button();
这将导致该脚本
<script>
$('[type="submit"]').bind( "click", function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
$.mobile.changePage('#front');
return false;
});
</script>
示例的完整更正版本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="review" data-theme="a">
<div data-role="header">
<h1>Review</h1>
</div>
<p>
Review content
</p>
<div data-role="content" data-theme="a">
<form>
<label for="first_slider">First:</label>
<input type="range" id="first_slider" value="60" min="0" max="100" />
<label for="second_slider">Second:</label>
<input type="range" id="second_slider" value="60" min="0" max="100" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<!-- ======================== -->
<div data-role="page" id="front" data-theme="a">
<div data-role="header">
<h1>Front</h1>
</div>
<div data-role="content" data-theme="a">
<p>
Front content
</p>
<p id='first_count'></p>
<p id='second_count'></p>
<p>
<a href="#review" data-role="button">Main</a>
</p>
</div>
<script>
$(document).bind('pageinit');
</script>
</div>
<script>
$('[type="submit"]').bind( "click", function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
$.mobile.changePage('#front');
return false;
});
</script>
</body>
</html>
屏幕截图
这篇关于在JQuery Mobile中的页面之间传递滑块值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
