Question

我在这里遇到了一个小问题。我正在尝试在Phonegap中创建选项卡式导航，但是我遇到了一些问题。我成功创建了选项卡和布局，但导航似乎不起作用。因为我遵循了教程，所以我想使用jquery。以下是html和js的完整代码。在这种情况下，CSS并不重要。

所以我的问题是：如何让标签工作？当我点击一个标签时，它应该显示另一个页面。

的index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/jquery-1.12.2.min.js"></script>

    <title></title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
    </header>

    <div id="wrapper">
        <div id="main-content">
            <div id="pages">
                <div id="map" class="current">
                    What now?
                </div>
                <div id="camera">
                    Go away??
                </div>
                <div id="twitter">
                    twitter??
                </div>
            </div>
        </div>
    </div>

    <footer>
        <ul id="tab-bar">
            <li>
                <a href="#map">Map</a>
            </li>
            <li>
                <a href="#camera">Camera</a>
            </li>
            <li>
                <a href="#twitter">Twitter</a>
            </li>
        </ul>
    </footer>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

Index.js

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}

$(document).ready(function() {
        var theScroll;
        function scroll(){
        theScroll = new iScroll('wrapper');
        }

        document.addEventListener('DOMContentLoaded', scroll, false);

        $('#tab-bar').find('a').on('click', function(e){
        console.log("some one clicked me");
        e.preventDefault();
        var nextPage = $(e.target.hash);
        page(nextPage); //You need to add this for it to work
        $("#pages").find(".current").removeClass("current");
        nextPage.addClass("current");
        });

function page(toPage) {
    var toPage = $(toPage),
    fromPage = $("#pages").find(".current");
    if(toPage.hasClass("current") || toPage === fromPage) {
    return;
}
toPage.addClass("current fade in").one("webkitAnimationEnd", function(){
fromPage.removeClass("current fade out");
toPage.removeClass("fade in")
});

fromPage.addClass("fade out");
}
};

我希望你们能帮忙:)。

标签导航Phonegap

0 个答案: