Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» Ipb Counter-strike Special FG
Scris de DenisPasca Sam 3 Dec - 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
» Script ninsoare
Scris de JeKa123 Vin 2 Dec - 20:20
» Cerere script
Scris de SSYT Joi 1 Dec - 23:22
Cuvinte-cheie

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

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