jQuery で NProgress.js 読み込み進行状況プラグインを使用する方法

NProgress は jquery に基づいており、バージョンは >1.8 である必要があります 。この記事では主に NProgress.js 読み込み進行プラグインの簡単な使い方を紹介しますので、必要な方は参考にしてください

NProgress.js

注:

NProgress は jquery に基づいており、バージョンは > である必要があります。 1.8

ダウンロードアドレス: https://github.com/rstacruz/nprogress

API:

NProgress.start() — 启动进度条
　　　　NProgress.set(0.4) — 将进度设置到具体的百分比位置
　　　　NProgress.inc() — 少量增加进度
　　　　NProgress.done() — 将进度条标为完成状态

使用手順:

1.

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要之前引入进来

の導入 2. 使用シナリオ 1: ページ読み込みの効果 ページ読み込みの開始 進行状況bar ページが読み込まれます 終了プログレスバー:

<em id="__mceDel"><script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
   　　NProgress.done();
 });
</script>
</em>

3. 使用シナリオ 2: ajax 送信の効果 開始プログレスバーの送信を開始します 成功後 終了プログレスバー:

<script>
$(window).ajaxStart(function () {
  NProgress.start();
});
$(window).ajaxStop(function () {
  NProgress.done();
});
</script>
//技巧总结  此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/

上記は私が皆さんのためにまとめたものです。将来的には誰にとっても役立ちます。

関連記事:

nodejs+express環境で複数人チャットルームを構築する方法

vue-adminとバックエンド(flask)の分離と組み合わせの詳細な解釈

pandaの実装方法jquery+css3ナビゲーションを使用したテレビ

以上がjQuery で NProgress.js 読み込み進行状況プラグインを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。