Archivi tag: jquery

Mappe vettoriali con jQuery

Pubblicato il da
Rispondi

Se la necessità del momento è di interagire con una mappa vettoriale, gestendone i vari click / mouseenter, questo plugin è una vera manna.

Stiamo parlando di JQVMap, un plugin che renderizza nel DOM le mappe vettoriali richieste attraverso poche righe di codice jQuery.

Per il suo funzionamento utilizza alcuni file SVG ( Scalable Vector Graphics ) e ne garantisce la compatibilità totale con IE9, Firefox, Chrome, Opera e Safari.

Ecco un esempio di codice per produrre una mappa del territorio europeo:


<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.europe.js"></script>

<script>
jQuery('#vmap').vectorMap({
    map: 'europe_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverColor: '#999999',
    enableZoom: false,
    showTooltip: false
});
</script>

<div id="vmap" style="width: 600px; height: 400px;"></div>

Risultato finale:

Eccovi il link alla homepage del plugin: http://jqvmap.com/

Curtain.js: plugin jQuery per gestire alcune transizioni in pagina

Pubblicato il da
Rispondi

Curtain.js è uno di quei plugin che posso tornare molto utili in alcuni casi.
Poniamo il caso di dover mostrare un pannello che, normalmente, rimane nascosto alla vista del visitatore: ecco, curtain.js può fare al caso nostro.

Realizzato da Victor Coulon ( seguilo su Github o su Twitter ), il plugin permette di gestire, mostrare, nascondere e scrollare alcuni pannelli, contenenti foto, testi e tutto quello che può servire.

Pur essendo molto snello come codice, ho trovato ( opinione personale ) un pelo di lentezza nello scroll di contenuti grafici tipo foto fullscreen, mentre il ritorno con testi e foto piccole è eccellente.
La compatibilità con altri script è un po’ borderline: ho riscontrato, per esempio, che utilizzando qualche ChromeApp, queste ultime si schiantano allegramente direttamente sulla Home di curtain.js.

Quindi: usare, ma ( per quanto mi riguarda ) con moderazione.

Come per tutti i plugin, vale di più la pena di andare sul sito ufficiale e testare con mano il funzionamento.