Включить навигационную панель на каждую телефонную паузу на странице shtml

Я создаю веб-приложение с phonegap, где я включаю панель навигации на каждую страницу shtml, используя <!--#include file="navbar.html" -->. Она отлично работает, когда я тестирую ее в браузере, но когда я создаю и запускаю phonegap, панель навигации не включается. Кто-нибудь знает, почему?

Обновление: это мой простой код index.html, здесь пока не реализовано никаких функций, кроме панели навигации:

<!doctype html>
<html>

<head>
<title> DJKongsy - Home</title>
</head>
<body>
    <!--#include file="navbar.html" -->
</body>
</html>

Панель навигации создается с помощью начальной загрузки, помогает ли это выяснить, почему она не работает?

ОБНОВЛЕНИЕ 2.0:

Я тестирую решение Лиама здесь.

<nav class="navbar navbar-default" role="navigation">
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
    <ul class="nav nav-pills navbar-left">
        <li class="active"><a href="index.html">Home</a></li>
        <li class="active"> <a href="musictab3.shtml">Music</a></li>
        <li class="active"><a href="abouttab.shtml">About</a></li>
        <li class="active"><a href="gigs.shtml">Gigs</a></li>
    </ul>
    <ul class="nav nav-pills navbar-right">
      <li class="active"><a id="userLink" href="logintab.shtml">Log in</a></li>
    </ul>

  </div><!-- /.navbar-collapse -->
</nav>
<div id="pageContent">
    <h1>CONTENT</h1>
</div>
<script>

    $(document).ready(function(){
        var user = $.jStorage.get('userInfo');
        if(user.username!=''){
            document.getElementById('userLink').innerHTML=user.username;
        }
        else{
            document.getElementById('userLink').innerHTML="Log in";
        }
        $( "a" ).on( "click", function( event ){
           // Prevent the usual navigation behavior
           event.preventDefault();
            $.get($(this).attr("href"), function(data) {
                var resp = $(data);
                $("#pageContent").html($("#pageContent", resp).html());
                $('#pageContent').load('gigs.shtml #pageContent');
            }); 
        });
    });
</script>

Как сделать так, чтобы содержимое каждой из вкладок на моей панели навигации появлялось при нажатии? Например, что находится в div "pageContent"?

Приведенный ниже код работает для получения статической html-информации со страницы, но он не запускает то, что находится в моих тегах <script>. Почему?

$('#pageContent').load('gigs.shtml #pageContent');

cordova jquery twitter-bootstrap shtml
person kongshem    schedule 11.02.2014    source источник
comment
Не могли бы вы опубликовать свой код   -  person Rohit Tiwari    schedule 11.02.2014

Ответы (1)


arrow_upward
2
arrow_downward

Лучший способ сделать это (я сделал это сам) - поместить панель навигации в файл index.html (не "включить файл"), а затем использовать jquery для извлечения содержимого каждой страницы на вашу домашнюю/главную страницу, это работает Очень хорошо.

Итак, индекс:

<html>
    <head>
        <title>
            Blahblah
        </title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
        <div id="pageContent">
            <h1>CONTENT</h1>
        </div>
    </body>
</html>

а потом сценарий...

 $(document).ready(function(){
        $( "a" ).on( "click", function( event ){
          // Prevent the usual navigation behavior
          event.preventDefault();
               $.get($(this).attr("href"), function(data) {
                    var resp = $(data);
                    $("#pageContent").html($("#pageContent", resp).html());
                }); 
        });
});
person Liam    schedule 27.02.2014
comment
Спасибо за ответ. Вы уверены, что нет более простых и лучших идей? Это кажется трудным способом сделать простую вещь. - person kongshem; 07.03.2014
comment
Проще? Не уверен. Лучше? Я так не думаю. Это также повысит скорость вашего приложения, так как оно не будет снова загружать страницы и библиотеки, а только содержимое посередине. - person Liam; 09.03.2014
comment
Итак, я пробую ваше решение. Как загрузить данные с разных страниц в div pageContent. 'event.preventDefault()' предотвращает возникновение события onClick, так как же изменяется содержимое, когда я нажимаю на панель навигации? Смотрите обновление в исходном вопросе. - person kongshem; 11.03.2014
comment
Он не будет снова запускать ваши скрипты, он только загружает то, что находится внутри div pageContent. В вашем первоначальном вопросе не было сценариев, я не экстрасенс. - person Liam; 11.03.2014