Общий нижний колонтитул не отображается в second.html

Привет У меня есть одна отдельная страница для нижнего колонтитула как footer.html & Я хочу использовать это во всех других html-файлах, но отображается только в index.html (основной файл или запуск страницы моего приложения в проекте phonegap), а на других страницах он не отображается. Мой footer.html как:Общий нижний колонтитул не отображается в second.html

<!DOCTYPE html> 
    <html> 
    <head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 


<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
<link rel="stylesheet" href="docsdemos-style-override.css" /> 
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script> 
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script> 
<script type="text/javascript" charset="utf-8" src="js/main.js"></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script> 


    </head> 

    <body> 

<div data-role="navbar" data-iconpos="top"> 
    <ul> 
     <li><a class="ui-btn-active" href="#page1" data-theme="a" 
     data-icon="home"> Home </a></li> 
     <li><a href="#page3" data-theme="a" data-icon="plus"> Feeds </a> 
     </li> 
     <li><a href="#page7" data-theme="a" data-icon="grid"> Gadgets 
     </a></li> 
     <li><a href="#page9" data-theme="a" data-icon="info"> Profile 
     </a></li> 
     <li><a href="#page14" data-theme="a" data-icon="gear"> 
     Settings </a></li> 
    </ul> 
</div> 
    </body> 
    </html>

Мой index.html как:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery Mobile: Demos and Documentation</title> 

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
<link rel="stylesheet" href="docsdemos-style-override.css" /> 
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script> 
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) --> 
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>--> 


<script type="text/javascript"> 
    $('[data-role=page]').live('pageshow', function (event, ui) 
    { 
     $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function() 
     { 
       $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
     }); 
    }); 
</script> 

</head> 
<body> 
    <div data-role="page" id="jqm-home" class="type-home"> 
<div data-role="content"> 


    <div class="content-secondary"> 


     <ul data-role="listview" data-inset="true" data-theme="c"  data-dividertheme="f"> 
      <li data-role="list-divider">Overview</li> 
      <li><a href="second.html" >First</a></li> 
      <li><a href="#">Features</a></li> 
      <li><a href="#">Accessibility</a></li> 
      <li><a href="#">Supported platforms</a></li> 
     </ul> 

    </div><!--/content-primary--> 

</div> 

<div data-role="footer" data-theme="d" data-position="fixed"> 
</div> 

</div> 
</body> 
</html>

И second.html как:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery Mobile: Demos and Documentation</title> 

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
<link rel="stylesheet" href="docsdemos-style-override.css" /> 
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script> 
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to  package web app) --> 
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>--> 


<script type="text/javascript"> 
    $('[data-role=page]').live('pageshow', function (event, ui) 
    { 
     $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function() 
     { 
       $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
     }); 
    }); 
</script> 

</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home"> 
<div data-role="content"> 


    <div class="content-secondary"> 


     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">2nd page</li> 
      <li><a href="index.html" >Second</a></li> 
      <li><a href="#">Features</a></li> 
      <li><a href="#">Accessibility</a></li> 
      <li><a href="#">Supported platforms</a></li> 
     </ul> 

    </div><!--/content-primary--> 

</div> 

<div data-role="footer" data-theme="d" data-position="fixed"> 
</div> 

</div> 
</body> 
</html>

Здесь в second.html сноска не дисплей. И еще один запрос, когда я нажимаю «Первый элемент управления списком», переходит в файл second.html, но иногда он не уходит, а иногда появляется только черный экран. Почему это так?

Заранее спасибо. Любая помощь будет оценена.

источник

2012-06-29 PPD

его над headheck, чтобы загрузить все '' js', CS 'для только' footer', и вы можете сделать на функции, которая вернет вам html как '"

", а затем добавьте к' data-role = "footer" ' – Tamkeen

@Tamkeen Спасибо за предложение – PPD

По умолчанию JQuery Mobile использует Ajax для загрузки страниц. Поэтому в вашем случае, когда вы ссылаетесь на second.html, он будет загружать div page с помощью ajax и вводить в текущую DOM, чтобы любой javascript, определенный на этой странице html, не выполнялся.

Попробуйте это в index.html

<li><a href="second.html" rel="external">First</a></li>

или

<li><a href="second.html" data-ajax="false">First</a></li>

Таким образом, он будет перезагружать всю страницу second.html

источник

2012-06-29 10:03:27 dhaval

@ dhaval Спасибо, что он работает – PPD

Там будет какая-то проблема проверки HTML в second.html коде файла Вот почему его не показывая колонтитула

источник

2012-06-29 09:55:48

@ Ganesh Bora Спасибо за предложение – PPD

Общий нижний колонтитул не отображается в second.html

ответ

Смежные вопросы