jQuery 单页无刷新插件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 单页无刷新插件相关的知识,希望对你有一定的参考价值。

现在很多网站都使用了单页无刷新效果,这里自己也封装了一个类似 PJAX 的jquery插件(支持浏览器前进后退按钮及url地址更改不跳转),方便以后在项目中应用或参考,在测试的时候注意自己的本地路径,这里采用了ajax所以不能直接点击打开,必须得在本地服务器下执行;

文件目录:

技术分享

index.html 为首页展示页:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>单页插件</title>
<style>
.op{color:orangered;}
li{line-height:20px;}
h1{font-size:1em;}
</style>
</head>
<body>

    <div id="onePage">
        <h1><a href="http://localhost/onePage/">首页</a></h1>
        <ul>
            <li><a href="/page1/1.html">1-1</a></li>
            <li><a href="/page1/2.html">1-2</a></li>
            <li><a href="/page2/1.html">2-1</a></li>
            <li><a href="/page2/2.html">2-2</a></li>
        </ul>
        <div data-content>
            默认首页内容...
        </div>
    </div><!--onePage-->

<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script src="js/onePage.js"></script>
<script>

$(function(){
    
    $(#onePage).onePage({
        dUrl : http://localhost/onePage/, //这里需要填写你的域名(*必填项)
        goHome : function(){
            //这里需要自己配置一下首页要执行的内容
            console.log(请自行加载首页内容,这里便回到默认状态...);
            $(#onePage).find(div[data-content]).html(默认首页内容...) ;
            $(#onePage).find(a).removeClass(op);
        } ,
        callBack : function(data){
            //这里是 DOM 操作区域,可以自己定义修改,这里只是 demo
            $(#onePage).find(div[data-content]).html( data ) ;
        }
    });

});
</script>
</body>
</html>

 

 

onePage.js

/***
    1、此插件适用于单页模式网站,即无刷新;
    2、注意的是插件参数 dUrl 为自己的一级域名,这个是必须得填写的,因为方便于程序的操作*;
    3、a 链接为自己的目录文件的html 或者是 json 数据,如果是json 数据的话,那么必须得在插件参数 callBack 中设置 DOM 插入的内容;
    4、插件参数 goHome 回调为回到首页的操作;
    5、如果需要加入loading 的一些操作,那么你可以找到ajax中 beforeSend 和 success 函数添加你需要的代码;
    6、关于 a 链接的 ajax 配置需要与后端沟通,当然此插件可能在项目中有些不足,可以自行修改,添加你想要的功能代码都是可以的;
***/
;(function ($) {
    $.fn.onePage = function ( opt ) {
        var def = {
            dUrl : ‘http://localhost/onePage/‘ , //你的默认域名
            goHome : function(){} ,//返回按钮操纵的时候网址回到首页要操纵的事件
            callBack : function(){} //这里是获取到 ajax 数据之后执行的操作
        } ;
        
        opt = $.extend( def , opt );
        this.each(function(){

            var THAT = $(this) ,
                   NODE = THAT.find(‘a‘) ,
                   CON = THAT.find(‘div[data-content]‘) ,
                   HREF = window.location.href ,
                URL = null ; 

               //获取数据和操作获取数据之后 DOM 的内容 , 如果设置的没有相关的页面
               var getDate = function( filePath ){
                //防止重复请求ajax
                if ( URL == filePath ) return ;

                THAT.find(‘a‘).removeClass(‘op‘);
                THAT.find(‘a[href="‘ + filePath + ‘"]‘).addClass(‘op‘);

                $.ajax({
                       type : ‘GET‘,
                       url : ‘.‘ + filePath , 
                       beforeSend : function()
                       {
                           //这里是加载前执行的东西,可以自定义自己想要的loading
                           console.log(‘正在加载的loading效果,需要自己定义‘);
                       } ,
                       //当获取数据成功之后要做的事情
                       success : function( data )
                       {
                           //地址栏操作及不重复请求
                           window.location.href = ‘#!‘+ filePath;
                        URL = filePath ;

                        //回调函数
                           opt.callBack( data );
                       } ,
                       error : function( ){
                        //当没有这个url的时候执行的操作
                           CON.html(‘404‘);
                       }
                   });
               }


               //当有事件触发的时候 , a便签被触发
               NODE.on(‘click‘,function(){
                   var _this = $(this) ;
                   //防止重复加载相同内容
                   if ( _this.hasClass(‘op‘) ) return false ;
                   //获取href值来操作
                   var th = _this.attr(‘href‘) ;

                //如果是首页链接的话,那么就执行首页操作
                if ( th == opt.dUrl ) {
                    URL = null ; 
                    opt.goHome();
                }else{
                    if ( th != undefined ){
                        getDate( th );
                    }
                }

                   return false;
               });

            //避免一些误操作得到的url
            var TAIL = HREF.split(‘#!‘) ;
            if( HREF.indexOf(‘#!‘) != -1 && TAIL[1] != ‘/‘ && TAIL[1] != ‘‘ ){
                var result = TAIL[1] ;
                   getDate( result );
            }

               //当地址栏发生改变的时候
               window.onhashchange = function(){
                   //当直接用 url 在地址栏上访问的时候处理
                   var optionUrl = window.location.href ,
                       result = optionUrl.split(‘#!‘)[1] ;
                //当误操作或直接是首页url的时候
                if ( optionUrl == opt.dUrl || result == ‘‘ || result == ‘/‘ ) {
                    URL = null ; 
                    opt.goHome();
                }else{
                    getDate( result );
                }
                   return false;
               }

        });
        return this;
    }
})(jQuery);

 

以上是关于jQuery 单页无刷新插件的主要内容,如果未能解决你的问题,请参考以下文章

asp.net 带有gridview的分页无刷新,急求,使用ajax

效果超赞的单页jQuery插件

拥抱单页网站! jQuery全屏滚动插件fullPage.js

VIM 代码片段插件 ultisnips 使用教程

单页应用及多页应用

移动端下滑刷新插件(jQuery插件)