Let's take a look at the renderings first:
Easy to use:
Step 1: Copy the templates folder, themes folder, pace.js, pace.min.js into the project
Step 2: Introduce CSS styles and JS scripts
- <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>
Step 3: Open the page and you're done
Custom configuration
Pace.js will be automatically loaded into the page, no need to hook to any code, and the progress will be automatically detected. If you want to make some adjustments, you can set window.paceOptions to customize the 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>
You can also put custom settings in the scrip{filter}t tag, for example:
- <scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>
If you use AMD or Browserify to load modules, you can set it up like this (e.g. start):
- <div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>
Use the API
List of APIs Pace.js public:
Pace.start: Starts showing the progress bar, if you are not using AMD or Browserify to load modules, this will be executed by default.
Pace.restart: The progress bar reloads and displays.
Pace.stop: hides the progress bar and stops loading.
Pace.track: Monitor one or more request tasks.
Pace.ignore: Ignore one or more request tasks.
File Download:
pace-0.5.6.zip
(153.26 KB, Number of downloads: 2)
|
Posted on 1/18/2016 11:02:55 AM
|
|
|
|
