Primer grafa je viden tukaj. Kaj omogoča? Prikaz grafov – črta, stolpci – poševno in pokončno, torta in 3d torta.

Kako do izpisa?

Na spletni strani dodate div, span ali kak drug element, mu pripišete id ali class in v spletno stran vključite, jquery knjižnico, dodate jquery.googleCharts.js plugin in kličete izpis.

Klic izpisa za graf, ki se prikaže v div elementu z id=”graf”, zgleda nekako tako:

$('#graf').gchart({'chart':'pie3d', 'values':'25,50,75,100', "size": "500x200", "labels":"25|50|75|100", "axis":"y", "axisval":"0,0,100,10", "space":"a"});

Vrednosti:

chart : vrsta grafa -> barv (stolpci vertikalni), barh (stolpci horizontalni), line (črta), pie (torta), pie3d (torta 3d)
values : vrednosti -> v primeru testa 25, 50, 75, 100
size :  velikost grafa -> velikost grafa je omejena z uporabo APIja in ne sme presegati 3000px, površine grafa. Paziti je potrebno na razmerje širine in višine pri tortah (pie – ne prevajam pita, ampak po MS cake  chartu :D), kjer je potreben nekoliko širši prikaz zaradi label.
labels : Labele oz. oznake, ločujemo s pokončno črto (ALT GR+W)
axisval : vrednosti na eni od os -> kombinacija z axis: x,y,t. Potrebno nekaj dodelave:  0, 0, 120, 10 prikazuje start vrednosti od nič do 120 s koraki po 10.
space : prostor med stolpci, a je avto.

Povezava do plugina: jquery.googleCharts0.1a.js

Alfa izdaja je prestala vse teste brskalnikov, ki jih jQuery podpira, sedaj pa so potrebni javni testi v aplikacijah na spletu. Kakšnih hudih sprememb v funkcionalnosti ni, pravijo pa da so določene akcije dodobra optimizirali.

jQuery 1.4 a1 ->http://code.jquery.com/jquery-1.4a1.js

jQuery 1.4 a1 min -> http://code.jquery.com/jquery-1.4a1.min.js

Če odkrijete kakšen bug, pa le tega prijavite.

Več o izdaji: http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released/

Pa stvar deluje? http://blog.ilrac.net/testi/jq14a1.php

No jQuery omogoča vse bolj enostavno, saj razume kaj je top: 0. Torej lahko izvedemo scrollTop:0 in se okno postavi na vrh strani, če želimo to postavljanje še malo animirati in da to deluje v vseh brskalnikih kot tudi name tag, lahko enostavno uporabimo $(’html, body’).animate({scrollTop:0}). No bolj natančen primer je viden spodaj.

$(document).ready(function() {
$('#to_top').bind('click', function() {
$('html, body').animate({'scrollTop':0}, 1000);
});
});

Vse kar je potrebno storiti je da elementu nastavimi id = #to_top, kjer se s klikom na element sproži animacija.

Primer slajda.

Drugi primer je posredovan od @wpSEO, kjer se href uporablja za definicijo elementa, do katerega se pomakne okno:

http://www.webdevtuts.net/coding-tutorials/how-to-make-page-scroll-to-top-of-page-using-jquery/

Torej kako deluje.

<div class="imgt">
<img src="img.jpg" title="Nek opis fotografije" />
</div>

HTML izgleda povsem preprosto, slika v div elementu, slednji je potreben zaradi kasnejšega prikaza okvirja, lahko bi se izvedlo tudi kasnejše dodajanje tega elementa, vendar je taka rešitev dovolj elegantna.

CSS datoteka v tem primeru več ali manj postavi celoten izgled, kot lahko vidite v primeru. Div z classom .caption ima nastavljeno opacity 0, kar je nekako pomembno zaradi fade efekta, ima nastavljeno višino in širino, ki pa je stvar stila prikaza. Lahko se okvir prikaže čez celotno sliko, kar pomeni, da bo height: 100%, ali v px, kolikor je višina .imgt elementa. Prav tako mora biti pozicija .imgt elementa relativna, za potrebe okvirja, ki se nato prikazuje absolutno na ta element.

Možnosti:

animation: 1 // (Vključena animacija torej zoom) default je 1
aniopacity: 1 // (prozornost fotografije) default je 1 | 0.8 = 80% do 0 ki je popolnoma prozorna
fadetovalue: 0.8 //(prozornost okvirja) default je 0.8 | do 0 ki je popolnoma prozoren
zoom: 120 // (globina zooma) default je 120, kar pomeni da se fotografija poveča na 120%
fadespeed: “fast” // (hitrost fade efekta) default je fast, v IE brskalnikih je fade efekt nekoliko drugačen.

Primer:

$(function() {
$('div.imgt').titleimg({animation: 1, aniopacity: 1, fadetovalue: 0.6, zoom: 140, fadespeed: "fast"});
});

Kako izgleda končni rezultat:

Okvir 100% x 100%

Okvir 100% x 20% spodaj

Okvir 100% x 20% zgoraj

Prenos plugina jQuery image title plugin (save as – shrani kot).

No v celem postopku ni vključena kakšna avtomatska generacija ključnih besed, ampak je potrebno te ključne besede vpisati ročno. Ključne besede se loči s pomočjo vejice in se jih nato s pomočjo explode razbije na posamezno besedo. V primeru tudi neke varnostne zanke, ki bi preverjala, da so besede res ločene samo z vejico in ni nekih drugih znakov, ki bi ločevali besede.

Ne bom pisal preveč na dolgo, tako da je spodaj prilepljen kar celoten class.

< ?php
include 'config.php'; // MYSQL POVEZAVA

class tagiranje {
// PROPERTIES
var $tags;
var $besede = array();
var $besedeclean = array();
var $p;
var $poz;
var $arraybesed = array();
var $getbesede = array();
var $maxfont = '50';
var $minfont = '10';
var $out;

// EXPLODE BESED
function get_words($tags) {
$besede = explode(",", $tags);
foreach ($besede as $beseda) {
if (mb_substr($beseda, 0, 1) == " ") {
$besedaclean[] = substr_replace($beseda, "", 0, 1);
}
else {
$besedaclean[] = $beseda;
}
}
$this->arraybesed = $besedaclean;
}

function checkwords() {
$besede = $this->arraybesed;
foreach ($besede as $beseda) {
$query_check = mysql_query("SELECT * FROM tagi WHERE tag='$beseda' LIMIT 1");
$num = mysql_num_rows($query_check);
if ($num == null) {
$query_add_tag = mysql_query("INSERT INTO tagi(tag, vrednost) VALUES('$beseda', '0')");
echo mysql_error();
}
else {
$pod = mysql_fetch_assoc($query_check);
$novavrednost = $pod['vrednost'] + 1;
$query_update_v = mysql_query("UPDATE tagi SET vrednost='$novavrednost' WHERE id='".$pod['id']."'");
echo mysql_error();
}
}
}
function getwords($minfont, $maxfont, $limit) {
$query_get_max = mysql_query("SELECT MAX(vrednost) as maxvrednost FROM tagi");
$tempmax = mysql_fetch_assoc($query_get_max);
$query_get_words = mysql_query("SELECT * FROM tagi ORDER BY vrednost DESC LIMIT $limit");
while ($data = mysql_fetch_assoc($query_get_words)) {
$fontper = round(($maxfont / $tempmax['maxvrednost']) * $data['vrednost']);
if ($data['vrednost'] > 0) {
if ($fontper > $minfont) {
$out[] = array($data['tag'] => $fontper);
}
else {
$out[] = array($data['tag'] => $minfont);
}
}
else {
$out[] = array($data['tag'] => $minfont);
}
}
return $out;
}
}

?>

Ok najprej kot sem že povedal se s pomočjo $tag->get_words($seznambesed); dobi array vpisanih ključnih besed. Nekaj klobase je zaradi začetnih presledkov, ki nastanejo zaradi ločevanja besed, ker pri vpisovanju za vejico ponavadi vstavimo presledek se le ta dodeli besedi za vejico. Seveda zgornja rešitev ni dobra, ker lahko nekdo po pomoti ali pa tudi ne, vpiše dva presledka.

No ko enkrat imamo besede, preverimo $tag->checkwords(); če katera od besed že obstaja, če obstaja ji zvišamo vrednost, nekateri temu rečejo frekvenco, ali kako drugače. No če beseda ne obstaja, jo enostavno vpišemo in dodelimo nično vrednost. Na podlagi vrednosti se nato izračunava velikost fonta glede na pojavnosti.

Kako do prikaza? Sam sem izbral način da se določi število besed, največji font in najmanjši, kar omogoča izračunavanje velikosti fonta glede na besede. Izračunavanje gre po križnem računu, glede na največjo pojavnostjo. Torej tista beseda, ki ima največjo pojavnost je v tem primeru izpisana prva.

Torej za konec še zahtevamo ureditev besed: $tag->getwords(10, 50, 30); . Nastavitve si sledijo: najmanjša velikost fonta, največja velikost fonta in število ključnih besed.

Kot rezultat dobimo več nivojski array, ki ga poljubno izpišemo.

Delujoč primer izpisa lahko najdete tukaj. Na primeru lahko s pomočjo povezave pod ključnimi besedami, sami vnesete ključne besede, po možnosti večkrat.

British Broadcasting Corporation je na splet postavila svoj JS Framework, ki se lahko pohvali s kar nekaj dobrimi widgeti in s kar nekaj uporabnimi možnostmi. No nekako so v jedru zbrane tiste najpomembnejše sestavine in pripomore k zmanjšanju velikosti core datoteke. Tako je core produkcijska verzija velika celih 88kb. No v jedru so zajete animacije, selektorji, DOM modifikatorji, eventi, drag&drop, validacija in tako imenovani ajax get-post. Osebno me nekoliko moti sintaksa in pa seveda logika, ki se razlikuje od jQuery. Kar pa niti ni nujno da je slabo.

No nek majhen primer animacije in enega widgeta viden tukaj.

Sicer pa naslov kjer najdete API dokumentacijo: http://www.bbc.co.uk/glow/docs/1.5/

P.S.: Če komu to kaj pomeni, BBC testira svoje strani tudi v IE5.5 in to pomeni, da Glow FW že v štartu podpira skoraj vse še obstoječe IE verzije. Namespaces so pa podobni Yahoo YUI.

No problem desnega klika je, da se po kliku na desni miškin gumb, ponavadi odpre contextmenu, ki ga tokrat pač ne želimo. Torej je postopek tak, da ob kliku na stran (klik delimo na dva dela, prvi del je pritisk na gumb, drugi del pa ko gumb izpustimo), se pravi prvi del, prikažemo meni, ob postopku drugega dela pa onemogočimo odpiranje contextmenuja. No sam postopek odpiranja je povsem enostaven in ima pomanjkljivost, ko pridemo do roba brskalnika in ni neke omejitve, glede pozicije menija, ampak tudi to ne bi smel biti večji problem. Meni se odpre glede na koordinate miške, ki jih pridobimo s pomočjo jQuerya, ker je le ta že kompatibilen z brskalniki. Glede na dobljene koordinate, nastavimo css pozicijo menija, torej odmik od zgoraj in odmik iz leve strani (top: XXpx left: XXpx). Trenutno se meni odpre od zgoraj, kar izvedemo s slide efektom in nastavimo timeout za zapiranje menija po določenem času, trenutno je nastavljeno 5s. Tukaj velja omeniti še kakšno loop zanko, ki bi poskrbela za to, da se meni ne bi zaprl, če bi bili z miško nekje na menuju. No po kliku se menu zapre oz. se zapre po preteku prej omenjenega časa.

Evo še koda:

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$(this).mousedown(function(e) {
var $button = e.button;
if($button == '2') {
$xcord = e.clientX;
$ycord = e.clientY;
$(".rclickmenu").css("top", $ycord);
$(".rclickmenu").css("left", $xcord);
$(".rclickmenu").slideDown(function() {
var $timerhide = setTimeout("$('.rclickmenu').slideUp()", 5000);
$(this).click(function() {
$(this).hide();
clearTimeout($timerhide);
});
});
}
});
$(this).mouseup(function(e) {
if (e.button == 2) {
document.oncontextmenu = function(){return false}
}
});
});
</script>

Verjetno koga bode nastavitev pozicije s css(), ki je deljena na vsako posebaj, to pa je zato, ker ima IE včasih probleme pri nastavljanju takih vrednosti, ki so nanizane kar v arrayu (css({”top”: “XXpx”, “left”:”XXpx”})). CSS samega menija je lahko poljuben le v tem primeru mora class rclickmenu imeti absolutno pozicijo in z index dovolj velik, da se prikazuje nad drugimi elementi.

Primer desnega klika si lahko ogledate tukaj: http://blog.ilrac.net/testi/klik/

No gre za to, da se JS prične nalagati, ko je celotna stran že naložena in uporabnik ne vidi dalj časa neko prazno, ali na pol naloženo spletno stran, ki po vsem še ni funkcionalna, ko gre za dodatne možnosti JS-a. No rešitev je on DOM ready in nalaganje JS-ja skozi jQuery. Princip je povsem enostaven, predvsem takrat ko ne potrebujete dodatnega nastavljanja, kot je to pri GA in je potrebno JS samo naložiti. No spodaj je primer kombinacije GA in Woopre.

<script type="text/javascript" src="js/jquery.js" />
<script type="text/javascript">
$(document).ready(function() {
$.getScript("http://www.google-analytics.com/ga.js", function() {
var pageTracker = _gat._getTracker("UA-509333-25");
pageTracker._trackPageview();
});
$getScript("http://static.woopra.com/js/woopra.js");
});
</script>

Delujoč primer je viden na Testiranje GA in jQuery.

No v prvo gre za obsežen seznam pluginov, kako bi to že prevedli – vtičnikov za jquery. Seznam je kar obsežen, fajn pa je da vsebuje vsaj en stavek opisa, kar nam olajša iskanje ustreznega plugina, ali pa poiščemo plugin in si ogledamo, kaj in kako le ta opravlja svoje poslanstvo. Seznam najdete na tej povezavi: http://marcgrabanski.com/article/list-of-useful-jquery-plugins. No Marc Gabanski pa ima tudi nekaj svojih pluginov, kot je naprimer ta WYMEditor, ki je malo poseben, če smo vsi vajeni teh običajnih urejevalnikov besedila.

No na seznamu manjka še naprimer ta fascinantni image rotator: http://wilq32.googlepages.com/wilq32.rollimage222. Za vse ki delajo malo več s samim jQuery-em, pa se prav kmalu znajdejo v situaciji, ko potrebujejo malo boljšo podporo za časovne intervale pri raznih animacijah, tako si lahko pomagajo z http://plugins.jquery.com/node/3704.

Pa še seznam AjaxLineovih best off pluginov za mesec marec: http://www.ajaxline.com/10-best-jquery-plugins-march-2009.

No drugače pa s takšnimi in drugačnimi plugini na plano … :D

No vsekakor pa tukaj zopet odpade kakšna izdelava printscreena s pomočjo kakega programa, ki ne uporablja teh kombinacij tipk, ali pa se posnetek izvede s pomočjo klika. No kako zgleda ta zaščita, si lahko ogledate tukaj.

No gre za to, da ob pritisku na CTRL javascript skrije vse fotografije in jih nato zaradi drugih možnosti uporabe CTRL tipke po nekaj sekundah zopet prikaže nazaj. Problem je ker se CTRL uporablja tudi za druge akcije, kot odpiranje tabov, bukiranje itd.

$(document).keydown(function(e) {
if(e.keyCode == 17) {
$('img').each(function() {
$(this).hide();
setTimeout("$('img').each(function() {$(this).show();});", 2000);
});
}
});

No stvar je povsem preprosta, ob KeyCode 17, ki je je char code za CTRL se zavrtimo po vseh slikah, te skrijemo in čez 2 sekundi prikažemo nazaj s pomočjo setTimeout.

P.S.: V tem času je že Klemen podal drugi komentar …

Evo dodajam pa še drug način, da slike nazaj prikažeš, ko ni več pritisnjen CTRL.

$(document).keydown(function(e) {
if(e.keyCode == 17) {
$('img').each(function() {
$(this).hide();
});
}
});
$(document).keyup(function(e) {
if(e.keyCode == 17) {
$('img').each(function() {
$(this).show();
});
}
});

Primer viden tukaj.

Na žalost ni mogoče prožiti akcije na pritisk tipke Print Screen, lahko pa jo prožimo ob keyup, tako je tukaj še primer, kako uporabnika obvestimo o zaščiti fotografij. :D