FastAdmin 无刷新地址改变

群里有人问 FastAdmin 是不是用了 pjax?

之前有看到 Karson 回复过,其实 FastAdmin 用的是 HTML5 的一个History API pushState

那代码在哪里呢?

require-backend.min.js

        if (history.pushState) {
//浏览器前进后退事件
$(window).on("popstate", function (e) {
var state = e.originalEvent.state;
if (state) {
$("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
}
});
}
$(options.monitor).on('click', '[addtabs]', function (e) {
if ($(this).attr('url').indexOf("javascript:") !== 0) {
if ($(this).is("a")) {
e.preventDefault();
}
var id = $(this).attr('addtabs');
var title = $(this).attr('title') ? $(this).attr('title') : $.trim($(this).text());
var url = $(this).attr('url');
var content = options.content ? options.content : $(this).attr('content');
var ajax = $(this).attr('ajax') === '1' || $(this).attr('ajax') === 'true';
var state = ({
url: url, title: title, id: id, content: content, ajax: ajax
}); document.title = title;
if (history.pushState && !$(this).data("pushstate")) {
var pushurl = url.indexOf("ref=addtabs") === -1 ? (url + (url.indexOf("?") > -1 ? "&" : "?") + "ref=addtabs") : url;
try {
window.history.pushState(state, title, pushurl);
} catch (e) { }
}
$(this).data("pushstate", null);
_add.call(this, {
id: id,
title: $(this).attr('title') ? $(this).attr('title') : $(this).html(),
content: content,
url: url,
ajax: ajax
});
}
});

我们始终相信,完美的也是脆弱的,不要一味的追求完美却忘了最初的目标。

FastAdmin 无刷新地址改变的更多相关文章

  1. JSF中使用f:ajax标签无刷新页面改变数据

    ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...

  2. history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)

    示例: http://browserstate.github.io/history.js/demo/     简介   HTML4有一些对浏览历史的前进后退API的支持如:   window.hist ...

  3. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  4. 使用ajax和history.pushState无刷新改变页面URL

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  5. 通过history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  6. 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  7. 使用ajax和history.pushState无刷新改变页面URL(转)

    表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...

  8. history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  9. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. ana3+opencv+TensorFlow+NVIDIAGPU 安装

    http://blog.csdn.net/qq_30611601/article/details/79067982 这个博客写的挺完整的 当你发现你的anna下载的贼鸡儿的慢,你就需要使用清华的镜像网 ...

  2. centos6/7安装 tinyproxy (yum安装)

    centos6/7安装tinyproxy(yum安装)2016年06月06日 运维 暂无评论 阅读 790 次centos7安装tinyproxy,centos6安装tinyproxy,centos6 ...

  3. 【Error】IOError: [Errno 22] invalid mode

    使用python打开或写入文件时会报以下错误IOError: [Errno 22] invalid mode,比如打开f:\nnpm.txt时,可以在地址前面加上r或R,即r'f:\nnpm.txt' ...

  4. guava学习--cache

    转载:http://outofmemory.cn/java/guava/cache/how-to-use-guava-cache   http://www.cnblogs.com/parryyang/ ...

  5. 使用Unity创建塔防游戏(Part3)—— 项目总结

    之前我们完成了使用Unity创建塔防游戏这个小项目,在这篇文章里,我们对项目中学习到的知识进行一次总结. Part1的地址:http://www.cnblogs.com/lcxBlog/p/60759 ...

  6. OpenMP学习

    当数据量较大或者时间复杂度高的时候,盲目地等待结果,开发效率极低. 听说OpenMP可以多核并行运算,加快运行速度.整理了一些OpenMP的资料,以待学习. 1.openMP的一点使用经验 2.Ope ...

  7. 【HTML5】使用 JavaScript 来获取电池状态(Battery Status API)

    HTML5 规范已经越来越成熟,可以让你访问更多来自设备的信息,其中包括最近提交的 "Battery Status API".如其名称所示,该 API 允许你通过 JavaScri ...

  8. JQuery强大的操控标签能力

    jquery选择器 $("#myId")          选择id为myId的元素 $(".myClass")     选择class为myClass的元素 ...

  9. win2008 服务器文件夹权限配置

    通过控制文件夹权限来提高站点的安全性. 这一篇权限设置包括二个方面,一个是系统目录.盘符的权限,一个是应用程序的上传文件夹权限设置. 系统目录 确保所有盘符都是NTFS格式,如果不是,可以用命令 co ...

  10. Android 屏幕密度适配

    Android Icon Size and Location for Apps   分辨率 DPI Density scale 1dp对应像素 1dp对应物理尺寸 Location Icon Size ...