Nprogress.js为wordpress添加页面进度条(防jQuery冲突版)

          阅读(128)

    Nprogress.js为wordpress添加页面进度条(防jQuery冲突版)

    Nprogress.js为wordpress添加页面进度条(防jQuery冲突版)

    之前一直用的是页面左下角进度圈,今天突发奇想把它替换成了页面上方进度条。度娘上有许多类似的教程,不过那些都是基于jQuery和css的,这里我们用的是Nprogress.js。(这么说有点不确切,因为Nprogress.js本质也是jquery+css)Nprogress.js的特点是流畅,不像其他进度条那样感觉一卡一卡的,还有就是它有许多自定义参数,等下会讲到。

    这个教程是从兆兆的一个朋友那儿“借”来的。不过折腾完后一刷新发现兆兆博客的好多特效崩溃了。好吧,条件反射想地到jQuery冲突了,老毛病啊。这些效果都是东搬西抄来的,充斥着各种jQuery版本,冲突了也难怪。稍微动下脑筋就解决了。

    原教程转自:流觞曲水·博客 ? ?| ? ?https://ls12.me/wordpress-nprogress.html

    代码配置

    1.下载所需的文件。可以访问官方网站或github获取。或者下载兆兆打包的,稍微改了颜色和宽度。

    2.将“nprogress.js”和“global.js”丢到wp的“主题/js/”目录下,将“nprogress.css”丢到wp的“主题s/css/”目录下。当然其他地方也没事,记得待会儿改下目录就好了。

    3.原教程是在“function.php”中调用前面三个文件的,页面一开始加载就调用了,那么就是先于其他jQuery加载,后面的jQuery特效就崩了。那么我们换下思路,把这三个文件丢到最后加载不就行了。所以……

    4.在主题的“footer.php”最后一个“/html”前添加下面代码引用前面三个文件。(注意改下链接)

    <link rel="stylesheet" type="text/css" href="http://blog.izhaoo.com/wp-content/themes/forget/css/nprogress.css" />
    <script src="http://blog.izhaoo.com/wp-content/themes/forget/js/nprogress.js"></script>
    <script src="http://blog.izhaoo.com/wp-content/themes/forget/js/global.js"></script>

    5.酱紫就可以避免jQuery冲突了。但是啊,不得不说。原代码把他放到“funtion.php”中是有学问的。像我这样丢最后,只能等到页面加载完成才显示效果,而且就一闪而过,根本不会和页面加载速度同步。这样就有违初衷了呢。不过兆兆只追求“特效”,反正页面加载挺快的,也看不太出。如果你非得较真儿~那兆兆提供个思路,在Nprogress.js或其他jQuery.js中添加防冲突代码即可。这东西度娘也很多,稍稍动动脑子修改下吧~

    参数配置

    在“global.js”中可以配置各种参数,自定义你的进度条效果,让它更美观~

    global.js

    1.通过 minimum 来修改最小百分比:

    NProgress.configure({ minimum: 0.1 });

    2.通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role=’bar’ 属性的元素。

    NProgress.configure({
    template: "..."
    });

    3.通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。

    NProgress.configure({ ease: 'ease', speed: 500 });

    4.想关闭进度条步进?设置 trickle 为 false。

    NProgress.configure({ trickle: false });

    5.通过调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms)。

    NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

    6.想禁用进度环?设置 showSpinner 为 false。

    NProgress.configure({ showSpinner: false });

     

    2017-01-24 15:27:44


    喜欢 0



还没有人抢沙发呢~

加载中……