Sabtu, 04 September 2010

Make Tabs Using jQuery Plug-in

Banyak benar kegunaan script jQuery plug in ini sob. Mungkin sobat juga sudah pernah melihat dan menyaksikannya di web developer :D Kali ini Beben sibloglang mau berbagi hasil ngebloglang :P "Create Animated Tabs using JQuery and CSS" Tau dong tabs :-/ yg berderet bisa mengirit tempat pada template kita sob ;) Di Prodigy ajah ada 2 biji tabsnya sob ;)) Lihat gambar yg ada dikiri tuh...kekekekkk. Untuk melakukan trik ini sobat harus memiliki jQuery minimal versi jQuery 1.2.6 Jadi jika sobat sudah memiliki yg lebih dari itu tidak usah dipasang lagi (ingat selalu hal ini)
Script rekomendasi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/></script>

Kode CSS

Letakan seperti biasa sebelum kode ]]></b:skin>
.b, .c{ display:none;}
#badan em{ font-style:normal; font-size:36px;}
.buttons{
border-bottom:solid #d1c8b8 4px;
display:block;
padding:8px;
width:60px;-moz-border-radius: 1em 3em 1em 3em;
border-radius: 1em 3em 1em 3em;
text-align:center;
margin:1px;
background:#4b7975;
text-decoration:none; color:#FFFFFF;
float: left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#badan {
background:#919b9d;
text-align:justify;
overflow:hidden;
color:#fff;
padding:20px;
-moz-border-radius: 1em 3em 1em 3em;
border-radius: 1em 3em 1em 3em;
height:200px;
width:260px;
}
#wrap{
text-align: left;
overflow:hidden;
width:auto;
height:380px;
}

jQuery plug-in

Letakan script berikut diatas tag </body>
<script>
$(document).ready(function(){

$("#first-tab").addClass('buttonHover');
});

function navigate_tabs(container, tab)
{
$(".b").css('display' , 'none');
$(".c").css('display' , 'none');
$(".a").css('display' , 'none');

$("#first-tab").removeClass('buttonHover');
$("#second-tab").removeClass('buttonHover');
$("#third-tab").removeClass('buttonHover');

$("#"+tab).addClass('buttonHover');
$("."+container).show('slow');
}
</script>

Kode HTML

Untuk bagian ini letakan didalam tag <body> atau juga bisa Add a gadget HTML/Javascript ;))
<div id="wrap">
<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
<br clear="all" />
<div id="badan" align="center">
<div class="a">
<em>Beben</em> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br /><br />Thanks!
</div>
<div class="b"><em>E</em> psum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.
</div>
<div class="c"><em>L</em> i Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&aacute; de un nov lingua franca: on refusa continuar payar custosi traductores.
</div>

Save

Untuk lebar dan tinggi sesuaikan pada kode CSSnya saja ya sob :)

Create a Neat Content Box with Tabs using CSS & jQuery

Kode CSS

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}

Kode HTML

<ul class="tabs">
<li class="active" rel="tab1">Title1</li>
<li rel="tab2">Title2</li>
<li rel="tab3">Title3</li>
<li rel="tab4">Title4</li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
YOUR CONTENT 1
</div>

<div id="tab2" class="tab_content">
YOUR CONTENT 2
</div>

<div id="tab3" class="tab_content">
YOUR CONTENT 3
</div>

<div id="tab4" class="tab_content">
YOUR CONTENT 4
</div>

</div>

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
//]]>
</script>Resource by: Entheos.

demoHappy creatifity b-)

Diposting oleh di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)