Ajax command
Easely convert normal href links into ajax links.
Basic Usage (HTML)
data-jkit="[ajax:element=#mydivtoreplace]"
Advanced Init (JavaScript)
$('#myelement').jKit('ajax', { 'element': '#mydivtoreplace' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| animation | “fade”, “slide” or “none” | slide | The type of animation used for the transition |
| speed | Int or “fast”, “slow” (Milliseconds) | 250 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
| when | “load”, “viewport”, “shown” or “click” | click | When to load the external content |
| href | String | Optional url in case the url attribute of the element isn’t used | |
| src | String | Optional src in case the src attribute of the element isn’t used | |
| macro | Macro name | This optional macro will be applied to the element after the data is loaded |
Events
| Event | Description |
|---|---|
| complete | Triggered as soon as the content is loaded |
Examples
Ajax content:
Easely convert normal href links into ajax links:
Source:
<a href="../stuff/ajax_sample_content_1.html" data-jkit="[ajax:element=#ajaxdiv]">Link 1</a>, <a href="../stuff/ajax_sample_content_2.html" data-jkit="[ajax:element=#ajaxdiv]">Link 2</a> <div id="ajaxdiv"> Initial text ... </div>
DOM ready:
Load content into a div on page load (after the DOM is ready):
Source:
<div data-jkit="[ajax:when=load;href=../stuff/ajaxcontent1.html]"> <!-- load this stuff after the dom has loaded --> </div>
Lazy content:
Lazy load content into a div as soon as the element comes into the viewport:
Source:
<div data-jkit="[ajax:when=viewport;href=../stuff/ajaxcontent2.html]"> <!-- load this stuff after the div is inside the viewport --> </div>
Lazy image:
Lazy load an image:
Source:
<img src="../img/fb_logo_min.jpg" data-jkit="[ajax:when=viewport;src=../img/fb_logo_full.jpg]">
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]