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. linux五大搜索命令学习

    五大搜索命令学习 分别解释locate,find,which,whereis,grep 五大linux搜索命令 locate 解释:由man手册可以看出,locate查找就是根据文件名进行查找,只是依 ...

  2. day19 Models补充+缓存+信号+序列化+分析抽屉页面

    参考链接: http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5 ...

  3. Nginx禁止域名恶意解析

    今天打开网站发现访客人数突增啊,不对啊,小站哪来这么多的访问量呢?打开百度统计,看到有其他的域名解析到我的IP,心中很不爽啊.遂搜索之,才有了此篇文章. 打开Nginx配置文件/etc/nginx/s ...

  4. laravel中Crypt加密方法

    使用Crypt::encrypt对数据进行加密,要引入 use Illuminate\Support\Facades\Crypt;;  对使用Crypt::encrypt加密的数据进行解密的方法时:C ...

  5. 快速求排列组合 lucas定理

    对于C(n, m) mod p.这里的n,m,p(p为素数)都很大的情况. 就不能再用C(n, m) = C(n - 1,m) + C(n - 1, m - 1)的公式递推了. 一般lucas定理的p ...

  6. 一月收集几个有用的谷歌Chrome插件

    谷歌Chrome自推出以来已经从一个简单的浏览器演变成一个复杂的浏览器,这得益于根据浏览器写出的非常有用和强大的扩展.作为一名开发人员,我们关注的是网页设计和开发部分的那些插件对我们有帮助,几个比较熟 ...

  7. CocoaPods Mac App的安装和使用

    CocoaPods桌面应用版下载地址:https://cocoapods.org/app打开应用会提示你是否安装命令行工具,选择install就也可以在命令行使用Pod了.省去了上面的步骤们,方便快捷 ...

  8. 《Effective C++》第2章 构造/析构/赋值运算(1)-读书笔记

    章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...

  9. Linux:expand命令详解

    expand 用于将文件的制表符[TAB]转换为空格,将结果显示到标准输出设备 语法 expand(选项)(file) 选项 -t<数字>:指定制表符所代表的空白字符的个数,而不使用默认的 ...

  10. (转)Mahout Kmeans Clustering 学习

    一.Mahout命令使用 合成控制的数据集 synthetic_control.data 可以从 此处下载,总共由600行X60列double型的数据组成, 意思是有600个元组,每个元组是一个时间序 ...