如何创建多个页面？答案

【问题标题】：How to create multiple pages?如何创建多个页面？
【发布时间】：2014-07-20 01:30:17
【问题描述】：

我正在使用 jquery mobile 1.4.2。

我想创建一个这样的页面：

我必须使用登录>交付>付款创建一个页面。（这是一个三步过程）当我们完成登录部分后，它会进入交付部分。

我想知道的是我是否必须将所有内容放在一个 .php 文件中，还是应该为登录、交付、付款创建单独的 .php 文件。

2.如何创建这些登录>交付>付款标题。

请任何人帮助我。

【问题讨论】：

标签： php html jquery-mobile

【解决方案1】：

我认为您要问的是如何创建一个水平滚动网页，成功滚动。

我个人不会使用这种方法 - 特别是在涉及付款的情况下。这实际上取决于您的支付系统如何运作。您不希望存储客户端支付信息，因为它会产生潜在的安全问题。

但是，如果您确实想要走这条路，我会使用 AJAX 开发该功能。使用多少 PHP 脚本并不重要，重要的是前端功能（JavaScript/Ajax）如何协同工作。

这里涉及到很多变量。

祝你好运。

【讨论】：

【解决方案2】：

您需要创建所有内容的混合体。

首先，您需要使用多页模板，其中每个页面都在一个 HTML 中。这对于顶部工具栏很重要。

如果我能正确看到，您的顶部工具栏有 3 个部分。在这种情况下，您需要为 3 个单独的页面设置 1 个标题。这将给人一种用户只使用一页的印象。您也将只有一个标题，因此您将花费更少的时间更改 CSS。

一个标题将有 3 个单独的部分。您可以使用导航小部件（不带图标）或自己创建它。并且根据活动页面，您将更改导航段背景。

示例：

当内容改变时，让它看起来像页眉/页脚没有改变：http://demos.jquerymobile.com/1.2.1/docs/toolbars/footer-persist-a.html
工作示例：How to keep same header/footer across pages in jQueryMobile?
jQuery Mobile 1.4 实现如下所示：http://api.jquerymobile.com/toolbar/

内部内容应该有标签，一个标签是我的帐户，第二个是访客用户。

示例：

标签 - http://demos.jquerymobile.com/1.4.0/tabs/

工作示例

基本上你需要这样的东西：http://jsfiddle.net/cY55U/1/

滑动示例以查看它如何在页面之间移动。

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

【讨论】：