Ajax link system for modern website. Convert any link in your page to ajax link.
Demo online: http://bjax.6te.net/demo/
V2 development in progress. VanilaJS, fast & lightweight with form support. Check it out
- Converts any link to ajax link.
- Loads whole page with ajax.
- Loads part of page with ajax.
- jQuery.
- HTML5 browser.
Download the latest version: https://github.com/KiraLT/Bjax/releases
bower install bjax
Link to the JS file:
<script src="bjax.min.js" type="text/javascript"></script>Add the CSS file (or append contents to your own stylesheet):
<link href="bjax.min.css" rel="stylesheet" type="text/css" />To initialize:
// bind on data-bjax attributes (recommended)
$('[data-bjax]').bjax();
// bind on each link
$('a').bjax();
// or with custom settings
$('[data-bjax]').bjax({
target: '#content',
element: '#content'
});| 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 |
data-target- jQuery selector
Load content to specified target.
Example HTML:
<div id="content">
<a href="content.html" data-target="#content" data-bjax>Load here</a>
</div>data-el- jQuery selector
Load only specified element.
Example HTML:
<a href="content.html" data-el="#content" data-bjax>Load here</a>data-replace- boolean
Change URL after load dynamicaly.
Example HTML:
<a href="home.html" data-replace="false" data-bjax>Home</a>data-url- string
Custom load URL. Will be used instead of href attribute.
Example HTML:
<button data-url="home.html" data-bjax>Home</button>You can instantiate the Bjax also through a classic way:
// Collect settings from element
new Bjax($('[data-bjax']));
// Set settings manually
new Bjax({
'target': '#target',
'element': '#element',
'url': '/page'
});
// Mixed
new Bjax($('[data-bjax']), {
'target': '#target',
'element': '#element'
});Bind bjax manually:
$('[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();
});Onclick attribute
<a href="content.html" onclick="new Bjax(this); return false;">Link</a>new Bjax($('#my_a'), {
'target': '#content',
'element': '#content',
'loader': 'default'
});new Bjax($('#my_form'), {
'target': '#content',
'element': '#content',
'method': 'post',
'loader': 'default'
});var bjax = new Bjax($('#my_a'));
bjax.on('loader:start', function() {
$('body').addClass('dim')
}).on('loader:end', function() {
$('body').removeClass('dim')
});new Bjax($('#my_a'), {
'target': '#content',
'element': '#content'
}).on('render', function(content) {
return '<b>' + content + '</b>';
})Bjax.registerLoader('modern', MyModernLoader);More customization
- jQuery
- zepto.js
- vanillaJS