diff --git a/README.md b/README.md index 92d13b2..36b3408 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,103 @@ # Welcome to Bjax 1.0.0 -## About - Ajax link system for modern website. Convert any link in your page to ajax link. -## Usage +## Features -``` -$('[selector]').bjax(options); -``` +* Converts any link to ajax link. +* Loads whole page with ajax. +* Loads part of page with ajax. -### Binding +## Usage -#### Bind every link +Download the latest version: https://github.com/KiraLT/Bjax/releases -*JavaScript* +Link to the JS file: -``` -$('a').bjax(); +```html + ``` -*HTML* +Add the CSS file (or append contents to your own stylesheet): +```html + ``` -Page -``` - -#### Bind by data-bjax attribute -*JavaScript* +To initialize: -``` +```javascript +// default $('[data-bjax]').bjax(); + +// or with custom settings +$('[data-bjax]').bjax({ + replace: true +}); ``` -*HTML* +## Settings -``` -Page -``` +Key | Default | Values | Description +--- | --- | --- | --- +url_attribute | data-href or href | String | URL attribute +url | undefined | String | custom url +replace_attribute | data-replace | String | Replace attribute +replace | true | Boolean | Change page URL after bjax load +element_attribute | data-el | String | Element attribute +element | html | String | Element to load +target_attribute | data-target | String | Target attribute +target | html | String | Load target -#### Use cases +## API `Bjax` -### Load whole new page +You can instantiate the Bjax also through a classic way: -``` -Page -``` +```javascript +// Collect settings from element +new Bjax($('[data-bjax'])); -### Load a part of page +// Set settings manually +new Bjax({ + 'target': '#target', + 'element': '#element', + 'url': '/page' +}); -``` -Page +// Mixed +new Bjax($('[data-bjax']), { + 'target': '#target', + 'element': '#element' +}); ``` -### Load a part of page without changing current url +Bind bjax manually: +```javascript +$('[data-bjax]').on('click', function(e){ + new Bjax(this); + e.preventDefault(); +}); + +// Live bind +$(document).on('click', '[data-bjax]', function(e){ + new Bjax(this); + e.preventDefault(); +}); ``` -Page + +## Events + +Events are fired on the bjax element. You can bind events like this: + +```javascript +$(document).on('bjax_load', function () { + // Do something +}); ``` -### Options - -Option | Default | Description ---- | --- | --- -url_attribute | data-href or href | URL attribute -url | undefined | custom url -replace_attribute | data-replace | Replace attribute -replace | true | Change page URL after bjax load -element_attribute | data-el | Element attribute -element | html | Element to load -target_attribute | data-target | Target attribute -target | html | Load target +### Available events + +| Key | Description | +| --- | --- | +| bjax_load | Fired when the bjax finishes loading |