Front-end könyvtár: JS oldal betöltési haladó sávja

Kis szemét · Közzétéve 2016. 01. 18. 11:02:55

Nézzük meg először a rendereléseket:

Könnyen használható:

1. lépés: Másold be a sablonmappát, a témák mappát, pace.js pace.min.js a projektbe

2. lépés: CSS stílusok és JS szkriptek bevezetése

<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>

Kód másolása

3. lépés: Nyisd meg az oldalt, és kész

Egyedi konfiguráció

Pace.js automatikusan betöltődik az oldalra, nincs szükség kódra kötni, és a haladást automatikusan észlelik. Ha módosítani szeretnél, beállíthatod a window.paceOptions beállítást a konfiguráció testreszabásához:

<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>

Kód másolása

Egyedi beállításokat is betehetsz a scrip{filter}t címkébe, például:

<scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>

Kód másolása

Ha AMD-t vagy Browserify-t használsz a modulok betöltésére, így állíthatod be (pl. start):

<div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>

Kód másolása

Használd az API-t

Nyilvánosan Pace.js API-k listája:

Pace.start: Elkezdi megjeleníteni a haladó sávot, ha nem AMD-t vagy Browserify-t használsz modulok betöltésére, akkor ez alapértelmezés szerint fut.
Pace.restart: A haladó sáv újratöltődik és megjelenik.
Pace.stop: elrejti a haladási sávot és megállítja a betöltést.
Pace.track: Egy vagy több kérési feladat figyelése.
Pace.ignore: Hagyd figyelmen kívül egy vagy több feladatkérést.

Fájlletöltés:

pace-0.5.6.zip (153.26 KB, Letöltések száma: 2)

[JavaScript] Front-end könyvtár: JS oldal betöltési haladó sávja

Kapcsolódó bejegyzések