lorenzo

jQuery: dare il background a una singola parola, selettore contains

 JQuery  No Responses »
Feb 172013
 

Questo breve esercizio ha come obiettivo quello di evidenziare una parola all’interno di un testo, selezionando fra i vari tag quello che contiene il nostro elemento target.

Partendo da questo html andremo a colorare il background della parola blue:


<div>Questo è un testo normale.</div>
<div>Questo testo contiene <i>una parola blue</i></div>
<div>Questo testo non verrà colorato</div>

Come prima cosa tramite jQuery selezioneremo il div che contiene la parola blue:


var selected = $('div:contains("blue")');

successivamente si tratterà di separare le singole parole e avvolgere in un tag span, in modo da poter poi applicare il background solo alla parola desisderata


selected.html($.map(selected.html().split(' '), function(n) {
return '<span>' + n + '</span> ';
}).join(''));

Ovvero lavorando sull’html dell’elemento selezionato, facciamo lo split usando come separatore lo spazio, su ogni elemento mettiama un tag span intorno e poi lo riuniamo al nostro codice.

questo punto il gioco è faatto poiché basta applicare la stessa soluzione che abbiamo usato per selezionare ma questa volta solo allo span e quindi applicare il css desiderato:


$('span:contains("blue")').css('background', 'blue');

L’esempio

 

 Share

Angular data-binding

 javascript  No Responses »
Feb 152013
 

anguar.js implementa il data-binding in modo automatico,  cioè è  un sistema di aggiornamento della vista ogni volta che il modello cambia, così come l’aggiornamento del modello ogni volta che la vista cambia. Ciò è molto comodo perché elimina la manipolazione DOM dall’elenco delle cose che dobbiamo fare.

Un esempio è dato dal binding che possiamo creare tra un campo di input testuale e un tag h1 dove visualizzeremo il contenuto:


<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div>
<label>Nome:</label>
<input type="text" ng-model="tuoNome" placeholder="Inserisci il tuo nome qui">
<hr>
<h1>Ciao {{tuoNome}}!</h1>
</div>
</body>
</html>

L’esempio

 Share

jquery: tooltip

 JQuery  No Responses »
Feb 132013
 

Realizzare un tooltip oggi è veramente semplice dato che questa funzionalità è stat integrata in jQuery UI, e questo, di base, ci semplifica molto il lavoro.

Ovviamente dovremo collegare jquery, jquery ui  e il tema di nostro gradimento. Dopodiché nella nostra pagina inseriremo un div appena formattato con un css semplicissimo e che conterrà nell’attributo title il testo da visualizzare nel css.


<style>
#box{ width:320px; height:240px; border:1px solid #000;}
</style>

<div id="box" title="Testo da visualizzare nel tooltip"></div>

L’attivazione della funzionalità avviene nel solito modo di jquery UI: $(selettore).metodo, ovvero, nel nostro caso, $(‘#box’).tooltip8):

ma noi arrichiremo l’esperienza aggiungendo un effetto fade di transizione e gestendo la durata:


$("#box").tooltip({ hide: { effect: "fade", duration: 1000 } });

L’esempio

 Share

jQuery: emulare il selettore hover

 JQuery  No Responses »
Feb 112013
 

Proviamo a emulare il selttore hover del css con jQuery: nella nostra pagina inseriremo un semplice div al quale cambieremo il background all’hover per poi ripristinare lo stato di partenza.

L’html sarà semplicissimo un solo dive con un minimo css per vederlo nella pagina:


<style>
#box{ width:320px; height:240px; border:1px solid #000;}
</style>

<div id="box"></div>

Gestiamo ora l’hover sul nostro box con appunto il metodo hover(), la prima funzione servirà ad applicare lo stile dell’hover, la seconda funzione ripristinerà la situazione di partenza o in ogni caso lo stato post-hover


$('#box').hover(
function(){$(this).css({'background-color':'#F90'});},
function(){$(this).css({'background-color':'#FFF'});}
);

L’esempio