博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery实现静态页面include
阅读量:6452 次
发布时间:2019-06-23

本文共 730 字,大约阅读时间需要 2 分钟。

最近在写一套前端页面,发现每个页面都复制一遍公共头、尾,十分不方便。于是就想能否也像PHP模板引擎一样,使用include引入公共文件,这便是接下来这段代码的意义。

我们先来总结一下需求:

1.可以像使用函数一样来使用include.2.可以在页面中任何地方使用,在哪调用就文件插入到页面中哪个位置。3.可以加载任意的静态文件,也就是说我们希望可以将要加载的文件名称传给这个函数

接下来,我们来说下每条需求对应的解决思路:

1.如何像函数一样来使用呢?    1> 写个公共函数,每个页面都加上。    2> 对于jquery来说,我们可以写成个插件。    在这里呢,我们选择了第2种,原因你懂的……2.对于插入位置,这个应该是最不好办的了,你可能用说有啥不好办的,弄个div,放里边呗!  但是,为了用这个函数我们需要写个script标签,如果再用个div占位会非常乱。  于是我们想,如果能用script定位就好了。能吗?答案当然是肯定的。3.至于加载任意文件,传个参数就好了。

最后,我们把写好的插件代码放上,使用前一定要先引入jquery.

JS -- jquery.include.js

jQuery.fn.extend({    include: function (path) {        var _this = $(this);                $.get(path, function (html) {            _this.replaceWith(html);        });        return 0;    }});

HTML -- index.html

    
Title

转载地址:http://omgwo.baihongyu.com/

你可能感兴趣的文章
CentOS 4.4双网卡绑定,实现负载均衡
查看>>
GitHub页面使用方法
查看>>
Python爬虫综述(笔记)
查看>>
Scala之柯里化和隐式转换
查看>>
wmic命令
查看>>
Merge and BottomUpSort
查看>>
reids 安装记录
查看>>
获取androdmanifest里面的meta-data
查看>>
Centos 6.3编译安装nagios
查看>>
如何实现7*24小时灵活发布?阿里技术团队这么做
查看>>
iSCSI
查看>>
java1234_Activiti_第6讲_一般程序员使用的函数
查看>>
mysql拷贝表的几种方式
查看>>
NetApp FAS2240-4存储删除文件数据恢复
查看>>
用设计模式去掉没必要的状态变量 —— 状态模式
查看>>
linux安装elasticsearch及遇到的各种问题
查看>>
健忘的正则
查看>>
[转]CMake快速入门教程:实战
查看>>
IntelliJ IDEA创建JavaWeb工程及配置Tomcat部署
查看>>
Markdown用法
查看>>