CODEWITHSUNDEEP
phphtmljquery-mobile
user3350169
user3350169

Reputation: 209

How to create multiple pages?

I am using jquery mobile 1.4.2.

I want to create a page like this:enter image description here

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.

  1. 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.

Upvotes: 0

Views: 133

Answers (2)

Gajotres
Gajotres

Reputation: 57309

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:

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;            
});

Upvotes: 1

sparky
sparky

Reputation: 106

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.

Upvotes: 0

Related Questions