jquery implements page nesting include

Like the PHP template engine, using include to introduce common files

One. Note

1. How to use

Introduction of Js--jquery.include.js (Save as plug-in)

JQuery.fn.extend ({
    include:function (path) {
        var _this = $ (this);
        
        $.get (path, function (HTML) {
            _this.replacewith (HTML);
        });

        return 0;
    }
});

Add to HTML page

<script type= "Text/javascript" id= "Block_font" >
	$ (function () {
		$ ("#block_font"). Include (" Fontback.html ");
	})
	</script>

Note: The ID must be in script with $ ("#block_font"). Include (...); ID is the same, the name of the page can be arbitrarily

2. Attention points

1. For the insertion position, this should be the most difficult to handle.

If the <div id= "Block_font" ></div> is inserted directly in the location. In this case, it would feel a bit messy, because to use this function we need to write a script tag,

So I suggest to put the jquery-2.1.4.min.js in the head, and then the other plug-ins on the bottom, so it will not affect the JS rendering. Then the location needs the content of the sub-page to put the code in the bottom.

<script type= "Text/javascript" id= "Block_font" >
	$ (function () {
		$ ("#block_font"). Include (" Fontback.html ");
	})
	</script>

2. Sub-page fontback.html content if there is JS participation, remember to put JS that part of the content directly into the fontback.html, otherwise invalid.

Two. Example

1. Home

<! DOCTYPE html>  
 2.fontback.html 
 

<style>. cnt{padding:40px 0;
Text-align:center;
  }. cnt-text{font-size:48px;
position:relative;
  }/* Foam */. 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&gt
; <script type= "Text/javascript" > $ (function () {bubbles ();}) function Bubbles () {$.each ($ (". js-cnt-text_bubble
		S "), 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: ' + S ize + ' px; Height: ' + size + ' Px;animation-delay: ' + (rnd (0,30)/10) + ' s; background-color:# ' + Math.floor (math.random () *0xffffff). toString (16) + '; '
  	></span> ');
}		
	});
      }//Generate random number function rnd (m,n) {m = parseint (m);
      n = parseint (n);
Return Math.floor (Math.random () * (n-m + 1)) + M; } </script>
 
3.js.js (I put the introduction of the sub-page function in the public JS inside, and there is no separate JS inside)

JQuery.fn.extend ({
	//introduced child page function
    include:function (path) {
        var _this = $ (this);
        
        $.get (path, function (HTML) {
            _this.replacewith (HTML);
        });

        return 0;
    },
    //Get JSON data displayed in span
    setform:function (jsonvalue) {
    	var obj=this;  
	    $.each (Jsonvalue, function (name, ival) {  
	        obj.find ("span[data-name=" + name + "]"). Text (ival);   
	    });   
    }
});
 

 
4. Effects