- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello ,
I'm working with combination of flip and login template . I face problem regarding the back button where i put the home button in the login page but when i click on the home button to go back to the main page , the main page consist of back button where i dont want it to be there . So , how can i separate the header for each page ? Here is my code :
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>Flip View Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
<link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/fastclick.min.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js">
</script>
<style>
@-ms-viewport{
width: 100vw;
zoom:100%;
}
@viewport{
width: 100vw;
zoom: 100%;
}
@-ms-viewport{
user-zoom:fixed;
}
@viewport{
user-zoom:fixed;
}
</style>
<script src='cordova.js'></script>
<script src="js/apps.js"></script>
<script src="xdk/init-dev.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function(){
$("#main").bind("panelbeforeload", startApp);
// setup signin and signup button events
$("#login").on("click", function(){
signIn();
});
$("#register").on("click", function(){
signUp();
});
});
//sign in
function signIn(){
// SIGNIN SERVER CALL CODE GOES HERE
valid_login = false;
if(valid_login){
$.afui.loadContent("#main", null, null, "fade");
}
else
{
//Example use of the error toast api
var opts={
message:"Invalid Login Combination",
position:"tc",
delay:2000,
autoClose:true,
type:"error"
};
$.afui.toast(opts);
}
}
//sign up
function signUp(){
//example client side validation
if ($("#password").val() === $("#confirmpassword").val())
{
// SIGNUP SERVER CALL CODE GOES HERE
//render main view
$.afui.loadContent("#main", null, null, "fade");
//Example use of the success toast
var opts={
message:"Account Created",
position:"tc",
delay:2000,
autoClose:true,
type:"success"
};
$.afui.toast(opts);
}
else
{
//Example use of the error toast
var opts={
message:"Passwords Don't Match",
position:"tc",
delay:2000,
autoClose:true,
type:"error"
};
$.afui.toast(opts);
}
}
function startApp(){
// clears all back button history
$.afui.clearHistory();
// your app code here
}
//date picker
$(function() {
$("#datepicker").datepicker();
})
//display data
function myFunction() {
document.getElementById("demo").innerHTML="6.30a.m.";
document.getElementById("demo1").innerHTML="4.30a.m.";
}
function myFunction1() {
document.getElementById("demos").innerHTML="6.45a.m.";
document.getElementById("demos1").innerHTML="5.45a.m.";
}
function myFunction2() {
document.getElementById("demoss").innerHTML="6.30a.m.";
document.getElementById("demoss1").innerHTML="3.30a.m.";
}
</script>
</head>
<body>
<div id="splashscreen" class='ui-loader heavy'>
App Framework - Flip View
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view" id="mainview">
<header>
<h1>Flip View</h1>
<!--<a id="backButton" class="button back" style="visibility:visible;"></a>-->
<a href="#page1" class="button" onclick="startApp" style="float:right">Home</a>
</header>
<div class="pages">
<!-- Welcome View -->
<div class="panel" title="Welcome" id="page1" data-header="none" data-footer="none" selected="true">
<br>
<img style="float:left; width:100px; margin-right:30px;" src="images/sms.png" alt="SMS"></img>
<div style="text-align:center">
<br>
<h3>School<br>Management System</h3>
<br>
<br>
</div>
<ul class="list inset">
<li><a href="#signin" class="icon user" style="text-align:center">Login</a></li>
<li><a href="#signup" class="icon pencil" style="text-align:center">Register</a></li>
</ul>
</div>
<!-- Login View -->
<div class="panel" title="Login" id="signin" data-footer="none">
<br>
<img style="float:left; width:100px; margin-right:30px;" src="images/sms.png" alt="SMS"></img>
<div style="text-align:center">
<br>
<h3>School<br>Management System</h3>
<br>
<br>
</div>
<br>
<input name="username" type="text" placeholder="username" />
<input name="password" type="password" placeholder="password" />
<a class="button block" href="#backpage" id="login">Login</a>
</div>
<!-- Register View -->
<div class="panel" title="Register" id="signup" data-footer="none">
<br>
<img style="float:left; width:100px; margin-right:30px;" src="images/sms.png" alt="SMS"></img>
<div style="text-align:center">
<br>
<h3>School<br>Management System</h3>
<br>
<br>
</div>
<br>
<input name="name" type="text" placeholder="Name" id="name" />
<input name="email" type="text" placeholder="Email" id="email" />
<input name="username" type="text" placeholder="Username" id="username" />
<input name="password" type="password" placeholder="Password" id="password" />
<input name="password2" type="password" placeholder="Confirm Password" id="confirmpassword" />
<a class="button block" href="#signin" id="register">Register</a>
</div>
<!-- back panel -->
<div class="panel" title="Home" id="backpage" data-footer="none">
<br>
<center><h3>Hi! Welcome to School Managment System.</h3></center>
<br>
<ul class="list">
<li><a href="#student1"><img src="images/girlOne.jpg" alt="girlOne">Bella</a></li>
<li><a href="#student2"><img src="images/boy.jpg" alt="boys">Edward</a></li>
<li><a href="#student3"><img src="images/girlTwo.jpg" alt="girlTwo">Rosie</a></li>
</ul>
</div>
<div class="panel" title="Bella" id="student1">
<div>
<br>
<img src="images/girlOne.jpg" alt="girlOne" style="float:left">
<br>
<br>
<center>
<h3 style=""> Name : Bella Swan</h3>
<br>
<h3 style=""> ID : 123456</h3>
</center>
<br>
<br>
<h2 style="padding-top:20px;">Check-in or Check-out Info :</h2>
<br>
<label for="date">Date</label><input type="text" id="date" name="date" value="6/10/2016">
<!--label>Date</label>
<input type="date" id="txtDateFrom">
<br>
<button onclick="myFunction()" style="float:right;">Submit</button-->
<br>
<br>
<table border="1" style="width:100%; text-align:center;">
<tr>
<td style="font-size:18px;">Check In</td>
<td style="font-size:18px;">Check Out</td>
</tr>
<tr>
<!--td><p id="demo" style="font-size:18px"></p></td>
<td><p id="demo1" style="font-size:18px"></p></td-->
<td style="font-size:18px;">6.30 a.m.</td>
<td style="font-size:18px;">4.30 p.m.</td>
</tr>
</table>
</div>
</div>
<div class="panel" title="Edward" id="student2">
<div>
<br>
<img src="images/boy.jpg" alt="boys" style="float:left">
<br>
<br>
<center>
<h3 style=""> Name : Edward Swan</h3>
<br>
<h3 style=""> ID : 123466</h3>
</center>
<br>
<br>
<br>
<h2 style="padding-top:20px;">Check-in or Check-out Info :</h2>
<br>
<label for="date">Date</label><input type="text" id="date" name="date" value="6/10/2016">
<!--label>Date</label>
<input type="date" id="txtDateFrom">
<br>
<button onclick="myFunction1()" style="float:right;">Submit</button-->
<br>
<br>
<table border="1" style="width:100%; text-align:center;">
<tr>
<td style="font-size:18px;">Check In</td>
<td style="font-size:18px;">Check Out</td>
</tr>
<tr>
<!--td><p id="demos" style="font-size:18px"></p></td>
<td><p id="demos1" style="font-size:18px"></p></td-->
<td style="font-size:18px;">6.45 a.m.</td>
<td style="font-size:18px;">4.45 p.m.</td>
</tr>
</table>
</div>
</div>
<div class="panel" title="Rosie" id="student3">
<div>
<br>
<img src="images/girlTwo.jpg" alt="girlTwo" style="float:left">
<br>
<br>
<center>
<h3 style=""> Name : Rosie Swan</h3>
<br>
<h3 style=""> ID : 123476</h3>
</center>
<br>
<br>
<h2 style="padding-top:20px;">Check-in or Check-out Info :</h2>
<br>
<label for="date">Date</label><input type="text" id="date" name="date" value="6/10/2016">
<!--label>Date</label>
<input type="date" id="txtDateFrom">
<br>
<button onclick="myFunction2()" style="float:right;">Submit</button-->
<br>
<br>
<table border="1" style="width:100%; text-align:center;">
<tr>
<td style="font-size:18px;">Check In</td>
<td style="font-size:18px;">Check Out</td>
</tr>
<tr>
<!--td><p id="demoss" style="font-size:18px"></p></td>
<td><p id="demoss1" style="font-size:18px"></p></td-->
<td style="font-size:18px;">6.30 a.m.</td>
<td style="font-size:18px;">4.30 p.m.</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks and Regards.
- Tags:
- HTML5
- Intel® XDK
Link Copied
2 Replies
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You can implement a unique header per page as described in the following page: https://app-framework-software.intel.com/documentation.php#afui/afui_layout
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello Mr. Elroy ,
Thanks for your help . I just make it . Thanks a lot . =)
Reply
Topic Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page