基于 jquery 的片段异步加载 jquery-fjax

MIT
JavaScript
跨平台
2017-07-03
无夜

jquery-fjax 页面片段异步加载

  • 基于锚点技术,支持所有浏览器,不需要浏览支持 history.pushState

  • 如果支持客户浏览器都支持 history.pushState ,建议使用 pjax

  • 需要引入 jquery 库,开发版本选用的是v2.2.1,其它版本未验证

  • QQ:16349023

    <script th:src="@{${prefixPath}+'/assets/plugins/jquery-fjax/jquery.fjax.js'}" src="/assets/plugins/jquery-fjax/jquery.fjax.js"></script>
    <script  type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(function() {
        var fjax_options = {
            fragment:'#pagecontent',
            prefix:'/manage/',
            beginLoad:function () {
                console.log("begin");
            },
            endLoad:function () {
                console.log("end");
            },
            success:function () {
                console.log("success");
            },
            error:function () {
                console.log("error");
            },
            'default_url': 'main',//default hash
            'content_url': function(hash,prefix) {
                //***NOTE***
                //this is for Ace demo only, you should change it to return a valid URL
                //please refer to documentation for more info
                var hashValue=hash;
                var path = document.location.pathname;
                //var requestUrl=path + "/" +hashValue.replace(/^page\//, '');
                //var requestUrl=path + "/" +hashValue;
                console.log(prefix);
                var requestUrl=prefix+hashValue;
                console.log(requestUrl);
                return requestUrl;
            }
        }
        $('.page-content-area').fjax(fjax_options);
    });
    
    /*]]>*/
    </script>
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

Jquery(01)jQuery的下载以及使用

一、概述 1、版本选择 jquery官网 jQuery的版本有很多,大家在选择版本的时候,一般原则是越新越好,但其实不然,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技...

2019/10/31 16:36
97
0
jquery及jquery常用选择器使用

本文为博主原创,未经允许不得转载: 1.jquery强大之处: 容易上手,强大的选择器,解决浏览器的兼容 完善的时间机制,出色的ajax封装,丰富的ui 2.jquery是一个javascript脚本库,不需要特别的安...

2018/05/24 15:45
74
0
jQuery(function(){})与(function(){})(jQuery)的区别

开发jQuery插件时总结的一些经验分享一下。 一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); 意义为在DOM加载完毕后执行了ready()方法。 二、再看 (functio...

2012/07/16 11:34
159
0
初看jQuery,比较dojo与jQuery的不同点

以下观点是建立在我初看jQuery,但并没有对jQuery详细理解的情况下。 可能随着后面对jQuery的使用,而增加更深的了解。也可能发现我当初的观点是错误的。 大体浏览了一下jQuery的文档,发现j...

2012/08/18 20:16
1.4K
0
jQuery源码学习一: 创建一个jquery实例

###前言: jquery是每个前端都会的基础技能,众所周知,jquery返回的是jquery实例方法,但是我们似乎是直接使用$就可以获取到jquery的方法啦,可以在浏览器中判断一下 window.$ 和window.jQ...

2019/09/05 16:55
21
0
jQuery(function(){})与(function(){})(jQuery)的区别

一、 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); jQuery(function(){ });用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在。不可用于存放开发插件的代...

2012/06/04 13:18
169
0
jquery_认识jquery好处、选择器、小案例

1、学习jquery             a、什么是框架库          b、为什么要学习jquery                c、jquery中的顶级对象             d、页面的加载事...

2019/05/30 15:11
78
0
jquery-3 jquery选择器

jquery-3 jquery选择器 一、总结 一句话总结:选择器使用的时候可以结合参考手册,里面都已经详细归类好了。(多用才能熟啊) 1、$(:input).css({'color':'#987654'}); 中的css方法中的参数是...

2018/06/21 03:16
47
0
jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别及用法

假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提...

2018/02/24 20:28
32
0
jQuery 学习笔记:jQuery 代码结构

jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出。 jQuery 的最外层 $,jQ...

2018/05/07 23:42
32
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部