FastAdmin 无刷新地址改变
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 无刷新地址改变的更多相关文章
- JSF中使用f:ajax标签无刷新页面改变数据
ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...
- history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
示例: http://browserstate.github.io/history.js/demo/ 简介 HTML4有一些对浏览历史的前进后退API的支持如: window.hist ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
- 使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- cowsay
# apt install cowsay sl cmatrix $ cowsay "hello~" $ find /usr/share/cowsay/cows -iname &qu ...
- 重新学习MySQL数据库7:详解MyIsam与InnoDB引擎的锁实现
重新学习Mysql数据库7:详解MyIsam与InnoDB引擎的锁实现 说到锁机制之前,先来看看Mysql的存储引擎,毕竟不同的引擎的锁机制也随着不同. 三类常见引擎: MyIsam :不支持事务,不 ...
- Pytorch 一些函数用法
PyTorch中view的用法:https://blog.csdn.net/york1996/article/details/81949843 max用法 import torch d=torch.T ...
- Hibernate所用15个jar包
Hbernate3.jar-------------------核心包antlr.jar----------------------------语言转换工具,hibernate用他将hql语句转换为s ...
- linux下鼠标穿透和取消穿透--linux小白,大神无视
最近在用qt写一个跨平台的软件,因为设置了无边框,并且我自己给程序窗口加了阴影,阴影范围又比较大 所以必须给阴影区域加上鼠标穿透才能有更好的体验. 上网查了一下,在windows下使用SetWindo ...
- zen cart 空白页面的解决方案
在安装zen cart 这套CMS时, 有时候会由于修改了某些页面或者是由于环境的某些组件的版本问题导致前台页面出现空白页, 由于在空白页面处没有任何提示, 并且在日志中也没有这样的出错提示, 导致在 ...
- 009PHP基础知识——运算符(二) 逻辑运算符
<?php /**运算符(二) 逻辑运算符: */ //1.逻辑与 and或&& 左右两边表达式均成立TRUE ,返回真值: /*$uname='admin'; $upwd='l ...
- Java常用类:StringBuilder
一.介绍 2 3 4 5 //同样,StringBuilder也是final修饰的不可变,相比String来说,继承了AbstractStringBuilder,StringBuffer也是同样继承了 ...
- Ubuntu下执行mysql的sql文件
Ubuntu下执行mysql的.sql文件 方法一: 1.执行此命令,会提示输入mysql的root账户的密码,验证成功后,会在dbname这个数据库中执行filename.sql这个脚本,其中f ...
- 继承users表,添加新字段成一个新表
1. Tools > Run manage.py Task 创建app,users startapp users 2.修改users中的models from django.db import ...