如何创建多个页面？

时间：2014-05-30 10:08:13

标签： php html jquery-mobile

我正在使用jquery mobile 1.4.2。

我想创建一个这样的页面：enter image description here

我必须创建一个包含登录＆gt; delivery＆gt; payement的页面。（这是一个三步过程） 当我们完成登录部分时，它将转到交付部分。

  1. 我想知道的是我是否必须将所有内容放在单个.php文件中，还是应该创建单独的.php文件以进行登录，传递和付款。

    2. 2.如何创建这些登录＆gt; delivery＆gt; payement标题。

    请有人帮助我。

2 个答案:

答案 0 :(得分：1)

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

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

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

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

示例：

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

实施例

工作示例

基本上你需要这样的东西：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;            
});

答案 1 :(得分：0)

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

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

但是，如果你想这样做，我会用AJAX开发功能。重要的是你使用多少PHP脚本以及前端功能（JavaScript / Ajax）如何协同工作。

这里涉及很多变量。

祝你好运。

相关问题
最新问题