Schauen wir uns zuerst die Renderings an:
Einfach zu bedienen:
Schritt 1: Kopiere den Template-Ordner, den Themes-Ordner, pace.js pace.min.js ins Projekt
Schritt 2: Führen Sie CSS-Stile und JS-Skripte ein
- <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>
Schritt 3: Öffne die Seite und du bist fertig
Benutzerdefinierte Konfiguration
Pace.js wird automatisch in die Seite geladen, es ist kein Code nötig, und der Fortschritt wird automatisch erkannt. Wenn Sie einige Anpassungen vornehmen möchten, können Sie window.paceOptions einstellen, um die Konfiguration anzupassen:
- <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>
Du kannst auch benutzerdefinierte Einstellungen im Tag scrip{filter}t einfügen, zum Beispiel:
- <scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>
Wenn du AMD oder Browserify verwendest, um Module zu laden, kannst du es so einrichten (z. B. Start):
- <div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>
Nutzen Sie die API
Liste der Pace.js öffentlichen APIs:
Pace.start: Zeigt die Fortschrittsleiste an; wenn du keine AMD oder Browserify zum Laden der Module benutzt, wird dies standardmäßig ausgeführt.
Pace.restart: Die Fortschrittsleiste lädt und wird angezeigt.
Pace.stop: Verbirgt die Fortschrittsleiste und das Laden hört auf.
Pace.track: Überwachen Sie eine oder mehrere Anfragen.
Pace.ignorieren: Ignoriere eine oder mehrere Anfrage-Aufgaben.
Dateidownload:
pace-0.5.6.zip
(153.26 KB, Anzahl der Downloads: 2)
|
Veröffentlicht am 18.01.2016 11:02:55
|
|
|
|
