Curs Javascript

Pentru a crea usor efectul de tragere cu mouse-ul a elementelor din pagina cu jQuery, se foloseste jQuery UI, o librarie de functii aditionale la libraria de baza jQuery.
jQuery UI e ca un plugin cu mai multe functii pentru crearea de efecte speciale cu jQuery. Deci, trebuie sa includeti in pagina web ambele fisiere ".js": cel principal cu jQuery si jQuery UI.
- Puteti descarca jQuery UI de la pagina: Download jQuery UI

Metoda draggable()

Pentru a crea posibilitatea ca anumite elemente sa poata fi trase /mutate in pagina cu mouse-ul, se foloseste metoda draggable().
Aceasta functie are urmatoarea sintaxa:
$('selector').draggable({ optiune: valoare });
- optiune: valoare - reprezinta unul sau mai multe perechi optiune/valoare pentru configurarea functiei draggable(). Sunt o multime de optiuni pentru aceasta metoda, iata cateva din ele: - Lista completa cu optiunile pentru metoda draggable() poate fi gasita la pagina: Draggable.

Exemplu 1:
Tragere cu mouse-ul o imagine si un tag DIV. Imaginea poate fi mutata in orice directie; DIV-ul poate fi tras doar pe orizontala. Se foloseste optiunea "stack" pentru a fi adusi in fata dupa actiunea de tragere cu mouse-ul.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging</title>
<style type="text/css"><!--
#dg2 {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // seteaza elementull "#dg1" sa poata fi tras; definire cateva optiuni
  $('#dg1').draggable({
    cursor: 'move',        // seteaza aspectul cursorului
    opacity: 0.35,         // opacitatea elementului in timp ce e mutat
    stack: $('#dg1')       // aduce elementul "#dg1" in fata
  });

  // sets the '#dg2' element as draggable
  $('#dg2').draggable({
    cursor: 'pointer',      // aspectul cursorului
    opacity: 0.35,          // opacitatea elementului in timp ce e mutat
    stack: $('#dg2'),       // aduce elementul "#dg2" in fata
    axis: 'x'               // permite tragerea doar pe linia orizontala
  });
});
--></script>
</head>
<body>
<h4>Apasati click si mutati:</h4>
<img src="rhomb.gif" alt="Romb" width="80" height="70" id="dg1" />
<div id="dg2">Poate fi tras doar pe orizontala,<br />
Cursor setat cu valoare "pointer".</div>
</body>
</html>
Demo:

Apasati click si mutati:

Romb
Poate fi tras doar pe orizontala,
Cursor setat cu valoare "pointer".

Exemplu 2:
Tragere si revert cu o durata a revenirii de 900 milisecunde. Cand DIV-ul e tras, cursorul e adus in partea stanga (datorita optiunii cursorAt: {left: 8}).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging cu revert</title>
<style type="text/css"><!--
div.dg {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the elements with class="dg" as draggable and define some options
  $('.dg').draggable({
    cursor: 'move',        // seteaza aspectul cursorului
    opacity: 0.35,         // opacitatea elementului in timp ce e mutat
    revert: true,          // determina elementul sa revina la locatia initiala
    revertDuration: 900
  });

  // seteaza inca o option (cursorAt), dar numai pt. DIV cu class="dg"
  $('div.dg').draggable({ cursorAt: {left: 8} });
});
--></script>
</head>
<body>
<h4>Apasati click si mutati:</h4>
<img src="rhomb.gif" alt="Romb" width="80" height="70" class="dg" />
<div class="dg">DIV draggable cu revert.<br />
Cursorul e adus in partea stanga.</div>
</body>
</html>
Demo:

Apasati click si mutati:

Romb
DIV draggable cu revert.
Cursorul e adus in partea stanga.

Exemplu 3:
Utilizare optiune handle pentru a putea muta un element doar atunci cand cursorul e pe o anumita portiune din el. Un DIV ce contine un tag <h5> si un paragraf. DIV-ul poate fi tras doar cand mouse-ul este peste zona cu tag-ul H5.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging cu handle</title>
<style type="text/css"><!--
#dg { width:225px; border:1px solid blue; }
#dg h5 { margin:1px; background:#07da08; cursor:pointer; text-decoration:underline; text-align:center; }
#dg p { margin:10px 3px 0px 3px; background:#d7d8fe; }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // seteaza sa poata fi tras elementul cu id="dg"
  $('#dg').draggable({
    // permite mutarea doar cand cursorul e pe elementul H5
    handle: 'h5'
  });
});
--></script>
</head>
<body>
<div id="dg">
 <h5>Apasati click si mutati</h5>
 <p>Curs jQuery:<br />
 <i>marplo.net/javascript/</i></p>
</div>
</body>
</html>
Demo:
Apasati click si mutati

Curs jQuery:
marplo.net/javascript/


Exemplu 4:
Restrange posibilitatea de mutare a unei imaginii doar in cadrul unui DIV cu id="drg". Restrange tragerea unui paragraf doar in cadrul elementului parinte (in care e adaugat).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging cu containment</title>
<style type="text/css"><!--
#drg {
 width:380px;
 height:210px;
 border:2px solid blue;
}
#prt {
 width:305px;
 height:100px;
 margin:8px;
 background:#efefef;
}
#prt p { width:185px; margin:1px; background:#a7daa8; }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // seteaza sa poata fi tras tag-ul cu id="im"
  $('#im').draggable({
    cursor: 'move',        // aspectul cursorului
    containment: '#drg'    // permite mutarea doar in cadrul elementului "#drg"
  });

  // seteaza sa poata fi tras orice paragraf adaugat in #prt
  $('#prt p').draggable({
    cursor: 'move',
    // mutarea se poate efectua doar in limitele elementului parinte
    containment: 'parent'
  });
});
--></script>
</head>
<body>
<h4>Apasati click si mutati:</h4>
<div id="drg">
 elementul #drg<br />
 <img src="rhomb.gif" alt="Romb" width="80" height="70" id="im" />
 <div id="prt">
  <p>Acest paragraf poate fi mutat doar in elementul parinte</p>
 </div>
</div>
</body>
</html>
Demo:

Apasati click si mutati:

elementul #drg
Romb

Acest paragraf poate fi mutat doar in elementul parinte


Exemplu 5:
Utilizare evenimente "start" si "stop" pentru a obtine directia si distanta mutarii (in pixeli), care apoi sunt afisate intr-o fereastra Alert.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging - obtine directie si distanta</title>
<style type="text/css"><!--
#dg {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
 cursor:pointer;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
// seteaza doua variabile in care vor fi retinute pozitiile X si Y
var xpos; var ypos;

$(document).ready(function() {
  // seteaza sa poata fi tras tag-ul cu id="dg"
  $('#dg').draggable({
    // retine pozitia initiala X si Y cand incepe mutarea
    start: function(event, ui) {
      xpos = ui.position.left;
      ypos = ui.position.top;
    },
    // cand tragerea se opreste si click-ul e eliberat
    stop: function(event, ui) {
      // calculeaza distanta de miscare, folosind pozitia curenta X si Y din care scade "xpos" si "ypos"
      var xmove = ui.position.left - xpos;dreapta
      var ymove = ui.position.top - ypos;

      // defineste directia miscarii: dreapta, jos (pt. pozitiv), stanga, sus (pt. negativ)
      var xd = xmove >= 0 ? ' La dreapta: ' : ' La stanga: ';
      var yd = ymove >= 0 ? ' In jos: ' : ' In sus: ';

      alert('DIV-ul a fost mutat,\n\n'+ xd+ xmove+ ' pixeli \n'+ yd+ ymove+ ' pixeli');
    }
  });
});
--></script>
</head>
<body>
<div id="dg">Apasati click si mutati<br />
Va afisa o fereastra Alert cu directia si distanta pe axa X/Y.</div>
</body>
</html>
Demo:
Apasati click si mutati
Va afisa o fereastra Alert cu directia si distanta pe axa X/Y.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
jQuery UI draggable - Muta / Trage elemente

Last accessed pages

  1. Curs CSS Online Tutoriale CSS3 (58657)
  2. Metode ale obiectului String in JS (378)
  3. Curs si Tutoriale Ajax (52647)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (67338)
  5. Curs si Tutoriale JavaScript (70098)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5367)
  2. Curs HTML gratuit Tutoriale HTML5 (4411)
  3. Curs si Tutoriale JavaScript (3780)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3701)
  5. Curs CSS Online Tutoriale CSS3 (3654)