我可以避免在jquery中重复此代码吗？

Question

I do need to display a content which position to fixed in the bottom of every pages on my site, like this. 我确实需要在网站上每个页面的底部显示固定位置的内容，就像这样。

<div class="footer-fix">
    <p>This is its contents......</p>
</div>

.footer-fix {
    background:#fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
}

My question is if I have a lot of pages in my site. 我的问题是我的网站上是否有很多页面。 So do I need to add this code in almost every webpages or is there any other way to do it without adding this code in every pages? 那么，我是否需要在几乎每个网页中添加此代码，或者是否有其他方法可以在每个页面中都没有添加此代码呢？

Hope somebody may help me out. 希望有人可以帮助我。

Thank you. 谢谢。

Answer 1

demo: http://jsfiddle.net/qz94zkmm/ 演示： http : //jsfiddle.net/qz94zkmm/

first all, yes you can do it in jQuery. 首先，是的，您可以在jQuery中完成。 But not recommended! 但是不推荐！

Here's a function it can dynamically insert html & css styles into an element: 这是一个可以将html和css样式动态插入元素的函数：

function appendHtmlTo(where, htmlText, cssText) {
  $(where).append(htmlText).append('<style text="text/css">'+cssText+'</style>');
}

and call this function: 并调用此函数：

appendHtmlTo('body', html, css);

which variables html and css define like this (there is a backslash at the end of each line): html和css定义了哪些变量，如下所示（每行末尾有一个反斜杠）：

var html = '\
<div class="footer-fix">\
    <p>This is its contents......</p>\
</div>\
';

var css = '\
.footer-fix {\
    background:pink;\
    position: fixed;\
    bottom: 0;\
    z-index: 999;\
    width: 100%;\
}\
';

be sure call this function when document ready! 准备好文档后，请务必调用此功能！

Answer 2

You can do it very easy with PHP just create footer.php file and insert code above in. Then just call include("/path/to/footer.php"); 您可以使用PHP轻松实现，只需创建footer.php文件并在其中插入代码即可。然后只需调用include（“ / path / to / footer.php”）; in bottom of every page and that its. 在每一页的底部，其。

Answer 3

You can use html tag Ex: 您可以使用html标签Ex：

<body>
<header class="col-lg-12" style="background-color:#444444; ">
    //Here i have Header
</header>

<div class="container-fluid" style="padding:10px; height:600px;">
         // Here goes my Body 
</div>

<footer class="col-lg-12 text-center" style="background-color:#444444; height:50px;">
    //Here Goes my Footer
</footer>

我可以避免在jquery中重复此代码吗？

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-09-19 12:53:55

解决方案2
0 2015-09-19 12:17:22

解决方案3
-1 2015-09-19 12:27:24

我可以避免在jquery中重复此代码吗？

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-09-19 12:53:55

解决方案2 0 2015-09-19 12:17:22

解决方案3 -1 2015-09-19 12:27:24

解决方案1
1 已采纳 2015-09-19 12:53:55

解决方案2
0 2015-09-19 12:17:22

解决方案3
-1 2015-09-19 12:27:24