In acest tutorial este prezentat un script cu jQuery care evidentiaza in pagina cuvantul selectat prin dublu clic pe el.
Este util daca doriti sa adaugati in pagina dv. web posibilitatea ca atunci cand utilizatorul apasa dublu-click pe un cuvant din pagina, toate aparitiile acelui cuvand in pagina sa fie scoase in evidenta (colorate).
• Ca sa-l testati, apasati double-clic pe cuvinte din aceasta pagina.

- Acest script foloseste highlight plughin de la: www.johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html .
- Explicatii despre cod sunt in comentariile din script.

Utilizare

1. Adaugati in pagina web (dupa libraria de functii jQuery) codul JavaScript de mai jos.
2. In CSS style adaugati acest cod (defineste culoarea si fundalul cuvantului selectat).
.highlight { background-color: yellow; color:blue; }
- Daca doriti sa fie scoase in evidenta doar cuvintele dintr-o anumita zona, inlocuiti "body" din linia de cod: $('body').dblclick(function(), cu referinta la acea zona. De exemplu: $('#id_element').dblclick(function() .

Codul Scriptului

<script type="text/javascript"><!--
/*
Plughin highlight v3
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
Johann Burkard
<http://johannburkard.de>
*/
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};
jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

// aceasta functie preia textul selectat in pagina
function getSelText() {
  var seltxt = '';      // retine textul selectat

  // preia textul
  if (window.getSelection) {
    seltxt = window.getSelection();
  } else if (document.getSelection) {
    seltxt = document.getSelection();
  } else if (document.selection) {
    seltxt = document.selection.createRange().text;
  }
  return seltxt;
}
--></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // la dublu-clic pe un cuvant din cadrul BODY
  $('body').dblclick(function() {
    var seltxt = getSelText();      // preia cuvantul selectat
    seltxt = $.trim(seltxt);        // sterge spatiile din margine
    $(this).removeHighlight().highlight(seltxt);      // acceseaza functiile de anulare si evidentiere cuvant
  });
});
--></script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Ce proprietate CSS permite modificarea transparentei unui element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Clic pe functia care formateaza un numar la o anumita lungime de caractere.
toPrecision() exp() toFixed()
var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8
Ce functie aranjeaza aleator elementele dintr-un array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
Indicati Superlativul cuvantului "good" (bun).
better best goodest
She is the best in our class.
- Ea este cea mai buna din clasa noastra.
Care este Superlativul cuvantului "bueno" (bun)?
el mejor más bueno muy bueno
Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.
Evidentiere cuvant selectat prin dublu-click

Last accessed pages

  1. Trecut perfect (2064)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (121220)
  3. Curs si Tutoriale JavaScript (50692)
  4. Sintaxa JavaScript (6199)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (48329)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (846)
  2. Curs HTML gratuit Tutoriale HTML5 (615)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (559)
  4. Curs si Tutoriale Ajax (556)
  5. Curs si Tutoriale JavaScript (553)