PJAX全局无刷新的设置方法~
先添加必要文件:
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script>
然后下面加上:
<script type="text/javascript" language="javascript">
$(function() {
$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax。#content 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
$(document).on('pjax:send', function() {
$(".pjax_loading,.pjax_loading1").css("display", "block");//参考的loading动画代码
//执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加 NProgress.start();
});
$(document).on('pjax:complete', function() {
$(".pjax_loading,.pjax_loading1").css("display", "none");//参考的loading动画代码
//执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
});
});
</script>
<div class="pjax_loading"></div>
<div class="pjax_loading1"></div>
参考css代码(可自己去百度搜索,本站也有)
.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}
.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;opacity: .2}
1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。
2.网上很多以上封装的教程都没有加上form事件,所以这个教程主要是解决博客的搜索和评论问题。
3.开源Pjax使用这个:https://github.com/defunkt/jquery-pjax
最新文章
- Python学习笔记3-字符串
- [转]java selenium webdriver实战 应用小结
- Coreseek + Sphinx + Mysql + PHP构建中文检索引擎
- CentOs图形界面的开启与关闭
- windows下调用外部exe程序 SHELLEXECUTEINFO
- WCF 入门 (16)
- android ImageView的属性android:scaleType,即ImageView.setScaleType(ImageView.ScaleType)
- I&#39;m back
- Andoird开发手机壁纸
- java开发3轮技术面+hr面 面经(MT)
- Java-反射机制学习
- [HTTP] tcp/ip详解 链路层 网络层 传输层 应用层
- vue 限制输入字符长度
- springboot 热部署
- [Day9]面向对象
- 通过DOS界面查看电脑上端口使用情况
- node.js中的框架
- JAVAWEB 一一 SpringMVC(注解)
- js 社会主义点击事件
- Java -- 异常的捕获及处理 -- 自定义异常类
热门文章
- PatentTips - Invalidating TLB entries in a virtual machine system
- java 执行可执行文件时提示“could not find or load main class ”的问题
- mybatis+mysql返回插入的主键,参数只是提供部分参数
- Eclipse ADT 导入别的电脑开发的项目
- HDU1698 Just a Hook 【线段树】+【成段更新】+【lazy标记】
- zoj 1648 Circuit Board
- cannot find -l****问题的解决的方法
- android 细节之 menu 之 invalidateOptionsMenu
- jQery总结01
- Android updater-scripts(Edify Script)各函数详细说明【转】