标签:embed 标记 百度网盘 ini java reference view type 碎片
想要更详细了解pjax,需要查看官网
或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译)
效果看本站,音乐无刷新播放,代码高亮和复制js加载成功~
编辑模板 header.php 的 head 添加必要文件:
jquery-1.11.1.min.js:百度网盘下载
jquery.pjax-1.8.2.min.js:百度网盘下载
下载到模板的 scripts 目录下后将下面两句添加到</head>所有script标签的最前面:
<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>scripts/jquery.pjax-1.8.2.min.js"></script>
注意:jQuery需要1.7.0版本以上的才有pushState的封装
编辑模版 footer.php 在/body标记结束前插入:
< script type="text/javascript"> $(document).pjax(‘a[target!=_blank]‘, ‘#contentleft‘, {fragment: ‘#contentleft‘,timeout: 8000}); < /script>
参数解释:
a[target!=_blank]:绑定本页面非新窗口打开的所有链接
#contentleft:链接点击之后,仅仅更新#contentleft容器的内容,页面其他内容不变,需自行修改这个参数
fragment:‘#contentleft‘:#contentleft选择器的碎片从Ajax响应提取
timeout:8000:Ajax超时时间为8秒,如果未响应则直接刷新网页
注意:这个 #contentleft 怎么找呢?
小指的方法是打开模板的 echo_log.php,找到包裹文章页面的 div 的 id 就是了,一般是第一第二个
id 名字都是 contentleft,content或者main之类的,按照这个方法一般都可以了,如果不行回我吧~
编辑模板 footer.php 在/body标记前插入下面代码
<div class="qingzz_pjax_loading"> <div class="qingzz_pjax_spinner"> <div class="qingzz_pjax_rect1"></div> <div class="qingzz_pjax_rect2"></div> <div class="qingzz_pjax_rect3"></div> <div class="qingzz_pjax_rect4"></div> <div class="qingzz_pjax_rect5"></div> </div> </div> <script> $(document).on(‘pjax:send‘, function() { //pjax链接点击后显示加载动画; $(".qingzz_pjax_loading").css("display", "block"); }); $(document).on(‘pjax:complete‘, function() { //pjax链接加载完成后隐藏加载动画; $(".qingzz_pjax_loading").css("display", "none"); }); </script>
没有用音乐插件的需要在模板css文件末尾添加css:
.qingzz_pjax_loading { height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background-color: rgba(90,90,90,.5); display: none; } .qingzz_pjax_spinner { margin: 300px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } .qingzz_pjax_spinner > div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .qingzz_pjax_spinner .qingzz_pjax_rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .qingzz_pjax_spinner .qingzz_pjax_rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .qingzz_pjax_spinner .qingzz_pjax_rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .qingzz_pjax_spinner .qingzz_pjax_rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }
刷新一下,挺酷的吧~
编辑模板的 footer.php,在/body标签前添加下面这段代码:
<script> $(document).on(‘submit‘, ‘form‘, function(event) {// 解决提交失效问题 $.pjax.submit(event, ‘#contentleft‘, {fragment: ‘#contentleft‘,timeout: 8000}); }); $(document).on(‘pjax:complete‘, function() { pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数 }); function pajx_loadDuodsuo(){ var dus=$(".ds-thread"); if($(dus).length==1){ var el = document.createElement(‘div‘); el.setAttribute(‘data-thread-key‘,$(dus).attr("data-thread-key"));//必选参数 el.setAttribute(‘data-url‘,$(dus).attr("data-url")); DUOSHUO.EmbedThread(el); $(dus).html(el); } } </script>
里面的#contentleft一样需要改成前面的容器id哦~
<div class="qingzz_pjax_loading"> <div class="qingzz_pjax_spinner"> <div class="qingzz_pjax_rect1"></div> <div class="qingzz_pjax_rect2"></div> <div class="qingzz_pjax_rect3"></div> <div class="qingzz_pjax_rect4"></div> <div class="qingzz_pjax_rect5"></div> </div> </div> <script> // 绑定链接和容器 $(document).pjax(‘a[target!=_blank]‘, ‘#contentleft‘, {fragment: ‘#contentleft‘,timeout: 8000}); $(document).on(‘submit‘, ‘form‘, function(event) {// 解决提交失效问题 $.pjax.submit(event, ‘#contentleft‘, {fragment: ‘#contentleft‘,timeout: 8000}); }); $(document).on(‘pjax:send‘, function() { //pjax链接点击后显示加载动画; $(".qingzz_pjax_loading").css("display", "block"); }); $(document).on(‘pjax:complete‘, function() { //pjax链接加载完成后隐藏加载动画; $(".qingzz_pjax_loading").css("display", "none"); pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数 }); function pajx_loadDuodsuo(){ var dus=$(".ds-thread"); if($(dus).length==1){ var el = document.createElement(‘div‘); el.setAttribute(‘data-thread-key‘,$(dus).attr("data-thread-key"));//必选参数 el.setAttribute(‘data-url‘,$(dus).attr("data-url")); DUOSHUO.EmbedThread(el); $(dus).html(el); } } </script>
问题:pjax之后多说评论框不加载,ajax评论不能提交等等问题。
问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。
解决方法一:利用pjax的加载完成回调函数,重新绑定事件。
解决方法二:将javascript添加到 echo_log.php 的容器,一般加到容器末尾,即/div标签上面。
更准确的方法查看本站文章:
原理是容器里面的内容是会刷新重新加载的,所以把javascript放在这里会重新加载~
这里只列出常用的,其他具体的自行摸索添加吧~
最好放到容器末尾/div前面哦~
<script src="<?php echo BLOG_URL; ?>admin/editor/plugins/code/prettify.js" data-no-instant></script> <script>prettyPrint();</script>
好啦,完美解决了吧,哈哈哈^_^
emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
标签:embed 标记 百度网盘 ini java reference view type 碎片
原文地址:http://www.cnblogs.com/telwanggs/p/7136743.html