Ero alla ricerca di come impostare scorciatoie da tastiera in Javascript, e mi sono imbattuto in questa ottima libreria: Mousetrap!
Questa libreria è indipendente, nel senso che non richiede nessun'altra libreria tipo jQuery, è molto leggera e non si "incastra" con altre funzioni impostate nella pagina.
E il tutto in soli circa 20KB di peso.
Vediamo qualche esempio.
Il componente Modal di Twitter Bootstrap è molto comodo e facile da usare.
Ed è anche provvisto di vari eventi che possiamo controllare.
Oggi vediamo un semplice esempio di come possiamo passare dei parametri nel momento in cui lo richiamiamo.
(Do per scontato l'inclusione del framework nel nostro sito).
Questo il button da cui richimiamo la finestra:
<button type="button" class="btn btn-primary btn-sm btn_img" data-id="hello">
Visualizza immagine
</button>
Ecco un altro componente che manca a Twitter Bootstrap: lo switch button.
In pratica parliamo di quelo bottone che corrisponde al classico On|Off.
Possiamo facilmente rimediare usando un plugin di terze parti che trovate qui: Bootstrap Switch.
Prima di tutto scaricate i file e includeteli nella vostra pagina:
<link href="bootstrap-switch.min.css" rel="stylesheet">
<script src="bootstrap-switch.min.js"></script>
Twitter Bootstrap già ci mette a disposizione gli strumenti per creare dei menu dropdown.
Di default non abbiamo strumenti per il menu multi dropdown.
Ma possiamo ovviare con un pò di CSS.
Prima di tutto vediamo la struttura HTML:
<ul class="nav navbar-nav">
<li><a href="">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
MULTI<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">VOCE 1</a></li>
<li><a href="">VOCE 2</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">voce 3</a>
<ul class="dropdown-menu">
<li><a href="">VOCE 4</a></li>
<li><a href="">VOCE 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Logout</a></li>
</ul>
Dopo la nuova versione del blog, tocca anche al mio portfolio: MatteoFerrone.com.
Da oggi online la versione 4.
Il sito, come facile immaginare, rappresenta il mio portfolio.
Twitter Bootstrap è un framework di per sè molto completo; ma non al 100%.
Un componente che manca è lo Switch Button, il classico pulsante diviso che viene spesso associato al tasto ON|OFF.
Ovviamente è possibile rimediare con un plugin apposito.
Supponendo di aver già integrato il framework e jQuery nella pagina, basterà scaricare da qua (Bootstrap Switch) il plugin e inserirlo; il tutto è composto da un file Javascript e un file CSS.
Come potete vedere sul sito, ci sono diversi esempi.