pjax 和 NProgress.js 的研究和使用

看到 推酷 的博客效果挺好的，然後就找到了 這盤文章 ：  http://www.tuicool.com/articles/fMrEVv  （使用Pjax優化你的網站）;

這個網站是使用了 pjax 和 NProgress.js 這2個前端插件的；

下面先說 pjax：

https://github.com/defunkt/jquery-pjax 爲pjax的github項目地址

在github的項目地址裏有關於pjax的詳細說明和使用方法，這裏不再贅述，本文主要是使用中的一些代碼記錄和使用心得，方便以後查閱快速上手使用。

看下下述小段代碼：

<div class="body">
    <?php $action_name = $Think.ACTION_NAME; ?>

    <!-- 頭部喲 -->
    <?php if ($action_name == 'news'): ?>
        <include file="Brand:header_news" />
    <?php elseif ($action_name == 'forum'): ?>
        <include file="Brand:header_forum" />
    <?php endif; ?>

    <!-- 資訊的二級分類 -->
    <div class="cb"></div>
    <div class="brand-news-nav pjax">
        <ul class="clearfix">
            <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
            <volist name="cat_list" id="vo" key="i">
                <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>
            </volist>
        </ul>
    </div>

    <script type="text/javascript">
        $(function(){
            $(document).pjax('.pjax a', '#pjax-container',{
                type:'post',
                scrollTo:false,
            });
            $(document).on('pjax:click', function() {
                enable_loading = false;
            })
            $(document).on('pjax:send', function(){
                var str = "<p class='tc mt-10'>加載中...</p>";
                $('#pjax-container').html(str);
            })

            //最後一個右側加邊框
            $(".brand-news-nav ul li").last().children('a').addClass('last');
            $(".brand-news-nav ul li").click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');
            })
        })
    </script>

    <!-- 文章列表頁 -->
    <div class="wrap clearfix">
        <div class="brand-news-list fl" id="pjax-container">
            <include file="Brand:article_pjax" />
        </div>
        <div class="brand-news-right fr pb-20">
            <a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a>
            <p class="title mt-10">法律支持</p>
            <ul class="bgc-fff">
                <volist name="law_list" id="vo">
                    <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
                </volist>
            </ul>
            <button class="btn btn-right mt-10 btn-consult">免費諮詢</button>
            <script type="text/javascript">
                $(function(){
                    //最後一個需要添加一個last的樣式
                    $(".brand-news-right li:last").addClass('last');
                })
            </script>
        </div>
    </div>
</div>

服務器端處理

if(is_pjax()){
    $this->display('article_pjax');
}else{
    $this->display('article');
}

//判斷是否是pjax請求
function is_pjax(){
    return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
}

其中的主要思想就是當     .pjax a    進行點擊的時候，將#pjax-container的內容替換爲請求後的內容。在後端處理時需要判斷是否是pjax請求，如果是需要進行局部渲染，如果不是進行全部渲染。

因爲pjax用到了HTML5技術，如果瀏覽器不支持Html5那麼網站會正常進行跳轉式的加載，如果支持那麼只是進行局部渲染（但是瀏覽器地址欄中的url會正常跟着a鏈接進行變動）。

注意上述的js代碼中在配置pjax時有個參數scrollTo:false,加上此參數表示點擊連接後網頁的scrollBar不會變動，如沒有此參數，每次點擊時瀏覽視窗會自動跳轉到網頁頂部

然後接下來是 NProgress :

NProgress.js 的下載地址 

https://github.com/rstacruz/nprogress

NProgress 需要Jquery 版本在 1.8以上；

引入Nprogress

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

當Pjax在使用的時候，可用如下代碼：

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });

其他具體用法 可參照  http://blog.csdn.net/u012369749/article/details/62422113 （NProgress.js全站進度條插件 中文API）