这就是我所得到的,但如果在文本框中添加了正确的文本,我无法获得正确的方法来加载另一个页面。有人可以帮助我获得正确的语法吗?
<script type='text/javascript'>//<![CDATA[
$(document).delegate('[data-role="page"]', 'pageinit', function () {
var $submit = $(this).find('input[type="submit"]'),
$text = $(this).find('input[type="text"]');
$text.bind('keyup', function () {
if (this.value == 'llab') {
$submit.button('enable');
} else {
$submit.button('disable');
}
}).trigger('keyup');
});
//]]>
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Uppgift 1
</h3>
</div>
<div data-role="content">
<p>
Uppgift nummer ett blir att ...
</p>
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Centralstationen, Göteborg&zoom=14&size=288x200&markers=Centralstationen, Göteborg&sensor=false" width="288" height="200" />
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="pwtext">
</label>
<input name="passwordtext" id="pwtext" placeholder="" value="" type="text" />
</fieldset>
</div>
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn"/>
<a data-role="button" data-theme="a" href="start.html" data-icon="home" data-iconpos="left">
Tillbaka till startsidan
</a>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
更新回答:
以下是您的问题/问题的完整解决方案。
<强>标记:强>
成功登录后,包含两个页面,即登录页面(第1页)和(第2页)。
<!-- Start of first page -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1 header</h1>
</div><!-- /header -->
<div data-role="content">
<p>enter password</p>
<form id="login" action="" method="">
<input name="pwtext" id="pwtext" placeholder="" value="" type="text" class="required" />
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn" />
</form>
</div><!-- /content -->
<div data-role="footer">
<h4>Page1 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>password accepted</p>
<p><a href="#page1">Back to page1</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page2 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
密码验证,如果密码正确,则重定向到下一页。
$("#login").submit(function() {
var emptyFields = $(":input.required").filter(function() {
return !$.trim(this.value).length;
});
if(emptyFields.length) {
$("#pwtext").css("background-color", "#ffff76");
$("#pwtext").attr("placeholder", "Passeword required!");
return false;
}
if ($('#pwtext').val() != 'omar') {
$("#pwtext").css("background-color", "#ffff76");
$("#pwtext").attr("placeholder", "Passeword required!");
return false;
}
if ($('#pwtext').val() == 'omar') {
$.mobile.changePage("#page2", "slideup");
return false;
}
});
JSFiddle:test