资源来源网上,做个备忘
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]
页面调用
main.js
3、html5 定义data-*属性自定义加载
效果参考
[url]
http://wbpreview.com/previews/WB095F5T9/
[/url]
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.');
}
});
}