https://github.com/willin/instantpjax
A jQuery Plugin for PJAX with instantclick.
https://github.com/willin/instantpjax
Last synced: about 1 year ago
JSON representation
A jQuery Plugin for PJAX with instantclick.
- Host: GitHub
- URL: https://github.com/willin/instantpjax
- Owner: willin
- License: mit
- Created: 2015-04-24T03:49:03.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-10-21T01:25:17.000Z (over 10 years ago)
- Last Synced: 2025-04-19T16:41:13.440Z (about 1 year ago)
- Language: JavaScript
- Size: 246 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# InstantPjax
Not for noob.
## Installation
```shell
bower install instantpjax
```
or download here:
[https://github.com/willin/InstantPjax/releases](https://github.com/willin/InstantPjax/releases)
or use directly:
[https://rawgit.com/willin/InstantPjax/dist/instantpjax.min.js](https://rawgit.com/willin/InstantPjax/dist/instantpjax.min.js)
## Usage
First of all, you need to require this js.
```html
```
### Ignore Elements
Use `data-no-ipjax` attribute like:
```html
Hello World
```
### 1. Basic
Use: `$.fn.ipjax`
```js
/*selector,container,config*/
$(document).ipjax('a','#main',{
timeout: 10000, //ms
cache: 3600*24*7, //s, 0 for disable cache
cacheIgnore: ['/','/news'], //paths that do not cache, default: false
storage: true, //false for disable localStorage
delay: 300, //ms, 0 for disable mouse over preloading
push: true, // true is push, false is replace, null for do nothing
titleSuffix: '',
show: '', // _default/fade or Animation Function(data, callback, isCached)
});
$(document).on('ipjax.start',function(){
//start animation here
// Example:
/*
$('#loading').show();
*/
});
$(document).on('ipjax.end',function(){
//end animation here
// Example:
/*
$('#loading').hide();
*/
});
$(document).on('ipjax.cached',function(){
//if cached animation here
// Example:
/*
$($.ipjax.options.element).addClass('cached');
$($.ipjax.options.element).one('mouseleave',function(){
$(this).removeClass('cached');
});
*/
});
```
### 2. Manual Request
See [jQuery.ajax/#jQuery-ajax-settings](http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings)
```js
$.ipjax({
url: '',
container: '#main',
timeout: 10000, //ms
cache: 3600*24*7, //s, 0 for disable cache
storage: true, //false for disable localStorage
delay: 300, //ms, 0 for disable mouse over preloading
push: true, // true is push, false is replace, null for do nothing
titleSuffix: '',
show: '', // _default/fade or Animation Function(data, callback, isCached)
type:'GET',
dataType: 'html',
data:{
ipjax: true
}
});
```
### 3. Advanced Custom Show Animation
Extends `$.ipjax.showFx`:
```js
$.extend($.ipjax.showFx,{
// Codes Here
// Example:
/*
animation:function(data, callback, isCached) {
this.html(data);
callback && callback.call(this, data, isCached);
}
*/
});
```
Then use like this:
```js
$(document).ipjax('a','#main',{
// Example:
show: 'animation'
});
```
### APIs
#### $.support.ipjax
Check `ipjax` plugin
#### $.support.storage
Check `localStorage`
## Compatibility
Use `json2.js` for JSON.parse with IE 6~8
See: [https://github.com/douglascrockford/JSON-js](https://github.com/douglascrockford/JSON-js) for details.
```html
```
## Tests
Tests (in the `tests` folder) are PHP-generated HTML pages with which to check how InstantClick behaves on different browsers. That’s what I use before releasing a new version to make sure there are no obvious regressions.
To access the suite of tests, run `php -S 127.0.0.1:8000` from the project’s root directory (**not** from the `tests` folder) and head to [http://127.0.0.1:8000/tests/](http://127.0.0.1:8000/tests/).