<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function pagetwonav()
{
var p = document.getElementById("pass").value;
var pas = "password";
if(p==pas)
{
window.location.href = "#pagetwo";
var r = document.getElementById("name").value;
document.getElementById("show").innerHTML = "welcome "+r;
}
else
{
window.location.href = "#pageone";
//document.getElementById("mess").style.display = "block";
document.getElementById("mess").innerHTML="your password is incorrect";
}
}
/*
$(document).on("pagecreate","#pageone".function() {
{ // oncreating pageone function is called
// in tab alert will occur
$("div").on("tap",function()
{ alert("You have tapped!"); });
});
*/
$(document).on("pagecreate", "#pageone", function () {
$("li").on("swipe", function () {
$(this).hide();
});
$(document).on("scrollstart", function () {
alert("you started scroling!!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>page 1</h1>
</div>
<div id="mess" >
</div>
<div data-role="main" class="ui-content">
<p> LOGIN PAGE </p>
Username : <input type="text" id="name" placeholder="your Name " />
Password : <input type="password" id="pass" placeholder="your Password " />
<input type="button" value="LOGIN" id="button" onclick="pagetwonav()" />
<input type="range" min="0" max="100" value="20" name="range_name" />
</div>
<ol>
<li> tea </li>
<li> coffee</li>
</ol>
<div data-role="footer" data-position="fixed">
<h1> © Nikhil </h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1> welcome to page two</h1>
</div>
<div data-role="main" class="ui-content">
<p>welcome to page 2</p>
<a href="#pageone"> go to page 1</a>
<div id="show">
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1> footer text for page 2</h1>
</div>
</div>
</body>
</html>
No comments:
Post a Comment