TP3.1.3+Pjax Demo 实现无刷新改变URL的方式
Pjax相关原理及用法可以从下面的网站查看。
welefen版本:https://github.com/welefen/pjax
defunkt版本:https://github.com/defunkt/jquery-pjax [Demo用的是这个]
支持Pjax功能的浏览器(HTML5):http://caniuse.com/#search=pushstate
TP+Pjax Demo实现方法:
./Lib/Common.Action.class.php 【临时开启模板layout(true);的用法见:http://www.thinkphp.cn/info/183.html第三种方式】
<?php class CommonAction extends Action { protected function render($data) { $this->assign('data', $data); //控制器传参到模板 if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) { $this->display(); //浏览器支持Pjax功能,直接渲染输出页面 } else { layout(true); //开启模板 $this->display(); //浏览器不支持Pjax功能或F5刷新页面,使用默认的链接响应机制(加载模板) } } }
./Lib/IndexAction.class.php (继承于CommonAction)
<?php class IndexAction extends CommonAction { public function index() { $data['name'] = 'ThinkPHP+Pjax Demo'; $this->render($data); } public function about() { $data['name'] = '测试传参。'; $this->render($data); } }
./TPL/layout.html (模板中Pjax布署)
<script type="text/javascript"> $(document).ready(function(){ $('#loading').hide(); //隐藏loading }); $(document).pjax('a', '#pjax-container'); //内容替换的容器 $(document).on('pjax:send', function() { $('#loading').show(); //显示loading }); $(document).on('pjax:complete', function() { $('#loading').fadeOut(1000); //隐藏loading效果 }); </script>
下载demo:
http://www.thinkphp.cn/code/download/id/466.html
另外补充一下bootstrap这个东西不错。