j360-admin
工程结构
参考j360admin.js
触发机制
菜单触发
工作台
其他超链接
工作台
JS触发
工作台
或者
工作台
$("#dashboard").click(function(e){ loadRootUrl('views/dashboard'); e.preventDefault();})
添加触发引擎
// all links with hash tags are ignored$(document).on('click', '#side-menu a[href="#"]', function(e) { e.preventDefault();});$(document).on('click', '#side-menu a[href!="#"]', function(e) { e.preventDefault(); $this = $(e.currentTarget); // if parent is not active then get hash, or else page is assumed to be loaded if (!$this.parent().hasClass("active") && !$this.attr('target')) { window.location.hash = $this.attr('href'); }});// fire links with targets on different window$(document).on('click', '#side-menu a[target="_blank"]', function(e) { e.preventDefault(); $this = $(e.currentTarget); window.open($this.attr('href'));});
先贴代码:关键之处,当发生url变化时,不触发浏览器同步加载,使用自定义的函数checkURL处理url的hash change
// DO on hash change$(window).on('hashchange', function() { checkURL();});
checkURL:检查URL是否满足跳转条件(分别对URI和param各自分开处理)
//use when url not changed and param must change then use this tagvar nonReloadUrlTag = "non-reload=true";function checkURL() { if(!location.hash){ url = ""; }else{ //get the url by removing the hash url = location.hash.replace(/^#/, ''); } var ajax_container = $("#container"); // Do this if url exists (for page refresh, etc...) if (url) { //if has non-reload then url changed,but page non-reload if(url.indexOf(nonReloadUrlTag) != -1){ if(preHash != ""){ var cHash = url; if(url.indexOf("?")!=-1){ var vHash = preHash.split("?"); cHash = vHash[0]; } if(preHash == cHash){ return ; } } }else{ //empty the preHash. preHash = ""; } // remove all active class $('#side-menu li.active').removeClass("active"); // match the url and add the active class $('#side-menu li:has(a[href="' + url + '"])').addClass("active"); title = ($('#side-menu a[href="' + url + '"]').attr('title')) // change page title from global var document.title = (title || document.title); //console.log("page title: " + document.title); // parse url to jquery loadURL(url, ajax_container); } else { // grab the first URL from nav var defaultLink = $('#side-menu > li:first-child > a[href!="#"]'); if(!defaultLink.length){ defaultLink = $('#side-menu ul > li:first-child > a[href!="#"]'); } //update hash window.location.hash = defaultLink.attr('href'); }}
loadURL:异步加载页面的片断进行局部更新
function loadURL(url, ajax_container) { //console.log(ajax_container) $.ajax({ type : "GET", url : url, dataType : 'html', contentType: "application/x-www-form-urlencoded; charset=utf-8", cache : false, // (warning: this will cause a timestamp and will call the request twice) beforeSend : function() { // cog placed ajax_container.html('加载中...
'); if (ajax_container[0] == $("#container")[0]) { drawBreadCrumb(); // update title with breadcrumb... document.title = _title + " - " + $(".breadcrumb li:last-child").text(); // scroll up $("html, body").animate({ scrollTop : 0 }, "fast"); } else { ajax_container.animate({ scrollTop : 0 }, "fast"); } }, complete: function(){ // Handle the complete event }, success : function(data) { // cog replaced here... ajax_container.css({ opacity : '0.0' }).html(data).delay(50).animate({ opacity : '1.0' }, 300); }, error : function(xhr, ajaxOptions, thrownError) { ajax_container.html('错误 404! 页面没找到!'); }, async : true }); //console.log("ajax request sent");}
//load the root content by urlvar preHash = "";function loadRootUrl(url){ getPreHashUrl(); window.location.hash = url;}function getPreHashUrl(){ if(!location.hash){ preHash = ""; }else{ //get the url by removing the hash preHash = location.hash.replace(/^#/, ''); } if(preHash.indexOf("?")!=-1){ var vHash = preHash.split("?"); preHash = vHash[0]; }}
loadRootUrl:通过JS执行打到页面的局部加载