Jetons d’abord un coup d’œil aux rendus :
Facile à utiliser :
Étape 1 : Copiez le dossier modèles, le dossier thèmes, pace.js, pace.min.js dans le projet
Étape 2 : Introduire les styles CSS et les scripts JS
- <div><link href="/Content/pace/themes/pace-theme-center-atom.css" rel="stylesheet" /></div><div><scrip{过滤}t src="/Content/pace/pace.min.js"></scrip{过滤}t></div>
Étape 3 : Ouvrez la page et c’est fini
Configuration personnalisée
Pace.js sera automatiquement chargé dans la page, pas besoin de se connecter à un code, et la progression sera automatiquement détectée. Si vous souhaitez faire quelques ajustements, vous pouvez définir window.paceOptions pour personnaliser la configuration :
- <div> paceOptions = {</div><div> // Disable the 'elements' source</div><div> elements: false,</div><div> </div><div> // Only show the progress on regular and ajax-y page navigation,</div><div> // not every request</div><div> restartOnRequestAfter: false</div><div> }</div>
Vous pouvez aussi mettre des paramètres personnalisés dans la balise scrip{filter}t, par exemple :
- <scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>
Si vous utilisez AMD ou Browserify pour charger des modules, vous pouvez configurer cela ainsi (par exemple démarrer) :
- <div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>
Utilisez l’API
Liste des API Pace.js publiques :
Pace.start : Commence à afficher la barre de progression, si vous n’utilisez pas AMD ou Browserify pour charger des modules, cela sera exécuté par défaut.
Pace.restart : La barre de progression se recharge et s’affiche.
Pace.stop : masque la barre de progression et arrête le chargement.
Pace.track : Surveillez une ou plusieurs tâches de demande.
Pace.ignore : Ignore une ou plusieurs tâches de demande.
Téléchargement du fichier :
pace-0.5.6.zip
(153.26 KB, Nombre de téléchargements: 2)
|
Publié sur 18/01/2016 11:02:55
|
|
|
|
