3 Semplici ed utili tutorial per jQuery


Oggi con questo articolo stileremo una lista di 10 semplici ed utili esempi dell’ormai nota libreria di Javascript, jQuery. Con queste librerie, realizzare effetti complessi, diventa veramente banale.

1. Tooltip con jQuery

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:

  1. Semplice tooltip
  2. Testo con anteprima immagine
  3. Thumbnail con anteprima ingrandita

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente dovete inserire il seguente codice tra i all’interno dei tag head, tra <script type=”text/javascript”> //il codice qui </script>, oppure realizzate un nuovo file .js incollate il seguente codice ed importatelo con <script src=”funzione.js” type=”text/javascript”></script>

[code]
this.screenshotPreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’screenshot’><img src=’"+ this.rel +"’ alt=’url preview’ />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */

xOffset = 10;
yOffset = 30;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’preview’><img src=’"+ this.href +"’ alt=’Image preview’ />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
[/code]

Step 3

Come nello Step 2, importate quest’altra funzione:

[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]

Step 3

Come nello Step 2, importate quest’altra funzione:

[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]

Step 4

Adesso i tooltip sono funzionanti, occorre solo inserire il seguente file nel nostro foglio di stile CSS.

[code]
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
[/code]

Step 5

Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:

Classico tooltip con testo

[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]

Testo con anteprima immagine

[code]
<a href="image.jpg" class="preview" 2="2="2="title="Great""" 3="looking" 4="4="4="landscape">Roll""" 5="over" 6="to" 7="preview</a>" 8="[/html" language=">"]
<h5>Immagine con tooltip di anteprima</h5>
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>
[/code]

Source


2. Horizontal Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente inserite tra i tag il seguente codice:

[code]
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
[/code]

Step 3

Diamo un tocco di classe con i CSS (in realtà questi sono essenziali al funzionamento dello script):

[code]
ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
[/code]

Step 4

Infine richiamiamo tutte le funzioni con il seguente codice:

[code]
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
[/code]

3. Menu Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

Inserite il seguente codice tra i tag del vostro sito internet.

[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

Step 2

Successivamente inserite tra i tag la segueente funzione:

[code]
function initMenus() {
$(‘ul.menu ul’).hide();
$.each($(‘ul.menu’), function(){
$(‘#’ + this.id + ‘.expandfirst ul:first’).show();
});
$(‘ul.menu li a’).click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;

if($(‘#’ + parent).hasClass(‘noaccordion’)) {
$(this).next().slideToggle(‘normal’);
return false;
}
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
if($(‘#’ + parent).hasClass(‘collapsible’)) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
}
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
[/code]

Step 3

Inoltre per rimuovere un bug del buon vecchio IE, utilizziamo i conditional tag:

[code]
<!–[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]–>
[/code]

Step 4

Adesso decoriamo il nostro menu, aggiungendo il seguente codice nel nostro foglio di stile.

[code]
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}

ul.menu a {
display: block;
text-decoration: none;
}

ul.menu li {
margin-top: 1px;
}

ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}

ul.menu li a:hover {
background: #000;
}

ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}

ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
[/code]

Step 5

Adesso richiamiamo tutte le funzioni con il seguente codice html:

[code]
<ul id="menu1" class="menu">
<li style="position: static;">
<a href="#">Weblog Tools</a>
<ul style="display: block;">
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>

<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Programming Languages</a>
<ul style="display: none;">
<li><a href="http://www.php.net/">PHP</a></li>

<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>

</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco’s blog (no submenu)</a></li>
<li style="position: static;">
<a href="#">Cool Stuff</a>
<ul style="display: none;">
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>

<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Search Engines</a>
<ul style="display: none;">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>

<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
[/code]

Nota bene

Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili:

  1. menu
  2. menu expandfirst
  3. menu noaccordion
  4. menu collapsible expandfirst

Source

jQuery Tools: la libreria di widget che mancava

Vi segnalo jQuery Tools una bella libreria di widget che potrebbero estendere le funzionalità del vostro sito web. Si tratta in verità di un plugin di jQuery da includere nell’header delle vostre pagine e che vi consento di creare: tab, tooltip, expose, overlay, scrollable, flashembed e ovviamente tutte le combinazioni dei precedenti.

jquery-tools

Continua a leggere

Restyling di Dynamick: un aggiornamento necessario da tempo

Carissimi lettori, come vedete da oggi è online il nuovo Dynamick, giunto, nel corso della sua vita, al terzo restyling. Questa volta ho optato per un tema preconfezionato: si chiama Convergence. Da tempo cercavo un tema di questo tipo, molto simile graficamente allo stile dei siti del circuito Envato (PSD Tuts, Net Tuts, ecc) che mi piace moltissimo.

Dynamick 3

Ci sono ancora alcuni problemi da sistemare (traduzioni in italiano, riorganizzazione del menu, ottimizzazione del codice, effetti jQuery), ma il grosso è stato fatto.

Il nuovo restyling arriva assieme all’aggiornamento di WordPress all’ultimissima versione. Da troppo tempo infatti non lo aggiornavo più e molti plugin non potevano più essere installati. Questo mi fornisce più sicurezza e solidità del sistema, più usabilità del pannello di gestione e la possibilità di tenere WordPress aggiornato (infatti ora si aggiorna da solo!!!).

L’ultimo motivo che mi ha convinto definitivamente a cambiare è la possibilità di installare il plugin WP Super Cache per diminuire il carico sul server che oramai era in ginocchio dal troppo lavoro richiesto. Nei prossimi giorni spero di notare una notevole riduzione del carico di lavoro, soprattutto nel motore di MySql che nei giorni scorsi era moribondo.

Ditemi pure cosa ne pensate, accetto qualsiasi vostra critica a riguardo (sono disposto a ripristinare anche il vecchio tema se necessario!!!).

12 Trucchi da sapere per usare jQuery

Quando si scrive in jQuery si impara facilmente che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare sempre più scrivendo meno righe di codice per ottimizzare il sorgente. Spesso si cerca di trovare anche la strada più elegante per risovere un problema. Ecco quindi un elenco di trucchi che potrebbero esservi utili

trucchi per jquery

1. jQuery cheatsheets

Prima di tutto è sempre meglio avere qualche cheatsheet sotto mano. In rete ne ho trovati 3:

jQuery Cheatsheet da ColorCharge
jQuery Cheatsheet from ColorCharge WebBlog

jQuery Cheatsheet da Gscottolson WebBlog
jQuery Cheatsheet from Gscottolson WebBlog

jQuery Cheatsheet da From Far East WebBlog
jQuery Cheatsheet from From Far East WebBlog

2. Una scorciatoia per jQuery: $(document).ready

Questo è un ottimo suggerimento, perchè non mi ricordo mai come si scrive questo:

$(document).ready(function() {  
//write your code here
}

Si può scrivere equivalentemente attraverso una funzione anonima, sono funzionalmente uguali:

$(function(){
//write your code here
}); 

3. Aprire in una nuova finestra

L’attributo "target" nei collegamenti "<a>" non è un attributo valido per lo standard STRICT W3C. Possiamo aggirare il problema utilizzando l’attributo REL e un po’ di codice jQuery per ricreare l’attributo TARGET in modo dinamico mantendo sempre valido il nostro sorgente HTML. E’ troppo semplice per funzionare, eppure è così:

	$('a[rel=external]').attr('target','_blank');
<a href="http://www.queness.com" rel="external">Queness in new window</a>

4. Rendere l’intero LI cliccabile

Questo trucco è veramente utile quando usi i punti elenco (LI) per creare menu. Quello che fa è rendere cliccabile l’intera area coperta dal LI (anche fuori da eventuali link A) e cerca automaticamente l’indirizzo di destinazione  tra i link contenuti nel LI.:

	$("ul li").click(function(){
	  //get the url from href attribute and launch the url
	  window.location=$(this).find("a").attr("href"); return false;
	});
<ul>
	<li><a href="home">home</a></li>

	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

5. Cambiare tra diversi fogli di stile

Vuoi avere design diversi all’interno del vostro sito e devi cambiare dinamicamente tra diversi fogli di stile. Puoi farlo con jQuery facilmente:

	$("a.cssSwitcher]").click(function() {
		//swicth the LINK REL attribute with the value in A REL attribute
		$("link[rel=stylesheet]").attr({href : this.attr(rel)});
	});
<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 

<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

6. Disabilitare il click destro del mouse

Qualche nostro cliente ci chiede di poter disabilitare sul loro sito il click destro del mouse per occultare le funzioni messe a disposizione o per creare un proprio menu contestuale. Ecco come farlo in jQuery:

$(document).bind("contextmenu",function(e){
	//you can enter your code here, e.g a menu list
		
	//cancel the default context menu
    return false;
});

7. Leggere le coordinate x e y del puntatore del mouse

Questo script catturerà le coordinate x e y del puntatore del mouse e le mostra sulla pagina.

$().mousemove(function(e){
	//display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
<p></p>

8. Impedire il comportamento di default

Può capitare di usare il tag A per altri scopi che condurre l’utente ad un link. Succede però che quando si clicca, il browser ci porta ad inizio pagina perchè l’attributo HREF è valorizzato con il cancelletto (#). Per risolvere questo problema, dobbiamo disabilitare il comportamento di default dei link A:

$('#close').click(function(e){  
     e.preventDefault();
}); 

/* OR */

$('#close').click(function(){  
    return false;
}); 
<a href="#" id="close"></a>

9. Il bottone "torna su"

Un utile bottone "torna su" è possibile implementarlo attraverso uno specifico plugin. Con scrollTo si creerà un simpatico effetto di risalita della pagina. Scarica il plugin jQuery scrollTo
$(‘#top’).click(function() {
$(document).scrollTo(0,500);
}

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

10. Colonne di altezza uguale

Questo script è abbastanza utile anche se non ho ancora avuto modo di provarlo. Se vuoi colonne della stessa altezza, questo script risponderà alle vostre esigenze:

$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
	//Get all the element with class = col
	col = $(col);
	
	//Loop all the col
    col.each(function() {        
	
		//Store the highest value
		if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
	
	//Set the height
    col.height(maxHeight);
}
<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>

</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>

11. Scrivere il vostro selettore personale

Questo è un trucco per utenti avanzati:

//extend the jQuery functionality
$.extend($.expr[':'], {  
	
	//name of your special selector
    moreThanAThousand : function (a){
		//Matching element
		return parseInt($(a).html()) > 1000;
	}
});  
	
	
$(document).ready(function() {
	$('td:moreThanAThousand').css('background-color', '#ff0000');
});

12. Ridimensionamento del font

Questo trucco si trova spesso nei siti e vi permentte di ridimensionare il corpo del carattere per adattarlo meglio alle vostre esigenze di lettura:

$(document).ready(function(){

	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');

	// Reset Font Size
	var originalFontSize = $(section).css('font-size');  
		$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});
	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});
  
	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});
<a class="increaseFont">+</a> | 

<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>

<div class="section2">This one is adjustable too!</div>

(tratto da Queness)

Il miglior slideshow in jQuery che abbia mai visto

S3Slider è un plugin per jQuery che presenta una lista di immagini in sequenza, in stile presentazione PowerPoint (gli amici linuxani non si scandalizzino con questo parallelo Winzoz). Per essere più chiari S3Slider consente di creare degli slideshow di qualità eccelsa.

slideshow per photogallery in jquery

Plugin di questo tipo ne esistono in rete a decine, ma credo di potermi sbilanciare a dire che siamo di fronte al migliore in circolazione. Le immagini sfumano in sequenza con un gradevole effetto di dissolvenza. Il punto forte è però la didascalia dell’immagine, che viene mostrata in sovraimpressione attraverso un effetto a tendina. Si può personalizzare la posizione del testo in alto, in basso, a destra o a sinistra.

Sexy Curl, un plugin jQuery per voltare pagina

sexy curl, voltare pagina, jquery plugin

Sexy Curl è un simpatico plugin per jQuery che crea un simpatico effetto grafico per girare la pagina. In realtà viene creato un piccolo lembo di pagina che l’utente può trascinare per vedere cosa c’è sotto. Il plugin simula lo sfogliare di una pagina ed è posizionato solitamente, su diversi siti, in alto a destra. E’ utile per mostrare banner pubblicitari o segnalare qualche notizia di rilievo.

Fino a poco tempo fa si utilizzava PagePeel, un oggetto flash che creava lo stesso effetto ma appunto, era necessario caricare un Flash. Sexy curl è invece molto leggero, facilmente personalizzabile e abbastanza fluido. Potete osservare il funzionamento del plugin guardando la simpatica demo che ha creato l’autore e che mostra il codice HTML che "sta sotto" alla pagina.

La licenza è la MIT licence e, riportando le parole dell’autore, vuol dire che potete farne tutto quello che volete:

That means you can do whatever you damn well please with it.
You can copy, modify, merge, publish, distribute, sublicense, and/or sell copies
You can even print it out and wear it as a hat if you like.

jQuery impera: 3 plugin indispensabili

plugin di jquery

Tra tutti i framework javascript, il mio preferito è jQuery che è molto intuitivo da utilizzare e soprattutto ricco di plugin che ogni giorno vengono sfornati dalla rete. In questo articolo ne vorrei segnalare 3 degni di nota.

jqGrid

Questo plugin ci permette di creare tabelle interattive, in stile Ms Access.

jqgrid

Tra le tante che ho visto, credo di aver finito la mia ricerca, in quanto jqGrid è estremamente completo e ricco di funzionalità. La messa in funzione è semplicissima, simile al funzionamento di qualsiasi altro plugin. Si crea un markup "<table id=’mytable’>" all’interno del "<body>" e poi si richiama la funzione jqgrid su quell’elemento:

$('#mytable').jqGrid( options )

Le options danno una grande flessibilità alla resa della tabella. Tra le tante capacità di jqGrid, segnalo la possibilità di interagire lato server con script PHP, per creare un sistema completo di gestione dati, con tanto di modulo (creato in automatico) per l’inserimento e modifica di intere entry sul database.

La documentazione è eccezionalmente completa e gli esempi sono sublimi. Guardate per credere!

jMaps

Questa volta si tratta di un cosidetto wrapper di Google Maps, ovvero una libreria che rimappa le API di Google Maps in nuovi comandi in stile jQuery al 100%.

jMaps

A essere sinceri jMaps non introduce nulla di nuovo, ma garantisce uniformità e pulizia del codice javascript perchè il codice sarà farcito solamente di comandi jQuery. Dopo aver fatto il "<div>" nel body della pagina html, il semplice comando seguente, creerà la mappa:

$('#map').jmap('init')

Semplice no? Documentazione ed esempi sono ben fatti.

jQuery File Tree

jQuery File Tree è un plugin che crea file browser in AJAX. La potenza di File Tree risiede nella sua flessibilità e semplicità: con una sola riga di codice javascript è possibile creare un’applicazione completa per la navigazione dei file da una fissata cartella in avanti sul nostro server.

jQuery File Tree

Attualmente sono già disponibili i connettori PHP, ASP, ASP.NET, JSP e Lasso, ovvero gli script server-side. Tra le caratteristiche di questo plugin da segnalare troviamo:

  • Produce XHTML semantico e valido
  • Completamente personalizzabile via CSS
  • Possibilità di adattare le icone dei file in base alla loro estensione
  • Usa AJAX per navigare all’interno delle cartelle
  • Facile da configurare e implementare
  • Include già i connettori per PHP e ASP.NET (C#)
  • Supporta connettori personalizzati
  • Possibilità di associare funzioni personalizzate sugli eventi di apertura/chiusura di una cartella
  • Velocità di chiusura/apertura delle cartelle modificabile
  • Supporta le animazioni easing
  • Apertura delle cartelle in modalità singola o multipla
  • Messaggio di caricamento personalizzabile.

Cosa volete di più? Questa è la demo e questa la documentazione.

Altre segnalazioni

Segnalo questo ottimo blog su jQuery, LearningjQuery,  dedicato a chi vuole imparare ad usare questo bel framework. Inoltre segnalo anche questa libreria javascript, TypeFace,  che trasforma blocchi di testo in immagini. L’effetto finale è da vedere!

JCrop, ritagliare le immagini con JQuery

Il Javascript domina il web, soprattutto dopo la nascita di framework quali JQuery. Le applicazioni che lo usano sono sempre più complesse. L’ultimo nato è Jcrop, un plugin per JQuery che permette agli sviluppatori di implementare agevolmente un sistema per ritagliare le immagini online, “crop” appunto. Il sistema è completamente visuale, interattivo e del tutto simile al cropping di Photoshop.

Per vederlo all’opera, sul sito troverete alcuni esempi di come funziona. E’ chiaro che se viene messo in coppia con la libreria GD di PHP, il gioco è fatto perchè sarà  possibile salvare lato server le immagini ritagliate.

Jcrop, ritagliare le immagini

Ecco alcune caratteristiche del plugin:

  • Jcrop è molto piccolo (circa 9KB compressi)
  • Look and feel del tutto simili alle applicazioni desktop (vd. Photoshop)
  • Compatibile con i principali browser, compreso IE6+
  • E’ possibile utilizzare i tasti veloci
  • Possibilità  di mantenere le proporzioni dell’immagine nell’area di taglio
  • Sono supportati i fogli di stile
  • Le API includono metodi per l’animazione

Jcrop è composto da 3 file, ma nello ZIP troverete anche i file di demo e il codice php.