jquery实现页面嵌套include

程序员文章站 2022-03-10 22:46:20

...

类似PHP模板引擎一样，使用include引入公共文件

一.注意

1.使用方式

引入js--jquery.include.js(存成插件)

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

        return 0;
    }
});

在HTML 页面加入

<script type="text/javascript" id="block_font">
	$(function () {
		$("#block_font").include("fontback.html");
	})
	</script>

注意：script 中 id 必须跟$("#block_font").include(...);的id是一样，页面的名称可以随意

2.注意点

1.对于插入位置，这个应该是最不好办的了。

如果直接在位置中插入<div id="block_font"></div> 。这样的话，会感觉有点乱，因为为了用这个函数我们需要写个script标签，

所以我建议是把jQuery-2.1.4.min.js的放在头部，然后其他的插件照样放在底部，这样也不会影响js渲染。然后那个位置需要子页面的内容就把底下这段代码放进去。

<script type="text/javascript" id="block_font">
	$(function () {
		$("#block_font").include("fontback.html");
	})
	</script>

2.子页面fontback.html 的内容如果有js参与，记得把js那部分的内容直接放到fontback.html中，否则无效。

二.例子

1.首页

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery实现静态页面include</title>
	<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
	<style>
		body{
			padding: 40px 0;
			font-family: 'bebas', sans-serif;
			background-color: #00BCD4;
			color: #fff;
			text-align: center;
			width: 400px;
		}
		.includecnt{
			border: 3px solid #000;
    		padding: 20px;
    		margin: 20px;
		}
	</style>
</head>
<body>
<div id="jgcx-main">
	<form role="form" class="jgcx-main_form clearfix">
		<h2>form获取数据</h2>
	    <div class="jgcx-main_form_row jgcx-main_form_row-sty1">
	        <label>姓名:</label><span data-name="brxm00"></span>
	    </div>
	    <div class="jgcx-main_form_row jgcx-main_form_row-sty2">
	        <label>条 形 码:</label><span data-name="txm000"></span>
	    </div>
	</form>
</div>
<div class="includecnt">
	<h2>jquery实现静态页面include</h2>
	<script type="text/javascript" id="block_font">
	$(function () {
		$("#block_font").include("fontback.html");
	})
	</script>
</div>
<div id="footer">底部</div>
<script type="text/javascript" src="js/js.js" ></script>
<script type="text/javascript">
$(function () {
	var oData={
		"brxm00": "黄恒林", 
		"txm000": "201711111111"
	}; 
    $("#jgcx-main").setForm(oData);  
})
</script>
</body>
</html>

2.fontback.html

<style>
.cnt{
	 padding: 40px 0;
  	text-align: center;
}
.cnt-text{
  font-size: 48px;
  position: relative;
}
/*泡沫*/
.cnt-text_hearts--blue{
	opacity: 0;
  position: absolute;
  background-color: rgba(33, 150, 243, 0.5);
  border-radius: 50%;
  animation:bubbles 3s ease-in infinite ;
  -webkit-animation:bubbles 3s ease-in infinite ;
}
@-webkit-keyframes bubbles{
	0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: translate(0, -20%);
            transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -1000%);
            transform: translate(0, -1000%);
  }
}
</style>
<div class="cnt">
   <a class="cnt-text js-cnt-text_bubbles">Bubbles</a>
</div>
<script type="text/javascript">
$(function () {
    bubbles();
})
function bubbles(){
	$.each($(".js-cnt-text_bubbles"), function() {
		var num = Math.ceil($(this).width()/50)*10;
		for(var i = 0; i <= num; i++) {
     	var size = Math.ceil(rnd(40,80)/10);
     	$(this).append('<span class="cnt-text_hearts--blue" style="top:' + rnd(20,80) + '%; left:' + rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + (rnd(0,30)/10) + 's; background-color:#'+ Math.floor(Math.random()*0xffffff).toString(16) +';"></span>');
  	}		
	});
}
//产生随机数
function rnd(m,n) {
      m = parseInt(m);
      n = parseInt(n);
      return Math.floor( Math.random() * (n - m + 1) ) + m;
}
</script>

3.js.js (我把引入子页面的函数放在公共js里面，并没有单独存在一个js里面)

jQuery.fn.extend({
	//引入子页面函数
    include: function (path) {
        var _this = $(this);
        
        $.get(path, function (html) {
            _this.replaceWith(html);
        });

        return 0;
    },
    //获取json数据显示在span中
    setForm:function(jsonValue){
    	var obj=this;  
	    $.each(jsonValue, function (name, ival) {  
	        obj.find("span[data-name=" + name + "]").text(ival);   
	    });   
    }
});

4.效果

jquery实现页面嵌套include