Usare gli Switch Button in Twitter Bootstrap

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.

Prendendo un caso semplice, basterà questo:

            <link href="css/bootstrap-switch.min.css" rel="stylesheet">
            <script src="js/bootstrap-switch.min.js"></script>
            <script>
            $(function () {
                $("[name='my-checkbox']").bootstrapSwitch();
            });
            </script>
            <input type="checkbox" name="my-checkbox">

A questo aggiungiamo anche un esempio con intercettazione dell'evento change:

            <link href="css/bootstrap-switch.min.css" rel="stylesheet">
            <script src="js/bootstrap-switch.min.js"></script>
            <script>
            $(function () {
                $("[name='my-checkbox']").bootstrapSwitch();
                $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function (event, state) {
                    // DO STUFF ON CHANGE
                });
            });
            </script>
            <input type="checkbox" name="my-checkbox">

Tutto qua!

Adesso potete usare gli Switch Button comodamente anche in Twitter Bootstrap (testato nella versione 3).

Enjoy!