ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery で NProgress.js 読み込み進行状況プラグインを使用する方法

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

亚连
リリース: 2018-06-08 17:32:02
オリジナル
1539 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート