Sabtu, 28 April 2012

jQuery Popbox not like usually Popup

Semakin susah ternyata mencari sumber artikel gaya punya. Apalagi konten yang dibicarakan mengenai tutorial blog, hampir sudah semua terberitakan halah :d Koben akan berbagi trick jquery plugin saja. This is story tell about jQuery PopBox!
Uniknya jQuery popbox terdapat pada hasil akhirnya. Kebanyakan trick yg bernamakan pop-pop itu seperti lightbox contoh. Konten utama akan ditimpa dengan lightbox effect secara full. Kalau si pop-box bergaya simple balloon.
Ini adalah yang dimaksudkan dengan simple balloon!!!

Mari kita bahas struktur pembangun jQuery PopBox.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.buka',
box : '.box',
arrow : '.arrow_'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow_']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()});
$(settings['open'], this).bind('click', methods.open);
});
}
}).call(this);
//]]>
</script>
Semoga tidak ada yg menjadi emot ;))

Kode CSS

.popbox {
position: relative;
}
.collapse {
position: relative;
}
.buka {}
.box {
display: none;
background: #fff;
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: 0px 0px 10px #555;
position: absolute;
padding: 5px;
z-index: 1;
}
.box img {
width: 100%;
height: 90%;
}
.arrow_:after, .arrow_:before {
bottom: 100%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
}
.arrow_:after {
border-bottom-color: #fff;
border-width: 10px;
left: 10%;
margin-left: -10px;
}
.arrow_:before {
border-bottom-color: #bbb;
border-width: 11px;
left: 10%;
margin-left: -11px;
}
Markup HTML atau cara penulisan.<div class='popbox'>
<a class='buka' href='#'>Your Title Here!</a>
<div class='collapse'>
<div class='box'>
<div class='arrow_'></div>

------------- ADD YOUR CONTENT HERE -------------

</div>
</div>
</div>
Setelah semua bumbu diatas masuk ke blog kalian, saatnya langkah terakhir yakni peletakan script pemanggil jQuery pop-box. Letakin diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.popbox').popbox ();
});
//]]>
</script>
Good luck :)
Sebagai bonusnya, sobat-sabit silahkan jalan-jalan yuk kemari nih ;)
http://jobyj.in/koottam-jquery-plugin/demo.html
http://www.red-team-design.com/interactive-menu-with-css3-jquery
http://webstutorial.com/css3-portfolio-menu/css3 (CSS3 version)
Happy jQuery plugin \m/

Tidak ada komentar:

Posting Komentar