Nonostante non sia d’accordo con l’idea di utilizzare un framework esterno “per intero” nello sviluppo di HTML Mobile App, sono comunque convinto che attingere CSS e stili da alcuni di essi possa notevolmente incrementare la qualità del prodotto finale e velocizzare il flusso di lavoro, evitando di reinventare ogni volta la ruota.

In un precedente articolo avevo parlato di 8 mobile framework per la realizzazione di applicazioni mobile in HTML5, CSS3 e Javascript, in cui ho inserito anche Ratchet, che offre stili CSS3 molto puliti ed un markup in linea con le moderne specifiche HTML5.

Dopo che lo scorso mese nel blog di Twitter Bootstrap è stato annunciato che Ratchet 2.0  farà parte d’ora in poi dell’organizzazione Bootstrap, ho deciso di rilasciare l’esempio di una semplice HTML5 Mobile App sviluppata con Backbone.js usando gli stili (e solo gli stili) di questa nuova versione di Ratchet, la quale quale offre 3 ottimi skin di partenza: quello di base, quello stile iOS, e quello stile Android.

Cosa desideriamo di meglio?

L’intento è quello di realizzare una view iniziale con un header, un sub-header contenente un input di ricerca, ed il contenitore per mostrare una lista di articoli; grazie all’input di ricerca l’utente può filtrare i contenuti della lista.

L’applicazione è quindi composta da 3 backbone view:

• la prima rappresenta la schermata principale contenente header e sub-header
• la seconda rappresenta la view della lista
• la terza rappresenta ogni articolo che dovrà essere inserito nella lista

Come nello scorso esperimento, lavoreremo sempre con model e collection per definire rispettivamente il modello di articolo e la collezione per la lista degli articoli.

Ecco lo schema del funzionamento dei vari componenti che formano la nostra HTML5 Mobile App:

---

Semplice #HTML5 #MobileApp con #Bootstrap #Ratchet e #Backbonejs
Click To Tweet

---

Trovi le DEMO dei 3 diversi stili ed il DOWNLOAD alla fine di questo articolo!

HTML5 mobile app: impostazione del documento

Come prima cosa andiamo a scaricare lo zip di Ratchet dal sito ed includiamo nel nostro documento solo gli stili CSS ed il font per le icone. Per usare lo stile base dovremo includere solo il file ‘ratchet.css‘ o ‘ratchet.min.css‘, mentre per gli stili iOS o android dovremo aggiungere anche i rispettivi file ‘ratchet-theme-ios.css‘ o ‘ratchet-theme-android.css‘.

Ecco l’esempio per l’utilizzo del tema iOS:

<!-- includiamo gli stili di base di  Ratchet.css  -->
<link href="css/ratchet/css/ratchet.css" rel="stylesheet">

<!-- includiamo gli stili iOS di  Ratchet.css  -->
<link href="css/ratchet/css/ratchet-theme-ios.css" rel="stylesheet">

Poi inseriamo nel documento le varie librerie javascript, prima della chiusura del tag </body> in modo da velocizzare il caricamento della pagina:

<!-- Includo gli scripts in fondo alla pagina per velocizzarne il caricamento -->
<script src="js/jquery-1.10.2.min.js"></script>
<!-- Includiamo anche underscore.js libreria a cui si appoggia backbone.js -->
<script src="js/underscore.js"></script> 
<script src="js/backbone.js"></script>    
<!-- il file javascript del nostro esperimento-->
<script src="js/demo.js"></script>

Definizione di model e collection

Vediamo come definire il model e la collection deli articoli:

//definiamo il modello di un articolo
var ArticleModel = Backbone.Model.extend({

    // all'inizializzazione di ogni modello creiamo la relativa anteprima
    initialize: function(){
        var article = this.get("article");
        this.set("preview", article.substr(0, 70)+"...");
    },

    // Attributi predefiniti per il modello, che vengono usati 
    //se non passati al momento dell'inizializzazione    
    defaults: {
        id: new Date().getUTCMilliseconds(), //impostiamo un id univoco in base alla data 
        title: "Nessun titolo",
        article: "",
        image: false,
        createdat: new Date()
    } 
});

//definiamo la collection per la lista degli articoli
var ArticleList = Backbone.Collection.extend({ 
    //Impostiamo la referenza al model per questa collection.
    model: ArticleModel,

    //funzione che restituisce il numero seriale per l'id di ogni nuovo articolo
    nextId: function() {
        if (!this.length) return 1;
        return this.first().get('test') + 1; 
    },

    //la funzione per la ricerca, che restituisce solo i models degli articoli
    //che contengono il termine ricercato nel titolo (la usaeremo per la ricerca)
    search : function(term){
        if(term == "") return this;

        var pattern = new RegExp(term,"gi");
        return _(this.filter(function(data) {
            return pattern.test(data.get("title"));
        }));
    }
});

Le view

Ecco come si presenta la view principale:

//definiamo la view principale della nostra app
var StartView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un oggetto dal tag 'section'
    tagName:  "section",

    //settiamo la classe che deve avere il tag 'section'
    className: "page-wrapper",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#startview-template",

    initialize: function() {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //inizializziamo la view della lista degli articoli
        this.resultsView = new ListView({collection: this.collection});
    },

    //funzione che genera il markup di questa view
    render: function () {
        this.$el.html(this.template()); //genero l'html di questa view 
        //inserisco l'html della view dei risultati ti ricerca nella div con classe '.content' presente in questa view
        this.$('.content').append(this.resultsView.render().el); 
        return this;
    },

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        //evento //selettore    //funzione da eseguire
        "keyup .search-term":    "search",
        "keypress .search-term": "onkeypress"
    },

    //funzione che richiama il methodo 'renderList' della view della lista ad ogni keyup sull'input di ricerca
    search: function (e) {
        var term = $(e.currentTarget).val();
        //se il termine non è vuoto allora richiamo il 'renderList' passando i dati filtrati,
        //altrimenti richiamo il render per mostrare la lista intera
        if(term!="") 
            this.resultsView.renderList(this.collection.search(term));
        else
            this.resultsView.render();
    },

    onkeypress: function (e) {
        if (e.keyCode === 13) { // preveniamo il normale evento di invio con il pulsante 'Enter'
            e.preventDefault();
        }
    }
});

Avremmo potuto anche “unificare” entrambe le view (quella principale e quella del contenitore della lista) in un unica view, ma lasciandole separate riusciamo ad ottenere un progetto più scalabile e dinamico: potremmo per esempio inserire nell’elemento ‘.content‘ della view principale qualsiasi altra view, oltre a quella della lista. Ciò ci permetterebbe di usare la view principale per più di uno scopo.

Ora vediamo la view del contenitore della lista, che sarà applicata appunto all’interno dell’elemento DOM con classe ‘.content‘ della view principale:

//view per la lista degli articoli (viene inizializzata all'interno della view 'StartView')
var ListView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un 'ul'
    tagName:'ul',

    //questa view non ha bisogno di template, perchè viene popolata con le varie view 'ListItemView'
    //relative ad ogni model presente nella collection

    //impostiamo la classe che deve avere il contenitore di questa view
    className:'table-view',

    initialize:function () {

    },

    //funzione per mostrare la lista completa all'avvio dell'ìapplicazione
    render : function(articles){
        var _this = this;   
        this.$el.empty(); 

        //per ogni elemento della collection creiamo una nuova view
        this.collection.each(function(task){
            var view = new ListItemView({ model: task });
            _this.$el.append(view.render().el);
        });
        return this;
    },

    //funzione che viene richiamata al momento della ricerca, alla quale vengono passati i model che 
    //soddisfano la ricerca
    renderList : function(articles){
        var _this = this;        
        this.$el.empty(); 

        //anche qui per ogni model creo la relativa view
        articles.each(function(task){
            var view = new ListItemView({ model: task });
            _this.$el.append(view.render().el);
        });
        return this;
    }

});

Questa view si preoccupa di mostrare inizialmente tutti i model (quindi gli articoli) presenti all’interno della collection, mentre tramite il metodo ‘renderList‘ mostra solamente la lista di articoli che viene passata come parametro. Tale metodo viene richiamato dalla view principale al momento in cui si verifica l’evento ‘keyup‘ sull’input di ricerca.

Per mostrare i risultati al suo interno, la view della lista provvede alla creazione di una nuova view ‘ListItemView‘ per ogni model degli articoli, sia all’interno del metodo ‘render‘ che del metodo ‘renderList‘:

//view per ogni elemento da inserire nella lista dei risultati degli articoli (viene inizializzata all'interno della view 'ListView')
var ListItemView = Backbone.View.extend({

    //il tag da usare per il contenitore del markup
    tagName:"li",

    //la classe da associare al contenitore del markup
    className: "table-view-cell",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#listitemview-template",

    initialize:function () {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //se il model associato subisce delle modifiche allora richiamiamo il render per aggiornare il markup 
        //(non usato in questa demo)
        this.model.on("change", this.render, this);
        //se il model associato viene eliminato, allora richiamiamo la funzione 'close' che ne rimuove il 
        //relativo DOM dal documento (non usato in questa demo)
        this.model.on("destroy", this.close, this);
    },

    //genriamo il markup passando al template compilato i dai del model dell'articolo in formato JSON
    render:function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    close: function(){
        //elimina il DOM di questa view dal documento ed annulla gli eventi applicati nella funzione 'initialize'
        this.remove();
    }

});

I template e la generazione del markup

Come al solito utilizziamo il sistema di templating di underscore.js per la generazione del markup di ogni view, considerando che la view della lista non ha bisogno di un template, perché come abbiamo visto il markup da inserire al suo interno è costituito dalle varie view degli articoli.

Per avere maggiori informazioni sui sistemi di Javascript templating, ottimi per progetti di tipo “Single-Page-Application“, ti consiglio di leggere questo mio precedente articolo:

• I sistemi di Javascript templating e le migliori librerie

Vediamo quindi i due template da inserire all’interno del documento:

<!-- template per la view di ogni elemento all'interno della lista dei risultati di ricerca (ListItemView su demo.js) -->
<script type="text/template" id="listitemview-template">

	<a href="#" data-id="<%= id %>" class="push-right">
	    <span class="badge">
	    	<%=createdat.getDate()%> / <%=createdat.getMonth()+1%>
	    </span>
	    <%if(image){%>
		<img class="media-object pull-left" src="images/<%=image%>" />
		<%}%>
	    <div class="media-body">
	        <%= title %>
	        <p><%= preview %></p>
	    </div>
	</a>

</script>

<!-- template per la view del contenuto iniziale  (StartView su demo.js) -->
<script type="text/template" id="startview-template">

	<header class="bar bar-nav">
		<button class="btn btn-link btn-nav pull-left" onclick="window.location.href='http://www.upcreative.net/iscriviti-alla-newsletter/'">
		    Altre guide
		</button>
	    <h1 class="title">Ultimi Articoli</h1>
	    <button class="btn btn-link btn-nav pull-right" onclick="window.location.href='http://www.upCreative.net'">
		    upCreative.net
		</button>
	</header>
	<div class="bar bar-standard bar-header-secondary">
	    <input class="search-term" placeholder="Cerca articoli" type="text"/>
	</div>
	<div class="content"></div>

</script>

Avviamo l’applicazione

Una volta impostati tutti i componenti necessari, passiamo all’avvio dell’applicazione, inizializzando una nuova collection per gli articoli con dei dati iniziali:

$(function(){

	//creiamo una nuova istanza per la collection degli articoli con 4 models iniziali
    var articles = new ArticleList([
        {
            title: "App su upCreative.net",
            image: "1.jpg",
            article: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            title: "Secondo articolo su upCreative.net",
            image: "2.jpg",
            article: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"
        },
        {
            title: "Articolo senza immagine 3",
            image: "3.jpg",
            article: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quarto articolo sulla  lista",
            image: "4.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quinto articolo sulla  lista",
            image: "5.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Sesto articolo sulla  lista",
            image: "1.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Settimo articolo sulla  lista",
            image: "2.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        }
    ]);
    //creiamo una nuova istanza per la view iniziale 
    //associandogli la collection appena creata e popolata
    var startView = new StartView({
        collection : articles
    });
    $("body").append(startView.render().el);

});

Backbone.js e Ratchet HTML5 mobile app: il risultato

Vediamo il risultato live nei 3 skin differenti offerti da Ratchet:

Stile di base

Stile di iOS

Stile di Android

Aiutami a condividere la risorsa per ottenere il download:

Twitter Bootstrap rappresenta un’ottima risorsa per tutti coloro che operano nell’ambito del web design, ed in rete si possono trovare migliaia di siti web e applicazioni realizzate con questo utilissimo framework. Se però da una parte fa senz’altro comodo potersi appoggiare ad un sistema solido ed aggiornato, crossbrowser e responsive, dall’altra è altrettanto vero che, in un mare di progetti “Bootstrap-based“, diventa  necessario distinguersi dagli altri.

Uno dei modi più utili per farlo è quello di implementare delle funzionalità originali sui componenti dell’interfaccia. In un precedente articolo ti ho mostrato come realizzare uno slide menu originale con animazioni CSS3, con tanto di progressive enhancement, ovvero quella tecnica che permette di applicare alle funzionalità dei componenti un miglioramento progressivo a seconda del browser, tramite CSS3:

• CSS3 slide panel: tutorial su come realizzare un menu stile mobile

Twitter Bootstrap Search Box

In questo articolo ti voglio mostrare come rendere originale ed accattivante l’esperienza di ricerca all’interno di un sito web o applicazione, sia essa desktop o mobile. Ciò che infatti realizzeremo è un search box con effetto slide-down, la cui caratteristica principale è quella di essere totalmente responsive, in quanto ci serviremo di Twitter Bootstrap.

Il risultato dell’esperimento potrà essere pertanto implementato anche su applicazioni Mobile, anche per il fatto che utilizzeremo delle animazioni CSS3 altamente performanti per i dispositivi che le supportano, mentre ricorreremo a quelle meno performanti nel caso di browser più datati.

---

Realizzare un search box #crossbrowser e #responsive con #TwitterBootstrap #webdesign
Click To Tweet

---

L’obiettivo è quello di far comparire dall’alto il campo di ricerca nel momento in cui viene cliccata l’apposita icona, in modo da coprire completamente la barra di navigazione. Quando si verifica l’evento “blur” del campo richiameremo invece l’effetto contrario, quello per nascondere il form.

A questo proposito ti consiglio di leggere:

• Performance CSS3: consigli per ottimizzare le prestazioni
• Web e mobile app fluide con Hardware Acceleration

Il markup HTML

Il codice HTML utilizzato per i vari elementi DOM è relativamente semplice; in particolare non facciamo altro che prelevarlo dalla documentazione del sito ufficiale di Twitter Bootstrap in modo da ricreare la navbar, applicando qualche piccola modifica:

<!-- menu di navigazione -->

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">	

  <div class="container-fluid">
    <div class="navbar-header">        

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="http://www.upcreative.net">upCreative.net</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li>
        	<a href="#" id="search-button">
            	<i class="fa fa-search fa-lg"></i> 
	        <span>Cerca</span>
        	</a>
        </li>
      </ul>          
    </div>
  </div>

  <!-- il form di ricerca, inizialmente nascosto -->

  <form class="navbar-form" action="#">
    <input type="search" placeholder="Cerca...">
    <a href="#" id="close-button"><i class="fa fa-times fa-lg"></i></a>
  </form>
</nav>

Ci serviamo quindi del tag <article> per rappresentare il contenuto della pagina (o applicazione):

<!-- Contenuto pagina web --> 

<article class="text-center">

	<h1>Twitter Bootstrap search box con animazioni CSS3</h1>	

	<a href="http://www.upcreative.net/" class="btn btn-primary btn-lg">Vai all'articolo del tutorial <i class="fa fa-chevron-right"></i></a>

	<p>
		Guarda la demo in un dispositivo mobile per poter poter visualizzare al meglio le 
		performance raggiungibili con la tecnica dell'<strong>accelerazione hardware</strong>.
	</p>

	<p style="margin-top:30px;">
		oppure consulta altri tutorial su upCreative.net:
	</p>

	<a href="http://www.upcreative.net/tutorial-css3-e-javascript-per-web-designers/" class="btn btn-primary"><i class="fa fa-globe"></i> upCreative.net</a>

</article>

Per quanto riguarda le icone di ricerca e di chiusura abbiamo usato quelle del framework Fontawesome, icon-font appositamente creato per Twitter Bootstrap.

Il codice CSS3

Vediamo ora il codice per il foglio di stile:

/* stili del form della navbar */
.navbar-form{

	/*
		posizioniamo il form di ricerca in modo assoluto ed impostiamo
		larghezza ed altezza al 100% in modo da coprire completamente la 
		navbar che lo contiente		
	*/
	position: absolute;
	padding:0;
	left:0;
	top:0;
	width:100%;
	height:70px;
	margin: 0;
}

Abbiamo impostato la grandezza del form che contiene il campo di ricerca (classe .navbar-form) in modo che avesse le stesse dimensioni della navbar, per far sì che quest’ultima venga interamente coperta al momento dell’azione di ricerca.

Aggiungiamo ora la definizione delle modalità di animazione:

.navbar-form{	
	/* 
		impostiamo ad all l"attributo scantenante" per l'effetto 
		di transizione, in modo da scatenarlo sia se viene modificato il 
		valore della proprietà 'top', che quello della proprietà 'transorm'.
		Grazie alla proprietà 'transform sarà' possibile rendere l'effetto 
		fluido e performante anche per i dispositivi mobile, 
		forzando la creazione dei layers grafici.
	*/
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	   	-ms-transition: all .3s;
		 -o-transition: all .3s;
		 	transition: all .3s;

	/*
		inizialmente nascondiamo fuori dallo schermo il form di ricerca, 
		in modo che sia traslato negativamente in verticale dello stesso
		numero di pixek che compone l'altezza della navbar 
	*/
	-webkit-transform: translate3d(0,-70px,0);
	   -moz-transform: translate3d(0,-70px,0);
	    -ms-transform: translate3d(0,-70px,0);
	     -o-transform: translate3d(0,-70px,0);
	        transform: translate3d(0,-70px,0);
}

Aggiungiamo una piccola porzione di codice per “ripiegare” sull’utilizzo della proprietà “top“, al fine di scatenare l’effetto di entrata nel caso in cui il browser del visitatore non supporti la proprietà “translate” (poco performante perché implica la ripetizione di gran parte del processo di rendering):

/*
se il browser non supporta la proprietà translate, allora impostiamo il
valore top negativo, dello stesso numero di pixel dell'altezza della navbar
*/
body.without-translate .navbar-form{
    top: -70px;
}

La classe .with-translate verrà aggiunta al body della pagina utilizzando Modernizr; lo vedremo analizzando il codice Javascript.

Passiamo quindi a definire gli stili per le proprietà grafiche dell’input di ricerca e quelle per il posizionamento dell’icona di chiusura:

/*
	impostaiamo gli stili per l'elemento input. In particolare facciamo in modo 
	che il campo di testo abbia le stesse dimensioni dell'elemento form che lo contiene
*/
.navbar-form input[type='search']{
	outline: 0;	
	width: 100%;
	height:100%;
	font-size: 24px;
	color:#F4F4F4;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	padding:11px 15px;
	padding-right: 35px; /*aumentiamo il padding per "fare spazio" al pulsante di chiusura del form	*/
	background: #000;
	border:0;	
}

/*
	impostiamo in modo assoluto il pulsante di chiusura del 
	form di ricerca in modo che sia posizionato in fondo a destra rispetto 
	al conteitore e che stia sopra il campo di ricerca
*/

#close-button{
	position: absolute;
	right:18px;
	top:24px;
	color: #FFF;
}

Infine facciamo in modo che, nel momento in cui viene aggiunta la classe .open al form di ricerca, siano modificate le “proprietà scatenanti” che avviano l’effetto, secondo quanto definito precedentemente:

/*
definiamo la classe per la visualizzazione del form di ricerca	
*/
.navbar-form.open{	
	/*
	nel momento in cui questa classe viene aggiunta al form,
	andiamo a modifica l'attributo scatenante definito in precedenza (transform)
	per avviare l'aniamzione
	*/	
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	    -ms-transform: translate3d(0,0,0);
	     -o-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);

}

/*
se il browser non supporta la proprietà translate, allora 
attiviamo l'effetto agendo sulla proprietà 'top'.
*/

body.without-translate .navbar-form.open {
    top: 0;
}

 

Il codice Javascript

Come al solito definiamo subito, tramite Modernizr,  il nome dell’evento di fine transition in modo da eseguire la nostra funzione javascript nel momento in cui l’animazione di apertura giunge al termine:

/* Grazie a modernizr riprendo il nome dell'evento di fine transizione, che cambia a seconda del browser */

var endTransitionName = {
	'WebkitTransition' : 'webkitTransitionEnd',
	'OTransition' : 'oTransitionEnd',
	'msTransition' : 'MSTransitionEnd',
	'transition' : 'transitionend'
};
var transitionEventName = endTransitionName[ Modernizr.prefixed( 'transition' ) ];

Per avere maggiori informazioni sulla gestione degli eventi di effetti realizzati tramite le proprietà transition e animation, ti consiglio di leggere questo articolo:

• Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

Aggiungendo ora la classe .without-translate al body, nel caso in cui non sia presente il supporto per la proprietà transform:

/* 
    grazie a modernizr, controllando le classi del tag HTML 
    possiamo sapere se il browser supporta determinate funzionalità        
*/
var supportCssTransforms = $("html").hasClass("csstransforms3d"),
    supportCssTransitions = $("html").hasClass("csstransitions");

/*
    se il browser non supporta la prop. 'transform' aggiungiamo la classe 'without-translate' al body, 
    in modo da poter differenziare la modalità d'effetto tramite CSS
*/
if(!supportCssTransforms){
    $("body").addClass("without-translate");
}

Infine gestiamo gli eventi di click e blur  per pulsanti e campo di ricerca:

/*
	definiamo gli elementi sui quali agiremo
*/
var navForm = $("nav .navbar-form"), 
	input = navForm.find("input[type='search']"),
	openBnt = $("#search-button"),
	closeBtn = $("#close-button");

openBnt.on("click", function(e){
	e.preventDefault();
	//alla fine dell'effetto di transizione richiamiamo il focus sul campo di testo		    	
	navForm.addClass("open").one(transitionEventName, function(){ 	   
    	   input.focus();
	});
        /* 
        se il browser non supporta le transition CSS3 allora l'evento di fine animazione non si verificherà, 
        pertanto richiameremo il focus sul campo di ricerca subito dopo aver aggiunto 
        la classe 'open' al form
        */
        if(!supportCssTransitions)
	   input.focus();

});

/*
	nel momento in cui si verifica l'evento blur, rimuoviamo la classe "open"
	dal form in modo da scatenare l'animazione con effetto contrario (quella
	che nasconde appunto il form)
*/	    	
input.on("blur", function(){ 		    	
	navForm.removeClass("open");
});

/*
	al click dell'icona di chiusura forziamo il blur del campo per scatenare il
	conseguente effetto di chiusura
*/
closeBtn.on("click", function(e){
	e.preventDefault(); 		    	
	input.trigger("blur");
});

Ed ecco finalmente il risultato finale:

Conclusioni

Con questo tutorial spero di averti dimostrato che servirsi di animazioni CSS3 performanti è un’ottimo metodo per rendere originale un sito web e distinguerlo dagli altri, oppure per implementare dei componenti fluidi nelle proprie applicazioni mobile sviluppate in HTML5, CSS3 e Javascript. Così facendo possiamo realizzare prodotti le cui prestazioni si avvicinano il più possibile a quelle di applicazioni native.

---

Realizzare un search box #crossbrowser e #responsive con #TwitterBootstrap #webdesign
Click To Tweet

---

L’impiego della tecnica del miglioramento progressivo permette inoltre di applicare il nostro effetto a tutti i tipi di browser, spaziando da quel più vecchi quelli a quelli di ultima generazione.

E tu? Utilizzerai questa tecnica nei tuoi progetti? Lascia pure un tuo commento per qualunque dubbio o perplessità, o per suggerire delle funzionalità aggiuntive.

Tutti i designer e gli sviluppatori web hanno utilizzato o perlomeno conoscono gli utilissimi widget di jQuery UI. In questo articolo voglio parlarvi di come personalizzare gli stili ed il markup del widget autocomplete, che pur essendo uno dei plugin più completi, presenta un aspetto al quanto obsoleto. Cercheremo in particolare di realizzare un twitter bootstrap 3 autocomplete servendoci del widget di jQuery UI.

 

Aiutami a condividere la risorsa per ottenere il download:

Prima di iniziare

In alcuni progetti, soprattutto per quelli in cui alcune risorse come il tempo o anche il budget del cliente vengono a mancare, può tornare molto utile servirsi di temi twitter bootstrap 3 premium. A tal proposito te ne voglio proporre alcuni di alta qualità che io stesso ho usato per alcuni miei lavori:

Twitter Bootstrap 3 autocomplete: iniziamo!

Cosa includere nel documento

Come prima cosa andremo ad inserire nel nostro documento html le librerie css e javascript necessarie:

CSS:

• bootstrap.css
• demo.css (il nostro foglio di stile)

FILE JS:

• jquery.js (versione 1.10.2)
• jquery-ui.js (per l’autocomplete)
• demo.js (il nostro file javascript)

Per questo esempio ho escluso tutti i file js del Bootstrap e qualunque tema css del jQuery UI, in quanto il nostro intento è quello di combinare appunto gli stili del primo con le funzionalità del secondo; tuttavia è possibile raggiungere l’obiettivo anche includendo le due librerie al completo.

I file “demo.css” e “demo.js” sono rispettivamente il foglio di stile e il javascript del nostro esempio.

Il markup HTML

<div class="row">

	    <div class="col-sm-6 col-md-6 col-md-offset-3">

		    <form id="search-form" role="form">
			  <div class="form-group">
			    <label for="spotlight">Cerca</label>
			    <input type="email" class="form-control" id="spotlight" placeholder="Cerca" />
			  </div>

		    </form>

	    </div>	    

    </div>

 

Aabbiamo usato un input con id “spotlight” all’interno di un form, il tutto contenuto nella colonna di una griglia Bootstrap, con offset 3 e larghezza 6: il risultato è un campo di testo responsive centrato nel mezzo del documento, sia per dispositivi desktop che  mobile.

Javascript: demo.js

$(function() {

    var availableTags = [
      "ActionScript",
      "AppleScript",
      "AppleScript2",
      "AppleScript3",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $("#spotlight").autocomplete({
		source: availableTags,
		appendTo: $("form:first")
	});

	$("#spotlight").data( "ui-autocomplete" )._renderMenu = function( ul, items ) {
		var that = this;		
		ul.attr("class", "nav nav-pills nav-stacked");
		$.each( items, function( index, item ) {
			that._renderItemData( ul, item );
		});
	};	    

});

 

Prima di tutto abbiamo definito l’array dei termini possibili di ricerca, poi abbiamo inizializzato il campo con id “spotlight” per l’autocomplete del jQuery UI: qui si noti in particolare come sia stato necessario “appendere” il menù creato dal plugin al form tramite il parametro “appendTo”.

Il passo successivo è stato quello di modificare la funzione “_renderMenu” del plugin, ovvero quella funzione che ha il compito di inserire i vari risultati di ricerca alo’interno del menù sottoforma di entità HTML. Il procedimento è molto semplice: alla funzione vengono passati come parametri l’elemento del menu che sarà appeso al form, e gli elementi del risultato della ricerca in formato JSON. All’interno di un loop si scorrono poi tutti i risultati e viene richiamata la funzione “_renderItemData” che ha il compito di creare per ogni risultato l’elemento HTML e di aggiungerlo alla lista. Prima del loop noi sostituiamo semplicemente la classe del menu del jQuery UI con quelle del Twitter Bootstrap.

Gli stili CSS: demo.css

form#search-form{
  position: relative;
}

form#search-form ul{
	  position: absolute;
	  top: 0;
	  left: 0; 
	  width: 100%;
	  max-height: 200px;
	  overflow: auto;	  
	  z-index: 1;	  
	  border:1px solid #DDDDDD;
	  border-radius: 6px;	  
  }

span.ui-helper-hidden-accessible{
  display: none !important;
}

.ui-state-focus {
	 color: #ffffff;
	 background-color: #428bca;
}

 

Anche per quanto riguarda gli stili il discorso non è molto complicato: per prima cosa attribuiamo il “position:relative” al form, di modo ché il menù dei risultati venga riposizionato in base al primo (è per questo che precedentemente lo abbiamo inserito tramite javascript al suo interno), poi impostiamo gli attributi del menu stesso, il quale avrà quindi una “position:absolute”.

Attribuiamo poi al menù una altezza massima di 200px con overflow:auto per far scorrere i risultati con una scrollbar, evitando di farli uscire dallo schermo, qualora fossero troppo numerosi.

Fatto ciò nascondiamo la classe helper del jQuery UI, ed impostiamo lo stile del risultato della lista su cui scaturisce il focus (questo è un hack necessario perché purtroppo non è possibile modificare con poche righe di codice il markup e le classi di ogni singolo elemento della lista dei risultati. Per questo si è scelto di prendere la strada “più leggera“).

Twitter bootstrap 3 autocomplete: risultato finale

 

Aiutami a condividere la risorsa per ottenere il download:

Temi Twitter Bootstrap 3 premium