Как создать верхний / нижний колонтитул - PullRequest
0 голосов
/ 15 мая 2011

Я - пользователь пользовательского интерфейса в день 1 (только сегодня начал веб-дизайн), хочу создать колонтитул (для страниц в моем приложении) для моего приложения.

Я читал, что с помощью Javascript / JQuery мы можем это сделать, но при поиске в Google я не нашел простого примера для этого, любой пример / ссылка будет очень полезен.

Ответы [ 3 ]

1 голос
/ 15 мая 2011

Краткий ответ звучит так: jQuery для манипулирования DOM.Верхние и нижние колонтитулы являются элементами DOM.Вот почему вы можете использовать jQuery для их создания.

Что-то немного дольше:

<body>
 <div id='header'>
 </div>
 <div id='content'>
  This is where you would put all your regular content on your page, 
  maybe if it's dynamically generated content. You just have to supply
  those other two divs all the time (not really - more later)
 </div>
 <div id='footer'>
 </div>
</body>
<script>
  //assuming you have a reference to jQuery in the header
  // first let's build an object.
  var myHeader = $('div').class('headerClassDiv').append('<div class="nestedHeaderClass" />');
  $('#header').append(myHeader);

  // do the same for the footer:
  var myFooter = $('div').class('footerClassDiv').append('<div class="nestedFooterClass" />');
  $('#footer').append(myFooter);
</script>

Но это действительно надуманный пример.Я думаю, что вам нужно больше сосредоточиться на написании нескольких хороших веб-страниц, прежде чем пытаться добавлять контент динамически.Особенно, если это твой самый первый день. мой особый совет - использовать что-то вроде среды дизайнера Visual Studio или что-то подобное, где вы можете одновременно увидеть HTML и визуальный эффект и попробоватьдобавление элементов и что вы читаете много вещей о хорошем дизайне HTML.

0 голосов
/ 15 февраля 2015

На самом деле вам не нужен JavaScript для нижнего колонтитула. У меня была связанная проблема, потому что я работаю на 100% HTML-сайте и не могу включить нижний колонтитул PHP.

Существует решение сделать нижний колонтитул, включающий HTML-документ в HTML-документ:

<object type="text/html" width=100% height="250" data="footer.html">

0 голосов
/ 13 декабря 2014

В приведенном ниже примере кода показан скрипт для создания верхнего и нижнего колонтитула с помощью Javascript.

function createHeaderAndFooter() {
    var header="<!--header html-->";
    var footer="<!--footer html-->";
    document.body.innerHTML=header+document.body.innerHTML+footer;
}
window.addEventListener("load", createHeaderAndFooter);

Если вы хотите, чтобы на всех страницах был одинаковый верхний и нижний колонтитулы, можно поставить тег script ниже на всех своих страницах.

<script type="text/javascript src="/assets/headerFooter.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...