◄ Min  Size Fonts: + | - | ± Color: Max ►

Kumpulan Trik jQuery Plugin

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. Show/Hide 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>

Result
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>

Result

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
<div class='panel-a'>
<a href='#'><img src='http://your-image.png' alt='Home'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu1'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu2'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu3'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu4'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu5'/></a>
<div class='flip-b'><img src='http://your-image-close.png' alt='Close'></div>
</div>
<p class='flip'><img src=''http://your-image.png' alt='Menu'/></p>
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
<script type='text/javascript'>
//<![CDATA[
function repeatscroll() {
if ($('#imgScroll img').css('margin-left') == '0px') {
var margin = '200px';
} else {
var margin = '0px';
}
$('#imgScroll img').animate({'margin-left': margin}, 5000, 'linear', function() {repeatscroll();});
}
$(document).ready(function() {repeatscroll();});
//]]>
</script>

<div id='imgScroll'>
<img src='http://4.bp.blogspot.com/-VvUTZpaReB4/Tb5Owh-ouBI/AAAAAAAAABE/Ffs6D0OI4XI/plus.jpg' style='YOUR-INSTYLE-HERE'/>
</div>

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/

Loading...
XKumpulan Trik jQuery Plugin

Subscribe my posts Register For Free!

7 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE