Home / Programmazione / HTML - CSS / Creare uno switch button in Twitter Bootstrap
Mattepuffo

Creare uno switch button in Twitter Bootstrap

Creare uno switch button in Twitter Bootstrap

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>

Poi creiamo l'HTML:

<input type="checkbox" name="my-checkbox">

Come vedete usiamo una checkbox.

Infine inizializiamo il tutto:

            <script>
                $(function () {
                    $("[name='my-checkbox']").bootstrapSwitch();
                });
            </script>

Possiamo anche interecettare alcuni eventi; qua sotto un esempio di codice lanciato al momento del change dello stato:

            <script>
                $(function () {
                    $("[name='my-checkbox']").bootstrapSwitch();
                    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function (event, state) {
                        upStatoArticolo(<?php echo $_GET['id']; ?>, state);
                    });
                });
            </script>

Enjoy!