How to create Header/Footer
I'm a day 1 UI guy(started web design today only), want to design a header/footer(for pages in my application) for my app.
I read that using Javascript/JQuery we can do that,开发者_运维知识库 but on googling I didn't find a simple example of doing that, any example/reference will be of great help.
The short answer goes like this: jQuery is for DOM manipulation. Headers and footers are DOM elements. That's why you can use jQuery to create them.
Something a little longer:
<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>
But this is a really contrived example. I think that you need to focus more on writing a few good webpages before you try and add content dynamically. Especially if this is your very first day. my particular advice is to use something like the Visual Studio designer environment or something similar where you can see both the HTML and the visual effect at one time and try adding elements and that you read a LOT of stuff on good HTML design.
Actually you do not need JavaScript for footer. I had the related problem, becasue I'm working on 100% HTML site and can't include PHP footer.
There have the solution to make footer including html document in html document:
<object type="text/html" width=100% height="250" data="footer.html">
The code sample below shows the script to make a header and footer with Javascript.
function createHeaderAndFooter() {
var header="<!--header html-->";
var footer="<!--footer html-->";
document.body.innerHTML=header+document.body.innerHTML+footer;
}
window.addEventListener("load", createHeaderAndFooter);
If you want the same header and footer across all pages, you could put the script tag below on all your pages.
<script type="text/javascript src="headerFooter.js"></script>
Try to use the "js-header"-package. You can create your header with a class, its super easy. By the way its using JQuery too.
Look here: JS-Header package
加载中,请稍侯......
精彩评论