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