https://github.com/kiralt/bjax
Ajax link system for modern website. Convert any link in your page to ajax link.
https://github.com/kiralt/bjax
ajax ajax-form ajax-library ajax-link jquery
Last synced: about 1 month ago
JSON representation
Ajax link system for modern website. Convert any link in your page to ajax link.
- Host: GitHub
- URL: https://github.com/kiralt/bjax
- Owner: KiraLT
- License: gpl-2.0
- Created: 2015-02-10T17:16:54.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-08-04T18:49:24.000Z (almost 5 years ago)
- Last Synced: 2025-03-18T03:58:28.470Z (about 2 months ago)
- Topics: ajax, ajax-form, ajax-library, ajax-link, jquery
- Language: HTML
- Homepage:
- Size: 734 KB
- Stars: 37
- Watchers: 3
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/KiraLT/Bjax/tree/v2)**
## 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:
```html
```
Add the CSS file (or append contents to your own stylesheet):
```html
```
To initialize:
```javascript
// 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:**
```html
```
`data-el`- jQuery selector
Load only specified element.
**Example HTML:**
```html
Load here
```
`data-replace`- boolean
Change URL after load dynamicaly.
**Example HTML:**
```html
Home
```
`data-url`- string
Custom load URL. Will be used instead of href attribute.
**Example HTML:**
```html
Home
```
## API `Bjax`
You can instantiate the Bjax also through a classic way:
```javascript
// 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:
```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();
});
```
Onclick attribute
```html
Link
```
# Bjax 2.0.0 (coming soon)
## Links
```js
new Bjax($('#my_a'), {
'target': '#content',
'element': '#content',
'loader': 'default'
});
```
## Forms
```js
new Bjax($('#my_form'), {
'target': '#content',
'element': '#content',
'method': 'post',
'loader': 'default'
});
```
## Events
```js
var bjax = new Bjax($('#my_a'));
bjax.on('loader:start', function() {
$('body').addClass('dim')
}).on('loader:end', function() {
$('body').removeClass('dim')
});
```
## Custom rendering
```js
new Bjax($('#my_a'), {
'target': '#content',
'element': '#content'
}).on('render', function(content) {
return '' + content + '';
})
```
## Custom loaders
```js
Bjax.registerLoader('modern', MyModernLoader);
```
*More customization*
## Custom builds
* jQuery
* zepto.js
* vanillaJS