jQuery plugin untuk bikin spoiler

[anvie]

Plugin jQuery buat bikin spoiler secara instan:


$.fn.anvie_spoiler = function()
{
return this.each(function(){

var $selfObj = $(this).hide();
var btnShow = $('<div class="anvie-spoiler-toggle">Show: <b>' + $selfObj.attr('alt') + '</b></div>');

btnShow
.click(function(){
$(this).next().slideToggle()
/*lazy load any image inside*/
.find('img').each(function(){
var imgSrc = $(this).attr('title');

$(this).attr({'src':imgSrc}).parent().css({'backgr ound':'none'});
});
})
.insertBefore($selfObj);

$selfObj
.css({'margin-top':'-1px','zIndex':'-1'})
.find('img').each(function(){
var oldSrc = $(this).attr('src'); /*hapus src buat efek lazy load*/

$(this).attr({'src':'#','title':oldSrc})
.wrap('<div class="anvie-spoiler-img" style="width: 100%;"></div>').parent()
.css({'background':'url(/img/etc/loadingAnimation.gif) no-repeat center'})
.prepend('<br />');
});
});
}



cara pake:


buat element div:
contoh:
<div id="myspoiler">Huge Data and image</div>

terus pada js-nya apply-kan:

$('#myspoiler').anvie_spoiler();




dan ini untuk css nya:

.anvie-spoiler {
background: #E2E4E7;
border: 1px solid #C0C0C0;
padding: 1px;
}
.anvie-spoiler-toggle {
background-color: #CACACA;
text-align: center;
border: 1px solid #A0A0A0;
cursor: pointer;
}
.anvie-spoiler-toggle:hover {
background-color: #FCFACA;
}

[M2R]

Nie source code bwt spoiler d forum2 itu?