Jika hanya menggunakan jQuery-1.3.2.js maka "Spoiler" atau "Show/Hide DIV" hanya mempunyai efek tertentu. Agar beberapa efek lain bisa digunakan kita perlu tambahkan jQuery UI. Script ini juga tidak terlalu banyak, bahkan jika anda ingin membuatnya lebih ringan bisa gunakan compress javascript (UI.min.js). Berbagai efek baru yang dapat digunakan setelah kita gunakan jQuery UI adalah: linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce dan easeInOutBounce.
D E M O
Demo ini menggunakan salah satu efek yang tersedia dalam jQuery UI (
easeOutBounce). Anda dapat mengganti dengan efek yang lain seperti yang terlihat dalam daftar efek di atas.
Title Here
Tuliskan teks, kode html image, widget atau kode html lainnya di antara tag <div class="GRshuibox"> dan tag penutupnya (</div>)
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.GRuishowhideDIV = function (a) {
a = jQuery.extend({
speed: 1200,
easing: "easeOutBounce"
}, a);
caller = this;
if ($(caller).css("display") == "none") {
$(caller).animate({
opacity: 1,
height: "toggle"
}, a.speed, a.easing)
} else {
$(caller).animate({
opacity: 0,
height: "toggle"
}, a.speed, a.easing)
}
};
$(document).ready(function () {
$(".GRshcontroll").click(function () {
$(this).next().GRuishowhideDIV();
return false
})
});
//]]>
</script>Kode CSS:
.GRshowhideui{
border:1px solid #666;
background: rgb(28,28,28);
backgrund:linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
background:-o-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
background:-moz-linear-gradient(top, rgb(28,28,28) 0%, rgb(73,73,73) 17%, rgb(48,48,48) 62%, rgb(19,19,19) 100%);
background:-webkit-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
background:-ms-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#131313',GradientType=0 );
padding:2px;
margin:20px auto;
width:400px;
}
.GRshowhideui a.GRshcontroll{
color:#eee;
display:block;
padding:0;
text-align:center;
margin:0 auto;
font-size:16px;
font-family:Serif;
padding:4px 10px;
border:1px solid #888;
margin:0;
}
.GRshowhideui a.GRshcontroll:hover{color:#F00;}
.GRshowhideui a.GRshcontroll:active{outline:none;}
.GRshowhideui .GRshuibox{
display:none;
padding:10px 15px;
border:1px solid #888;
text-align:left;
line-height:18px;
font-size:12px;
color:#eee; /* code by: gubhugreyot */
text-shadow:1px 1px 1px #000;
}xHTML:
<div class="GRshowhideui">
<a href="#" class="GRshcontroll">Title Here<br /><img src="http://gubhugreyotprojects.googlecode.com/svn/gubhugreyot_Show-HideH115V34.jpg" width="115" height="36" style="margin:2px auto;" /></a><div class="GRshuibox">
Tuliskan teks, kode html image, widget atau kode html lainnya di antara tag <div class="GRshuibox"> dan tag penutupnya (</div>). <br /><br /><div align="center">
<a href="http://jQueryprojects.blogdetik.com/" title="Teks title"><img height="221" width="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-P3bTiY3i80meiKK1LjPVJ08czzNLDC5ma2odvAswMWEFLPrKWhYrMfr7nh9Z1tHX-6vQeV3xsEna8XxrPfmuesG0wpKH6vVE7r5sufXdXxT40HlefRcoK8OWss_TcRgAYDU80fup0edF/s320/gubhugreyot-my-profile.jpg" /></a></div>
</div>
</div>
- Simpan javascript di bawah kode <head>
- Simpan kode css di atas kode ]]></b:skin>
- Gunakan xHTML di box posting atau Add a Gadget | HTML/Javascript atau bagian yang lain dari blog di antara tag pembuka body (<body>) dan penutupnya (</body>).
- Anda bisa mengganti lebar show/hide DIV dengan merubah nilai width:400px; dengan nilai yang sesuai dengan lebar kolom yang tersedia.
Box ini akan menghilang setelah 50 detik, sesuai dengan hideafter yang disertakan senilai 50000 ( 50000 equivalen dengan 50 detik karena setiap 1000= 1 detik). Lama waktu bisa kamu ubah dengan merubah nilai hideafter. Semakin kecil nilainya maka box akan semakin cepat menghilang.
Anda bisa meletakkan teks, image atau yang lain disetiap tab. Ukuran image sebaiknya dibatasi agar tak terlalu memenuhi tab sekaligus juga tak membebani blog secara berlebiham. Ini adalah contoh menempatkan image (thumbnail) di bagian kiri (float:left). Anda bisa mengatur senidri diposisi yang dikehendaki melalui floating position.
