基于 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)

暂无评论

暂无资讯

暂无问答

【转】240多个jQuery插件

参考文档:http://www.cnblogs.com/terrylee/articles/988623.html 文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an in...

2013/05/28 15:55
148
1
[JavaScript]240个jQuery实现AJAX插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 00:12
51
0
强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 11:53
218
0
【转】75种常用的jquery网页特效

参考文档:http://www.oschina.net/code/snippet_187746_9846 1、jquery图片特效(14种 ) (1)、jquery cycle 循环插件多功能幻灯片插件支持多种幻灯片特效 (2)、jquery flow 图片切换滚...

2013/05/28 15:28
762
0
DOM对象与JQuery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

2014/09/13 16:19
20
0
js:滚动页面时自动激活对应菜单中的条目

这个在[Change Active Menu Item on Page Scroll?](http://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll)有详细的讨论。对应的代码在[http://jsfiddle.net/...

2015/11/20 15:18
55
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

11/04 19:51
39
0
dom对象和jQuery对象的区别

dom对象和jQuery对象的区别

2014/07/30 22:07
87
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部