1.使用bootstarp里的tab页切换效果,根据业务需要需要在返回时记住tab页的切换,不再返回时总是在第一个tab上,加上下面这段代码可实现效果:
$(document).ready(function() {
if(location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});
2.浏览器上的前进后退按钮,用h5新特性-history.pushState("","",""):
在本页面开始加载时加入如下代码:
//返回到前一个页面时仍然保存上次搜索时填入的内容
var state ={};
var list = window.history.state;
$(function(){
testList(list);
});
function testList(list){
if(list == null){
list = {
pageIndex:1,//分页的索引页码数
param:{
}
}
}
test1List(list);
}
function test1List(data){
// 页面初始化时,需要初始化的函数
........
..........
if( data.param != null ){
//将搜索的条件转化为json格式,用封装的方法去请求搜索的接口
jsonToForm('#search_form', data.param);
//调用自己需要的函数
eg:getFinance(data.pageIndex,pageSize,true);
}
}
再要点击跳转的按钮加点击事件:
// 点击此按钮跳转至另一个页面
$("#print").click(function () {
//将搜索条件(此处搜索的条件多,所以转化)转化为json格式赋给state的属性
state.param = formToJson('#search_form', '');
//若有分也时,点击不同的分页码跳转到不同的分页,将它存入state中
state.pageIndex = $('#finance_page .pagination>.active a').text();
window.history.pushState(state,"","");// 三个参数
});