引入公共头部、底部

目的:解决每个页面都做相同修改的问题。
问题:由于每个页面都有相同的头部,当头部内容需要修改时每个页面都要修改。
解决:
jQuery load()方法,将文件内容添加到指定div.

  1. 将头部放到单独html页面,形成模板。
  2. 在需要引入头部的页面中添加容器div
  3. 使用load()方法将模板添加到容器div
/**
  加载模版片段
  依赖jquery
  @param callback   function(id,status,response)
} */
function load_templates(callback) {
    var templates = document.querySelectorAll('.html_template');// 容器div
    Array.prototype.slice.call(templates)
          .forEach(function (temp) {
            var id = temp.getAttribute("id");
            //console.log("to be load " + id);
            $("#"+id).load('/template/'+id+'.html',function(response,status,xhr){
                callback(id,status,response);
            });
          })
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值