jQuery de/seleziona tutti i checkbox

2
luglio

Per esigenza mi è capitato di creare dei tasti per un form con funzione di selezionare e deselezionare tutti i chackbox presenti (select all, deselct all, checkbox). Fare una ricerca in google per questa funzione porta a grossolani script in javascript base, con un totale di molte righe di codice.
Perciò meglio creare una funzione Light su misura con jQuery, ecco come:

Scrivo il mio form,
<form id=”mio_form” >
<input type=”checkbox” name=”‘opzione1′” />
<input type=”checkbox” name=”‘opzione2′” />
<input type=”checkbox” name=”‘opzione3′” />
</form>

Creo i miei tasti di selezione e deselezione,
<a href=”#seleziona” class=”select-all”>seleziona tutti</a>
<a href=”#deseleziona” class=”deselect-all”>deseleziona</a>

Creo la funzione Jaascript/jQuery da inserire nell’head,
$(document).ready(function(){
$(“a.select-all”).click(function(){
$(“#mio_form input[type=checkbox]“).attr(‘checked’, true); });
$(“a.deselect-all”).click(function(){
$(“#mio_form input[type=checkbox]“).attr(‘checked’, false); });
});

jQuery background-image changer

2
ottobre

Nuovo sito, nuova feature studiata apposta, con jQuery e le API che intervengono sui CSS sono riuscito a costruire un semplice “background changer”, in modo da cambiare la fotografia di fondo al <body>.
Guardiamo il codice ovviamente includiamo nell’head il jquery.js:

HTML
<div class=”bg 1″>1</div>
<div class=”bg 2″>2</div>

CSS
body {
background: #fff url(skin/bg0.jpg) center top no-repeat fixed;
}
.bg {
position:realtive; float:left;
height: 19px; width: 19px;
text-align:center; line-height: 19px;
margin: 0px 1px 1px 0px;
background: #000; color: #fff;
cursor:pointer;
}

JAVASCRIPT
$(document).ready(function(){
$(“.bg.1″).click(function(){
$(“body”).css(‘background-image’,'url(skin/bg1.jpg)’);
});
$(“.bg.2″).click(function(){
$(“body”).css(‘background-image’,'url(skin/bg2.jpg)’);
});
});

Ora non mi resta che implementare i coockie (o con jquery.coockie.js plugin o direttamente con php) per conservare la scelta del background, se qualcuno ha idee per aggiunte, correzioni e o revisioni ecc, liberissimo di condividerle.

flickr Instant Zoom

14
luglio


Flickr introduce una nuova funzione di zoom rapido, per andare a leggere particolari nascosti delle foto.
Guardando lo scheletro di flickr trovo un enorme programmazione in js e framework derivati vari, probabilmente estensioni YUI (Yahoo User Interface) o, come sospetto, funzioni adHoc.
Beh la nuova funzione introdotta permette di evitare un step di click per raggiungere la foto in alta risoluzione, mantenendo una visione globale della foto ma appunto permettendo la visione di particolari con una sorta di lente.

12