博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web admin框架的异步加载设计
阅读量:5730 次
发布时间:2019-06-18

本文共 4755 字,大约阅读时间需要 15 分钟。

hot3.png

j360-admin

工程结构

参考j360admin.js

105844_ar3F_1026123.png

触发机制

菜单触发

工作台

其他超链接

工作台

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执行打到页面的局部加载

转载于:https://my.oschina.net/smartsales/blog/511444

你可能感兴趣的文章
xib和storyboard的不同点总结
查看>>
对Android Handler Message Looper常见用法,知识点的一些总结
查看>>
大数据最佳学习路线
查看>>
JavaScript学习笔记01——关键字this
查看>>
IOS--GPS闹钟离线版--01toolBar添加退出程序按钮
查看>>
Flex 布局教程(语法)
查看>>
循环数组
查看>>
庖丁解牛
查看>>
Netty
查看>>
动态网页的建立
查看>>
Jxls+Spring MVC实现Excel导出
查看>>
chosen高度设置
查看>>
textFiled限制输入长度.
查看>>
PHP7.1.5编译安装
查看>>
DSL调试信息
查看>>
vim带你装逼带你飞(一)
查看>>
spring cloud 各组件快速认知
查看>>
OpenGL ES 应用开发实践指南 代码移植
查看>>
学JFinal不迷路,JFinal优质资源列表(欢迎反馈更新)
查看>>
java生产者消费者问题(线程同步与线程等待的应用)
查看>>