Ajaxloader plugin for jquery.
* Copyright (c) 2010 Blokhin Yuriy (ds@inbox.ru)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
Example 1 code:
Button1 - $('#localframe').ajaxloader('page1.html');
Button2 - $('#localframe').ajaxloader('page2.html');
Button3 - $('#localframe').ajaxloader('load',{load:'page3.html', fadespeed: 'slow', loadcallback: function(){
$('#localframestatus').html('load-page3 loadcallback');
},
readycallback: function(){
$('#localframestatus').html('load-page3 readycallback');
}
}});
Easy using for show preload image.
Link javascript and stylesheet file:
<link href="ajaxloader/ajaxloader.css" type="text/css" rel="stylesheet" />
<script src="jquery.ajaxloader.js" type="text/javascript"></script>
$('#some-content').ajaxloader()
If you need other preload image, you can generated on site http://preloaders.net or others.Parameters:
.ajaxloader(mode, options);
mode:
'show' - show preload image
or
'hide','enable' - hide preload image(enable content)
or
'disable' - disable content
'load' - load content with fade by default
or
'link to page' - load page in content with fade by default (.ajaxloader('page.html');)
options:
'tata-ajax-loader-img' - class of preload image ( .tata-ajax-loader-img { background-image: url('ajax-loader.gif');} )
or
options = {
class : 'tata-ajax-loader-img', - class of preload image
fade: false, - fade enable
fadespeed: 'fast' -fade speed
fadecallback: function(){} -callback function for load
load: null - load with fade inout
loadcallback: null - callback function (load complete)
opacity: 80 - opacity front preloadimage
}
<script type="text/javascript">
$(function(){
$('#some-button').click(function(){
$('#some-content').ajaxloader();
$.load('load.html');
});
$('#show-button').click(function(){
$('#some-content').ajaxloader();
});
$('#show-other-button').click(function(){
$('#some-content').ajaxloader('show','tata-ajax-loader-img2');
});
$('#hide-button').click(function(){
$('#some-content').ajaxloader('hide');
});
$('#disable-button').click(function(){
$('#some-content').ajaxloader('disable');
});
$('#show-button-fade').click(function(){
$('#some-content').ajaxloader('show',{fade:true, fadespeed: 'fast'});
});
$('#hide-button-fade').click(function(){
$('#some-content').ajaxloader('hide',{fade:true, fadespeed: 'fast'});
});
$('#some-button-fade').click(function(){
$('#some-content').ajaxloader('show',{
fade:true,
fadespeed: 'slow',
fadecallback: function(){
$('#some-content').load('load.html');
}
}
);
});
});
</script>
<button id='show-button'>Show preload images</button>
<button id='hide-button'>Hide preload images</button>
<button id='some-button'>Load content</button>
<button id='disable-button'>Disable</button>
<button id='show-button-fade'>Show with fade preload images</button>
<button id='hide-button-fade'>Hide with fade preload images</button>
<button id='some-button-fade'>Load content with fade</button>
<div id='some-content'>
This place some content for reloading<br/>
Ajaxloader can work with any tag: p,div e.t.c
All content disabled if show preload images
<button>Button for test</button>
</div>
1.4 Add option in parameters
1.4 Add minimized file to pack
1.4 Rename class to imageclass parameters
1.4 Fix opacity problem in IE6+
1.4.1 Add simple `disable` without animation
1.4.2 Add option for callback fadein/out function
1.4.2 Add simple example with fade use
1.4.2 Add simple example with fade in out loading content
1.5.0 Add options 'load'
1.5.1 Add event 'readycallback' - call after load (simulate document ready for loaded page)
1.5.1 Add event 'loadcallback'
1.5.1 Tested on IE 9.0.8112.16421 (jQuery 1.7.1)