Ας ρίξουμε μια ματιά πρώτα στις αποδόσεις:
Εύχρηστος:
Βήμα 1: Αντιγράψτε το φάκελο προτύπων, το φάκελο θεμάτων pace.js pace.min.js στο έργο
Βήμα 2: Εισαγάγετε στυλ CSS και σενάρια 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>
Αντιγραφή κώδικα
Βήμα 3: Ανοίξτε τη σελίδα και τελειώσατε
Προσαρμοσμένη διαμόρφωση
Pace.js θα φορτωθεί αυτόματα στη σελίδα, δεν χρειάζεται να συνδέσετε κανέναν κωδικό και η πρόοδος θα εντοπιστεί αυτόματα. Εάν θέλετε να κάνετε κάποιες προσαρμογές, μπορείτε να ορίσετε window.paceOptions για να προσαρμόσετε τη διαμόρφωση:
- <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>
Αντιγραφή κώδικα
Μπορείτε επίσης να βάλετε προσαρμοσμένες ρυθμίσεις στην ετικέτα scrip{filter}t, για παράδειγμα:
- <scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>
Αντιγραφή κώδικα
Εάν χρησιμοποιείτε AMD ή Browserify για τη φόρτωση μονάδων, μπορείτε να το ρυθμίσετε ως εξής (π.χ. έναρξη):
- <div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>
Αντιγραφή κώδικα
Χρησιμοποιήστε το API
Λίστα API Pace.js δημόσια:
Pace.start: Αρχίζει να εμφανίζει τη γραμμή προόδου, εάν δεν χρησιμοποιείτε AMD ή Browserify για τη φόρτωση μονάδων, αυτό θα εκτελεστεί από προεπιλογή. Pace.restart: Η γραμμή προόδου επαναφορτώνεται και εμφανίζεται. Pace.stop: αποκρύπτει τη γραμμή προόδου και σταματά τη φόρτωση. Pace.track: Παρακολούθηση μίας ή περισσότερων εργασιών αιτήματος. Pace.ignore: Παράβλεψη μίας ή περισσότερων εργασιών αίτησης.
Λήψη αρχείου:
pace-0.5.6.zip
(153.26 KB, Αριθμός λήψεων: 2)
|