技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

jqm或html5里面有没有模板化开发的方法?就是一个页面模块被多个页面include

来源: 技术CTO 阅读:

比如我现在有
a.html
b.html
c.html

三个页面。

三个页面的头部代码是一样的,

一样的头
<meta charset="utf-8"> 
<title>小宝社区</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>


一样的页眉
<div data-role="header" data-position="fixed"> 
<h1>这里是小宝商店</h1> 
<a href="javascript:;" data-icon="gear" class="ui-btn-right">设置</a> 
<div data-role="navbar"> 
<ul> 
<li><a href="javascript:;" onclick="show_html('add_shop')">添加商品</a></li> 
<li><a href="javascript:;">建设中</a></li> 
<li><a href="javascript:;">建设中</a></li> 
</ul> 
</div><!-- /navbar --> 
</div><!-- /header -->


一样的页脚
<div data-role="footer" data-position="fixed"> 
<div data-role="navbar"> 
<ul>
<li><a href="#" data-icon="grid" class="ui-btn-active">建设中</a></li>
<li><a href="#" data-icon="star">建设中</a></li>
<li><a href="#" data-icon="gear">建设中</a></li>
</ul>
</div><!-- /navbar --> 
</div><!-- /footer -->
 

我想用jquery mobile或HTML5将这三部分的内容抽出来作为三块独立的页面。
比如叫做
config.inc.html
header.inc.html
footer.inc.html

然后用a.html、b.html、c.html各自include。这样可以比较好的控制代码。

可是我找遍网上的资料,也没提到这块怎么用。

jqm中有jQuery.mobile.loadPage()方法,试了一下,好像是加载整个页面的。没有成功。

最后又试了一下ajax中的load方法
$("#html_container").loadPage(page+'.html');
加是加载进来了,但是样式上不行,而且是无法加载js的。

不知道各用在用HTML5+JS做开发时,是怎么进行模块化设计的?

没有人,我来顶一下!

我也一直在查找这个问题的解决方法,期待高手的出现!

下面是我尝试的方法:
<script type="text/javascript" charset="utf-8" src="header.inc.html"></script>


但是没有效果,大牛们,还有其它方法吗?
后台include
$("div").load("xx.html");
HTML有它的局限性,肯定不可能象JSP那样INCLUDE的。
1.iframe.
2.ajax.
这些上面都说过了。
我给个另外的方式:
3.把要包含进来的HTML写到JS的一个函数中,document.write("HTML的内容")。在主HTML里引入这个JS,然后在要显示这些HTML的地方调用那个JS函数。
后面这个方法,比AJAX容易点,也似乎更靠近楼主的初始思路吧。
只不过,无论这3种哪种方法,从SEO角度来说,效果都不算好。除非就是在后台里INCLUDE,直接结合到前台HTML中。
<object data="')

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^