Navigare rapidă

Ultimele subiecte
» [PlayList] Shiin
Scris de System Astazi la 16:14
» Wireless ipb theme [punBB]
Scris de RobiWiLL Vin 14 Iul - 2:01
» Conturile fara mesaje au fost dezactivate
Scris de Femoko Mier 12 Iul - 21:14
Cuvinte-cheie

Simple Toggle cu ajutorul CSS-ului & jQuery


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

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
Cod:
<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
   <div class="block">
      <h3>Content Header</h3>
      <!--Content-->
   </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:

Cod:
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.

Cod:
$(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



DREPTURI DE AUTOR

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

Comentariile utilizatorilor
Membru ET
la data de Dum 29 Mai - 11:35
George130 Membru ET
Conectat
Arata foarte bine, Soh Tanaka asta chiar se stie.
Membru ET
avatar
la data de Mar 31 Mai - 20:51
adyx Membru ET
Conectat
e chiar foarte tare....multam:)
Membru dedicat
avatar
la data de Vin 3 Iun - 21:59
Paul Membru dedicat
Conectat
elegant..
voi utiliza un cuvant de "strada"
Ce misto este :)
Membru dedicat
la data de Vin 17 Feb - 18:35
Keir Membru dedicat
Conectat
Topic mutat în secţiunea corespunzătoare!
Membru premium
avatar
la data de Vin 17 Feb - 19:05
Delight Membru premium
Conectat
Nu imi arata previzualizarea...
Vizitator
avatar
la data de Dum 26 Feb - 12:42
Vizitator Vizitator
Conectat
nici mie