iLoveElysia/pjax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Edit README to assign the Pjax instance to a variable

Browse Source
This commit is contained in:
Behind The Math
2018-03-15 16:38:03 -04:00
parent 2166866967
commit a2982cfcba
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -99,7 +99,7 @@ So we want to update `[".my-Header", ".my-Content", ".my-Sidebar"]`, **without r
We do this by telling Pjax to listen on `a` tags and use CSS selectors defined above (without forgetting minimal meta): We do this by telling Pjax to listen on `a` tags and use CSS selectors defined above (without forgetting minimal meta):
``` javascript ``` javascript
new Pjax({ selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"] }) var pjax = new Pjax({ selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"] })
``` ```
Now, when someone in a Pjax-compatible browser clicks "blah", the content of all selectors will be replaced with the one found in the "blah" content. Now, when someone in a Pjax-compatible browser clicks "blah", the content of all selectors will be replaced with the one found in the "blah" content.
@@ -133,7 +133,7 @@ Let's talk more about the most basic way to get started.
When instantiating `Pjax`, you can pass options in to the constructor as an object: When instantiating `Pjax`, you can pass options in to the constructor as an object:
```js ```js
new Pjax({ var pjax = new Pjax({
elements: "a", // default is "a[href], form[action]" elements: "a", // default is "a[href], form[action]"
selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"] selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"]
}) })
@@ -149,7 +149,7 @@ In that case, you can do two different things:
```js ```js
// use case 1 // use case 1
new Pjax({ elements: "a.js-Pjax" }) var pjax = new Pjax({ elements: "a.js-Pjax" })
// use case 2 // use case 2
@@ -157,7 +157,7 @@ Pjax.prototype.getElements = function() {
return document.getElementsByClassName(".js-Pjax") return document.getElementsByClassName(".js-Pjax")
} }
new Pjax() var pjax = new Pjax()
``` ```
#### `loadUrl(href, [options])` #### `loadUrl(href, [options])`
@@ -241,7 +241,7 @@ Keys should be one of the defined selectors.
Examples: Examples:
```js ```js
new Pjax({ var pjax = new Pjax({
selectors: ["title", ".Navbar", ".js-Pjax"], selectors: ["title", ".Navbar", ".js-Pjax"],
switches: { switches: {
// "title": Pjax.switches.outerHTML // default behavior // "title": Pjax.switches.outerHTML // default behavior
@@ -287,7 +287,7 @@ This is very convenient when you use something like [Animate.css](https://github
with or without [WOW.js](https://github.com/matthieua/WOW). with or without [WOW.js](https://github.com/matthieua/WOW).
```js ```js
new Pjax({ var pjax = new Pjax({
selectors: ["title", ".js-Pjax"], selectors: ["title", ".js-Pjax"],
switches: { switches: {
".js-Pjax": Pjax.switches.sideBySide ".js-Pjax": Pjax.switches.sideBySide
@@ -503,7 +503,7 @@ function whenDOMReady() {
whenDOMReady() whenDOMReady()
new Pjax() var pjax = new Pjax()
document.addEventListener("pjax:success", whenDOMReady) document.addEventListener("pjax:success", whenDOMReady)
``` ```
@@ -526,7 +526,7 @@ function whenContainerReady() {
} }
whenContainerReady() whenContainerReady()
new Pjax() var pjax = new Pjax()
document.addEventListener("pjax:success", whenContainerReady) document.addEventListener("pjax:success", whenContainerReady)
``` ```