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 ...
随机推荐
- Android数据库框架-----ORMLite 的基本用法
ORMLite 是一款非要流行的Android平台上的数据库框架,性能优秀,代码简洁: 简述: 优点: 1.轻量级:2.使用简单,易上手:3.封装完善:4.文档全面. 缺点:1.基于反射,效率较低(本 ...
- NOIP2018小反思
今天下午做了一道叫邮票 Stamps的题.敲代码的时候就发现,好像和去年D1T2货币系统有点像,原理都是一个完全背包DP.做完之后交上去发现有几个点RE了,于是马上把数组改大,AC. 我赶忙找到去年那 ...
- 1023: Pong’s Birds(概率)
1023: Pong’s Birds 时间限制: 1 Sec 内存限制: 128 MB提交: 94 解决: 21[提交][状态][讨论版] 题目描述 In order to train his b ...
- HDU-4123-树形dp+rmq+尺取
Bob’s Race Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- UVA-1619 Feel Good (单调队列)
题目大意:给一个非负整数序列,求出一个使得区间和乘以区间最小值最大的区间. 题目分析:单调队列.维护两个数组,l[i]表示以a[i]为最小值的左半区间的最左边端点,r[i]表示以a[i]为最小值的右半 ...
- SPOJ MYQ10 (数位DP)
题意 询问区间[a,b]中的Mirror Number的个数,其中Mirror Number是指把它横着翻转后还能表示同样的数字. 思路 注意这个可不是回文数..除了0,1,8,别的数字翻转过后就不是 ...
- IOS-APP主流UI框架结构
一.简单示例 说明:使用APP主流UI框架结构完成简单的界面搭建 搭建页面效果: 二.搭建过程和注意点 1.新建一个项目,把原有的控制器删 ...
- 013——数组(十三) array_push array_rand array_reverse
<?php /* 数组 array_push array_rand array_reverse */ //array_push()在数组的末端,增加一个或多个元素,入栈 /*$array = a ...
- 二、DBMS_JOB(用于安排和管理作业队列)
1.概述 作用:用于安排和管理作业队列,通过使用作业,可以使ORACLE数据库定期执行特定的任务注意:当使用DBMS_LOB管理作业时,必须确保设置了初始化参数job_queue_processes( ...
- hdu4115
题解: 2-sat 对于bob出的每一张牌,alice显然只有两种选择 然后对于每一个限制,连边 判断是否可行 代码: #include<cstdio> #include<cmath ...