Curs Javascript

Exista mai multe moduri a a afisa si ascunde un element in pagina web cu jQuery, una dintre aceste metode este printr-o miscare animata de alunecare (glisare).

slideDown() si SlideUp()

Metoda slideDown() afiseaza elementele selectate printr-un efect de animare a inaltimii lor.
Metoda slideUp() ascunde elementele selectate, printr-un efect de glisare.
Aceste doua metode jQuery se folosesc cu urmatoarele sintaxe:
$('selector').slideDown('durata');
$('selector').SlideUp('durata');
- "durata" - (optional) indica durata efectului, care determina si viteza. Poate fi unul din sirurile "fast" si "slow", sau un numar ce specifica durata in milisecunde.

Pentru a executa anumite instructiuni dupa ce efectul e finalizat, se folosesc urmatoarele sintaxe:
$('selector').slideDown('durata', function() {
  // cod executat cand efectul slideDown se termina
});
$('selector').SlideUp('durata', function() {
  // cod executat cand efectul slideUp se termina
});

Exemplu cu slideDown

Afiseaza un <div> (cu id="dv1") folosind slideDown(), iar cand efectul se termina, afiseaza un alt <div> (cu id="dv2") in acelasi mod.
<style type="text/css"><!--
div { display:none; float:left; width:200px; height:100px; }
#dv1 {background:#0708fe; }
#dv2 {background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="btn" aplica slideDown la #dv1, apoi la #dv2
  $('#btn').click(function() {
    $('#dv1').slideDown(1000, function() {
      $('#dv2').slideDown(800);
    });
  });
});
--></script>

<div id="dv1">Aici poate fi un continut oarecare</div>
<div id="dv2">Un alt continut</div>
<button id="btn" style="clear:both;">Afiseaza</button>
Click pe butonul urmator ca sa vedeti efectul:

Exemplu cu slideUp

Cand se apasa un anumit buton, ascunde tag-urile <div> cu class="cls", apoi ascunde si butonul.
<style type="text/css"><!--
div.cls { float:left; width:200px; height:100px; }
#dv1 {background:#0708fe; }
#dv2 {background:#07fe08; }
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // la click pe tag-ul cu id="btn" ascunde toate DIV-urile cu class="cls"
  // apoi ascunde si butonul
  $('#btn').click(function() {
    $('div.cls').slideUp(1000, function() {
      $('#btn').slideUp('slow');
    });
  });
});
--></script>

<div id="dv1" class="cls">Aici poate fi un continut oarecare</div>
<div id="dv2" class="cls">Un alt continut</div>
<button id="btn" style="clear:both;">Ascunde</button>
Click pe butonul "Ascunde" ca sa vedeti efectul:
Aici poate fi un continut oarecare
Un alt continut

Metoda slideToggle()

slideToggle() afiseaza sau ascunde elementele selectate, prin animarea inaltimii lor. Daca elementul este vizibil, il ascunde, daca e ascuns, il face vizibil.
Sintaxa:
$('selector').slideToggle('durata');
• Sau, daca vreti sa executati o functie cand efectul e finalizat, se foloseste aceasta sintaxa:
$('selector').fadeToggle('durata', function() {
  // cod executat cand efectul se termina
});
- "durata" - (optional) indica durata efectului, care determina si viteza. Poate fi unul din sirurile "fast" si "slow", sau un numar ce specifica durata in milisecunde.

Eemplu. Un meniu vertical cu doua liste, care vor fi afisate cand mouse-ul e pe meniu, si le ascunde cand mouse-ul iese din zona meniului:
<style type="text/css"><!--
ul { float:left; cursor:pointer; }
li.cls {
 display:none;
 background:#e0e0fe;
}
--></style>

<script type="text/javascript"><!--
$(document).ready(function() {
  // cand mouse-ul intra sau iese din zona unui element UL, aplica slideToggle
  $('ul').hover(function() {
    $(this).find('.cls').slideToggle('slow');
  });
});
--></script>

<ul>
 <li>Cursuri gratuite</li>
 <li class="cls"><a href="https://marplo.net/html/">HTML</a></li>
 <li class="cls"><a href="https://marplo.net/css">CSS</a></li>
 <li class="cls"><a href="https://marplo.net/javascript/">Javascript</a></li>
</ul>
<ul>
 <li>Tutoriale</li>
 <li class="cls"><a href="https://marplo.net/flash/actionscript-3_e">ActionScript</a></li>
 <li class="cls"><a href="https://marplo.net/ajax/">Ajax</a></li>
 <li class="cls"><a href="https://marplo.net/javascript/curs-jquery-tutoriale-js">jQuery</a></li>
</ul>
<br style="clear:both;" />
- Metoda hover() e apelata de ambele evenimente mouseenter si mouseleave.
Acesta e rezultatul codului de mai sus. Mutati mouse-ul pe "Cursuri gratuite" si "Tutoriale".

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a crea o caseta de adaugare text?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
Ce instructiune afiseaza o fereastra cu un mesaj in ea?
for() Date() alert()
var msg = "Viziteaza CoursesWeb.net";
alert(msg);
Indicati codul PHP prin care se obtine IP-ul utilizatorului.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Cum se traduce cuvantul "actually"?
actual de fapt acum
He actually came on time.
- De fapt, el a venit la timp.
Cum se traduce expresia: "Hace buen tiempo"?
Face timp E vreme frumoasa Drum bun
Hoy hace buen tiempo.
- Astazi e vreme frumoasa.
jQuery slideDown si SlideUp

Last accessed pages

  1. Coduri pt culori (74452)
  2. Scriere cod CSS (5877)
  3. Script pentru ceas (1867)
  4. Data si ora - Exercitii incepatori (8451)
  5. Pronume relativ - que, quien, lo que (685)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (573)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (313)
  3. Gramatica limbii engleze - Prezentare Generala (282)
  4. Coduri pt culori (220)
  5. Cursuri limba engleza gratuite si lectii online (206)