Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Ieri la 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

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

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