Enable and disable with jquery

0

I would like to know how I would do to activate and deactivate a user using the same way that YouTube turns the videos on and off automatically. See the image:

    
asked by anonymous 09.07.2015 / 16:45

2 answers

0

Here's the flipswitch link that I believe is what you want.

    
09.07.2015 / 16:59
0

I'll be answering my own question to make a PHP solution available if you need to:

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
      <style type="text/css">
      /* Custom indentations are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
    text-indent: -5.9em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
    text-indent: 0.5em;
}
/* Custom widths are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
    width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
    padding-left: 7em;
    width: 1.875em;
}
@media (min-width: 28em) {
    // Repeated from rule .ui-flipswitch above
    .ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
        width: 1.875em;
    }
}
      </style>
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

      <script>
                $(document).on('change', '#flip-checkbox-3', function(){
                 var datastring = $("#some-form").serializeArray();
                 var valor = $("#flip-checkbox-3 option:selected").text();                
                    $.ajax
                    ({
                    type: "POST",
                    url: "test.php?Key="+valor,
                    data:  datastring
                    })
                    .done(function() {
                    $('#results').load("test.php?Key="+valor);
                    });
                   });
            </script>
   </head>
   <body>

         <form id="some-form">
             <label for="flip-1">Flip toggle switch:</label>
             <select  data-role="flipswitch" name="flip-checkbox-3" id="flip-checkbox-3" data-wrapper-class="custom-size-flipswitch">
                 <option value="off">Desativar</option>
                 <option value="on">Ativar</option>
             </select>
         </form>

      </body>
</html>

The result is the images below:

    
09.07.2015 / 19:22