Update README.md

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
+<script src="bjax.min.js" type="text/javascript"></script>
 ```
 
-*HTML*
+Add the CSS file (or append contents to your own stylesheet):
 
+```html
+<link href="bjax.min.css" rel="stylesheet" type="text/css" />
 ```
-<a href="/page">Page</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
 
-```
-<a href="/page" data-bjax>Page</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:
 
-```
-<a href="/page" data-bjax>Page</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'
+});
 
-```
-<a href="/page" data-target="#content_target" data-element="#content_element">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();
+});
 ```
-<a href="/page" data-target="#content_target" data-element="#content_element" data-replace="false">Page</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 |