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的详细说明和使用方法，这里不再赘述，本文主要是使用中的一些代码记录和使用心得，方便以后查阅快速上手使用。

看下下述小段代码：

[html] view plain copy

 

1. <div class="body">  
2.     <?php $action_name = $Think.ACTION_NAME; ?>  
3.   
4.     <!-- 头部哟 -->  
5.     <?php if ($action_name == 'news'): ?>  
6.         <include file="Brand:header_news" />  
7.     <?php elseif ($action_name == 'forum'): ?>  
8.         <include file="Brand:header_forum" />  
9.     <?php endif; ?>  
10.   
11.     <!-- 资讯的二级分类 -->  
12.     <div class="cb"></div>  
13.     <div class="brand-news-nav pjax">  
14.         <ul class="clearfix">  
15.             <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>  
16.             <volist name="cat_list" id="vo" key="i">  
17.                 <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>  
18.             </volist>  
19.         </ul>  
20.     </div>  
21.   
22.     <script type="text/javascript">  
23.         $(function(){  
24.             $(document).pjax('.pjax a', '#pjax-container',{  
25.                 type:'post',  
26.                 scrollTo:false,  
27.             });  
28.             $(document).on('pjax:click', function() {  
29.                 enable_loading = false;  
30.             })  
31.             $(document).on('pjax:send', function(){  
32.                 var str = "<p class='tc mt-10'>加载中...</p>";  
33.                 $('#pjax-container').html(str);  
34.             })  
35.   
36.             //最后一个右侧加边框  
37.             $(".brand-news-nav ul li").last().children('a').addClass('last');  
38.             $(".brand-news-nav ul li").click(function(){  
39.                 $(this).addClass('selected').siblings().removeClass('selected');  
40.             })  
41.         })  
42.     </script>  
43.   
44.     <!-- 文章列表页 -->  
45.     <div class="wrap clearfix">  
46.         <div class="brand-news-list fl" id="pjax-container">  
47.             <include file="Brand:article_pjax" />  
48.         </div>  
49.         <div class="brand-news-right fr pb-20">  
50.             <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>  
51.             <p class="title mt-10">法律支持</p>  
52.             <ul class="bgc-fff">  
53.                 <volist name="law_list" id="vo">  
54.                     <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>  
55.                 </volist>  
56.             </ul>  
57.             <button class="btn btn-right mt-10 btn-consult">免费咨询</button>  
58.             <script type="text/javascript">  
59.                 $(function(){  
60.                     //最后一个需要添加一个last的样式  
61.                     $(".brand-news-right li:last").addClass('last');  
62.                 })  
63.             </script>  
64.         </div>  
65.     </div>  
66. </div>  

服务器端处理

[php] view plain copy

 

1. if(is_pjax()){  
2.     $this->display('article_pjax');  
3. }else{  
4.     $this->display('article');  
5. }  

[php] view plain copy

 

1. //判断是否是pjax请求  
2. function is_pjax(){  
3.     return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];  
4. }  

其中的主要思想就是当     .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）