PC-politika.cz - Novinky: JAVASCRIPT: Nezapomínejte na jQuery [2] PC-politika

JAVASCRIPT: Nezapomínejte na jQuery [2]

JavaScriptový modul JQuery má řadu dobrých vlastností, které je výhodné využít. Například jQuery vynikajícím způsobem spolupracuje s Kaskádovými styly (CSS). Perfektně vrací správné hodnoty pro CSS ('background-color') a rovněž pro CSS ('BackgroundColor'). Dnes si vyrobíme skript, který zjišťuje konkrétní barvy.

Podle HTML a JS skriptu (v ukázce) si můžete vyrobit jednoduchou animaci, která dokáže rozpozeznat barevy jednotlivých barevných polí. Skript je naprosto funkční. Stačí nakopírovat na vaši HTML stránku.

<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
</script>
</body>
</html>

Stručný popis

Všimňete si nejprve na ř. 7, že musíte odkazovat na jquery-1.5.js
Internet Explorer DOM implementace sice normálně pracuje při odkazování se styleFloat , přičemž W3C standardy-kompatibilního prohlížeče odkazují na cssFloat. Výsledek je však totožný!

Demo ukázky kódu

Na předvedení ukázky funkčního kódu se podívejte zde: demo-nezapominejte2.html. Po kliknutí na barevné pole se objeví vpravo informace o konkrétní barvě v barevné paletě.