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.
2.How do I create those login>delivery>payement headings.
Please anyone help me with this.
分享 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.
Inner content should have tabs, one tab would be My Account and second one would be Guest User.
Basically you need something like this: http://jsfiddle.net/cY55U/1/
Swipe example to see how it moves between pages.
<!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>
$(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;
});
