Sha256: 581f9b144b16d01f893c83139c91a5c987c2eba7d6cd2211ccd61cf34a9a445e
Contents?: true
Size: 1.8 KB
Versions: 7
Compression:
Stored size: 1.8 KB
Contents
<p>
The image below should have a pink 4px border around it.
</p>
<img border="0" alt="MooTools" src="/asset/more/mootools.png" title="MooTools" rel="The best damn JS framework on Earth." id="moologo"/>
<hr />
<p>
A MooTools logo should load in the box below.
</p>
<div id="imgtest" style="background: #999; padding: 10px; margin: 8px;"></div>
<hr />
<p>
Three MooTools images should load in the box below.
</p>
<style>
#imgtest2 img {
background: #999;
padding: 10px;
margin: 8px;
}
#msg li {
margin-left: 20px;
list-style: disc;
}
</style>
<div id="imgtest2"></div>
<hr />
<p>
You should see confirmation that some JS loaded in the box below, as well as confirmation that the onload event fired successfully.
</p>
<ul id="msg"></ul>
<script src="/depender/build?require=More/Assets"></script>
<script>
Asset.css('/asset/more/Assets.css.test.css');
Asset.image('/asset/more/mootools.png', {
onLoad: function(){
this.inject('imgtest');
}
});
var images = [
'/asset/more/mootools.png',
'/asset/more/mootools.png',
'/asset/more/mootools.png'
];
var imgs = Asset.images(images, {
onComplete: function(){
imgs.inject('imgtest2');
},
onProgress: function(counter, index, source){
$('msg').adopt(new Element('li', {text: 'Image ' + counter + '/'+ images.length + ' with index #' + index + ': ' + source + ' is loaded successfully!'}));
},
onError: function(counter, index, source){
$('msg').adopt(new Element('li', {text: 'Image ' + counter + '/'+ images.length + ' with index #' + index + ': ' + source + ' is errored!'}));
}
});
$('msg').adopt(new Element('li', {text: 'testing onload event...'}));
Asset.javascript('/asset/more/Assets.js.test.js', {
onLoad: function(){
$('msg').adopt(new Element('li', {text: 'JavaScript onLoad fired successfully!'}));
}
});
</script>
Version data entries
7 entries across 7 versions & 1 rubygems