How to create multiple pages?
Question
I am using jquery mobile 1.4.2.
I want to create a page like this:
I have to create a page with login>delivery>payement.(Its a three step process) When we complete login section it goes to delivery section.
- What I want to know is whether I have to place all contents in a single .php file or should I create separate .php files for login,delivery,payment.
2.How do I create those login>delivery>payement headings.
Please anyone help me with this.
2 answers
solution1
1 ACCPTED 2014-05-30 10:51:04
You will need to create a mix of everything.
First you will need to use multi page template where every page is inside one HTML. This is important for top toolbar.
If I can see it correctly your top toolbar has 3 sections. In this case you will need to have 1 header for 3 separate pages. This will give an impression that user is working with only only one page. You will also have only one header, so you will spend less time changing CSS.
That one header will have 3 separate parts. You can use navigation widget (without icons) or create it by yourself. And depending on active page you will change navigation segment background.
Examples:
- Make it look like header/footer is not changing while content changes: http://demos.jquerymobile.com/1.2.1/docs/toolbars/footer-persist-a.html
- Working example: How to keep same header/footer across pages in jQueryMobile?
- jQuery Mobile 1.4 implementation looks like this: http://api.jquerymobile.com/toolbar/
Inner content should have tabs, one tab would be My Account and second one would be Guest User.
Example:
Working example
Basically you need something like this: http://jsfiddle.net/cY55U/1/
Swipe example to see how it moves between pages.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</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=no; target-densityDpi=device-dpi"/>
<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.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="header" id="shared-header">
<h3>
Header
</h3>
</div>
<div data-role="page" id="index" data-theme="a" >
<div data-role="content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">one</a></li>
<li><a href="#two" data-ajax="false">two</a></li>
<li><a href="ajax-content.html" data-ajax="false">three</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="content">
Page 2
</div>
</div>
</body>
</html>
JavaScript:
$(function () {
$("[data-role=header]").enhanceWithin().toolbar();
});
$(document).off('swipeleft').on('swipeleft', 'div[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('div[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", nextpage,{transition: "slide"});
}
event.handled = true;
}
return false;
});
$(document).off('swiperight').on('swiperight', 'div[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prevpage,{transition: "slide", reverse: true});
}
event.handled = true;
}
return false;
});
solution2
0 2014-05-30 10:39:10
I think what you're asking is how to create a horizontally scrolling web page that scrolls on success.
I personally would not use this method - especially if payments are involved. It really depends on how your payment system works. You don't want client-side payment information stored because it creates potential security issues.
If you do, however, want to pursue this route, I would develop the functionality with AJAX. It matters less how many PHP scripts you use and more how the front-end functionality (JavaScript/Ajax) work together.
There are a lot of variables involved here.
Good luck.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.