记住浏览器上的前进后按钮,记住tab的切换页面

 
 
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,"","");// 三个参数
    });
 

猜你喜欢

转载自blog.csdn.net/lilyheart1/article/details/78684853