KiraLT/Bjax

Ajax link system for modern website. Convert any link in your page to ajax link.

Welcome to Bjax 1.0.2

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

Features

• Converts any link to ajax link.
• Loads whole page with ajax.
• Loads part of page with ajax.

Requirements

• jQuery.
• HTML5 browser.

Usage

Download manually

Download the latest version: https://github.com/KiraLT/Bjax/releases

Download using Bower

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'
});

Settings

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

HTML attributes

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>

API Bjax

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>

Bjax 2.0.0 (coming soon)

Links

new Bjax($('#my_a'), {
  'target': '#content',
  'element': '#content',
  'loader': 'default'
});

Forms

new Bjax($('#my_form'), {
  'target': '#content',
  'element': '#content',
  'method': 'post',
  'loader': 'default'
});

Events

var bjax = new Bjax($('#my_a'));
bjax.on('loader:start', function() {
    $('body').addClass('dim')
}).on('loader:end', function() {
    $('body').removeClass('dim')
});

Custom rendering

new Bjax($('#my_a'), {
  'target': '#content',
  'element': '#content'
}).on('render', function(content) {
    return '<b>' + content + '</b>';
})

Custom loaders

Bjax.registerLoader('modern', MyModernLoader);

More customization

Custom builds

• jQuery
• zepto.js
• vanillaJS