Simple Toggle cu ajutorul CSS-ului & jQuery

Subject: Simple Toggle cu ajutorul CSS-ului & jQuery Tue Jun 28, 2011 12:23 am

INFORMAŢII

Ştiu că există o mulţime de tutorialepentru toggle, dar când am învăţat bazele jQuery şi efectul toggle, m-am gândit să vi-l prezint si vouă.

După ce am citit cateva tutoriale, am observat ca toate erau explicate gresit, asa ca vi-l voi explic eu Razz

TUTORIAL

Primul pas: Wireframe & Style

Noi începem cu o etichetă de H2 cu un link care da efectul "de declanşare" . După h2 noastre, vom avea container nostru, unde noi vom insera conţinutul.

HTML
*Poate fi pus intr-o pagina HTML

Code:: <h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>

</div>
</div>

CSS
*Codul il puteti pune intr-o pagiona HTML intre tag-ul < style > si < /style > sau uploadati intr-un fisier .css pe un host propriur:

Code:: html {
overflow-Y: scroll;
}
body {
font: 10px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}

.container {
width: 500px;
margin: 0 auto;
}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 20px 0;
color: #aaa;
}
h1 span { color: #666; }
h1 small{
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.5em;
display: block;
color: #666;
}
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(http://www.sohtanaka.com/web-design/examples/toggle/h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(http://www.sohtanaka.com/web-design/examples/toggle/toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(http://www.sohtanaka.com/web-design/examples/toggle/toggle_block_btm.gif) no-repeat left bottom;
}
.toggle_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.toggle_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.toggle_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}

Al doilea pas: Activarea efectului toggle jQuery

Vom activa acum acest efect toogle cu un simplu script jQuery.

Code:: $(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});

});

DEMONSTRAţIE

DEMO

DREPTURI DE AUTOR

Tutorial creeat de SohTanaka in limba engleza.
Tutorial tradus de The Unique in limba romana.
Corectat de The Unique.

Foarte frumos mulţumim pentru traducere.

Bun tutorialul,felicitari pentru ca lai tradus