Navigare rapidă

Ultimele subiecte
» Bulletin ipb theme
Scris de Iustin Vin 17 Feb - 14:49
» Sliding Menu Bar V5
Scris de RAKSONE Mier 15 Feb - 1:13
» Cereri intrare in staff[Deschise]
Scris de Madross Sam 11 Feb - 21:11
» Cum iti creezi propriul joc online
Scris de xTeRm0 Sam 11 Feb - 14:47
» Informatii Primul Post [IPB Animate]
Scris de bablil Sam 11 Feb - 0:22
Cuvinte-cheie

cautare  tutorial  punbb  Mesaje  phpBB2  tema  radio  reclama  meniu  menu  edit  html  chenar  profil  Statistici  ultimele  Metin2  animate  legenda  banner  navigare  subforumuri  drop  avatar  subiecte  Bara  

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
la data de Mar 31 Mai - 20:51
adyx Membru ET
Conectat
e chiar foarte tare....multam:)
Membru dedicat
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
la data de Vin 17 Feb - 19:05
Delight Membru premium
Conectat
Nu imi arata previzualizarea...
Vizitator
la data de Dum 26 Feb - 12:42
Vizitator Vizitator
Conectat
nici mie