jquery动态加载页面方案

资源来源网上，做个备忘

1、分别加载的html及js，分成两个文件
jquery加载页面
$('#区域id').load('页面名称');
JQuery的
$.getScript(url,callback) 方法加载js脚本

js加载例子参照
[url]
http://www.cnblogs.com/58top/archive/2012/10/29/loading-javascript-dynamically-using.html
[/url]

获取url参数所指定的脚本，使用一个GET请求到指定的服务器

Parameters
URL（）获取脚本文件的URL。

callback (Function)可选函数 调用脚本文件加载后里面的函数

几种不同的js加载方法
[url]
http://www.jb51.net/article/17992.htm
[/url]

2、js加载使用requireJS
具体例子参照
[url]
http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
[/url]

页面调用

<script data-main="main" src="require.js"></script>

main.js

require.config({
    paths: {
        jquery: 'jquery-1.7.2'
    }
});

require(['jquery'], function($) {
    alert($().jquery);
});

3、html5 定义data-*属性自定义加载
效果参考
[url]
http://wbpreview.com/previews/WB095F5T9/
[/url]

<sideBar><ul><li data-link="features"><figure>Features</figure></li></ul></sideBar>

		$(".sideBar>ul>li>figure:first-child").on("click",function(){
			var link = $(this).parent().attr('data-link');
			if(link != 'none'){
				loadPage(link.toString().toLowerCase());
			}
			if(!$(this).parent().find('.subSide').length){
				$('.subSide').slideUp();
			}			
		});

function loadPage(page){
	$.ajax({
		url:"pages/"+page.toString()+".html",
		cache:false,
		success: function(data){
			$(".content").empty();
			$(".content").html(data);
			$(".content").hide().fadeIn();
			updateSidebar(page);
			updateBreadCrumbs();		//Update the BreadCrumbs
			notification("You're in "+ page,"blue",2000);
		}
	}).done(function(){
		//This is the execution chain for different pages.
		//Note: Sub Pages are also defined here 
		//Functions used in this switch statement are defined in a new object named "chain"
		//this object contains all functions that you want to load when a specific page is initialized
		switch(page){
			case 'dashboard': chain.dashboard();
							  break;
			case 'home'     : chain.home();
			                  break;
			...
			default: console.log('Page loading chain not identified, Add a new chain in main.js under chain module.'); 
		}
	});
}