Trik Komputer: Kumpulan Trik jQuery Plugin

jQuery memang enggak ada habisnya. Para pengembang selalu mengeluarkan trik teranyar dalam karyanya. Beben Koben si bloglang anu ganteng kalem tea mau berbagi trik jQuery toggle. Toggle (dibaca togel) bukan nomor buntut alias judi bola :D Tapi trik yang menyembunyikan sesuatu kala diklik/dihover akan nampak isinya. tak jauh berbeda dengan toggle.
Yang perlu sobat ketahui, trik ini plugin jQuery. Beben enggak akan menjelaskan cara pemasangan didalam template sobat. Koben anggap bos sudah pada tahu dimana meletakkan CSS, HTML, ataupun script kedalam template :)

Simple Toggle

<!DOCTYPE html>
<html>
<head>
<title>Simple Toggle</title>
<meta charset="utf-8" />

<style>
#toggleArea {
display:none;
/* you custome CSS here */
}
</style>

</head>

<body>

<input type="button" id="Toggle" value="Toggle Here" />

<div id="toggleArea">
Prodigy of Head!!!<br />Prodigy of Head!!!<br />
Prodigy of Head!!!<br />Prodigy of Head!!!<br />
Prodigy of Head!!!<br />Prodigy of Head!!!<br />
Prodigy of Head!!!<br />Prodigy of Head!!!<br />
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function() {
$('#Toggle').click(function() {
$('#toggleArea').slideToggle(500);
return false;
});
});
</script>

</body>
</html>

Satu tuh jadi cara membikin toggle secara sederhana. Yuk lanjutin lagih kisah cinta pertogelannyah ;))

Toggle with Hover

<!DOCTYPE html>
<html>
<head>
<title>Toggle with Hover</title>
<meta charset="utf-8" />

<style>
.msg_list p {
font-size: 15px;
padding: 3px 5px;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#333;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>

</head>

<body>

<div class="msg_list" id="secondpane">
<p class="msg_head">TITLE1</p>
<div class="msg_body">

YOUR CONTENT1 HERE

</div>

<p class="msg_head">TITLE2</p>
<div class="msg_body">

YOUR CONTENT2 HERE

</div>

<p class="msg_head">TITLE3</p>
<div class="msg_body">

YOUR CONTENT3 HERE

</div>
</div>
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane p.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane p.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

</body>
</html>

jQuery Accordion

<!DOCTYPE html>
<html>
<head>
<title>Toggle with Hover</title>
<meta charset="utf-8" />

<style>
div.accordion {
width: 201px;
float: left;
margin-right: 5px;
}
div.accordion h2 {
width: 201px;
height: 41px;
background: url(http://dev.css-zibaldone.com/onwebdev/post/accordion.png) no-repeat 0 0;
margin: 0;
line-height: 41px;
color: #fff;
font-size: 1.2em;
text-indent: 10px;
cursor: pointer;
}
div.accordion h2.hover {
background: url(http://dev.css-zibaldone.com/onwebdev/post/accordion-hover.png) no-repeat 0 0;
}
div.accordion div {
width: 100%;
background: #a40;
color: #fff;
line-height: 1.3;
display: none;
font-size: 1.1em;
}
div.accordion div p {
margin: 0 auto;
padding: 5px;
}
</style>

</head>

<body>

<div id="content">
<div class="accordion">
<h2>Title</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="accordion">
<h2>Title</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
/* source by:http://onwebdev.blogspot.com/2011/05/jquery-accordion-tutorial.html */
//<![CDATA[
$(function() {

$('div.accordion').each(function() {

var $accordion = $(this);
var $title = $accordion.find('h2');
var $content = $title.next();

$title.click(function() {

if($content.is(':hidden')) {

$content.slideDown();
$title.addClass('hover');

} else {

$content.slideUp();
$title.removeClass('hover');

}

});
});

});
//]]>
</script>

</body>
</html>

Please change that image link with your host alone.

Result
Bonus easy image hover with jQuery:

Result
Ingat yak sob, jika sudah punya script<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'></script>enggak usah dipasang lagi!!!

Menu With jQuery

Kode CSS

div.panel-a, .flip
{
cursor: pointer;
z-index:1000;
position:fixed;
top:10px;
overflow:auto;
right:0px;
}
p.flip
{
text-align:center;
padding:5px;
position:fixed;
top:0px;
overflow:auto;
margin:0px;
}
div.panel-a
{
padding:5px;
height:auto;
display:none;
cursor:default;
}
div.flip-b
{
text-align:center;
padding:5px;
margin:0 auto;
cursor:pointer;
}

Kode HTML

jQuery Plugin

<script type='text/javascript'>
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel-a").show("slow");
            $(".flip").hide("slow");
        });

        $(".flip-b").click(function() {
            $(".panel-a").hide("slow");
            $(".flip").show("slow");
        });
    });
</script>

Result

Asalnya ada tapi bisa diilangin

Berikut struktur kode²nya bos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $("#b-close").click(function () {
        $("#be-slider").animate({
            opacity: "0",
            left: "0"
        }, 1000).show();
    });
});
//]]>
</script>

<style>
.ben-gone {
top: 10%;
margin: 0;
height: auto;
width: 350px;
padding: 10px;
opacity: 0.75;
position: fixed;
background-color: #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#b-close {
color: #FFF;
padding: 10px 0 5px;
margin: 0 auto;
text-align: center;
font-weight: bold;
font-size: 15px;
}
</style>

<div id="be-slider" class="ben-gone">

YOUR CONTENT ADD HERE!!!

<p id="b-close">
<a href="#" onclick="return false;" title="close here" style="color:red"!important>I want to close this!</a> X
</p>

</div>

Result

Auto Image Boucing

Structure coded like this

Result
Kolom postingan ini mungkin akan Beben jadikan tempat penyimpanan trik jQuery secara mudah tetapi tetap full stylish (dari pada lopa) :D Don't forget to look and visit The Great jQuery Webs.
Happy enjoy \m/

Trik Komputer

Rabu, 11 Mei 2011

Kumpulan Trik jQuery Plugin