Przyjrzyjmy się najpierw wizualizacjom:
Łatwość obsługi:
Krok 1: Skopiuj folder szablonów, folder motywów pace.js pace.min.js do projektu
Krok 2: Wprowadź style CSS i skrypty 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>
Krok 3: Otwórz stronę i gotowe
Konfiguracja niestandardowa
Pace.js zostanie automatycznie załadowane na stronę, nie trzeba podłączać się do żadnego kodu, a postęp będzie automatycznie wykrywany. Jeśli chcesz wprowadzić pewne zmiany, możesz ustawić window.paceOptions, aby dostosować konfigurację:
- <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>
Możesz też dodać własne ustawienia w tagu scrip{filter}t, na przykład:
- <scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>
Jeśli używasz AMD lub Browserify do ładowania modułów, możesz skonfigurować to tak (np. start):
- <div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>
Korzystaj z API
Lista API Pace.js publiczne:
Pace.start: Zaczyna wyświetlać pasek postępu, jeśli nie używasz AMD lub Browserify do ładowania modułów, zostanie on domyślnie wykonany.
Pace.restart: Pasek postępu ładuje się i wyświetla.
Pace.stop: ukrywa pasek postępu i zatrzymuje ładowanie.
Pace.track: Monitoruj jedno lub więcej zadań z żądaniem.
Pace.ignore: Ignoruj jedno lub więcej zadań z prośbą.
Pobranie pliku:
pace-0.5.6.zip
(153.26 KB, Liczba pobranych plików: 2)
|
Opublikowano 18.01.2016 11:02:55
|
|
|
|
