javascript - attribute - tooltip bootstrap 4 example
Cómo crear un botón de alternar en Bootstrap (9)
Originalmente creé una aplicación web en HTML, CSS y JavaScript, y luego me pidieron que la creara también en Bootstrap. Lo he hecho todo bien, pero tuve que alternar los botones en la aplicación web que han cambiado de nuevo a botones de radio (originalmente casilla de verificación) en lugar de los botones de alternar que tenía originalmente.
El código para los botones es:
<label>
Notifications
<span class=''toggle''>
<input type=''radio''
class=''notifications''
name=''notifications''
id=''notifications'' />
</span>
</li>
<label>
Preview
<span class=''toggle''>
<input type=''radio''
class=''preview''
name=''preview''
id=''preview'' />
</span>
</li>
y los archivos JavaScript y CSS a los que está vinculada la página HTML son:
<script src = ''jqtouch.js''></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
¿Hay alguna manera de cambiar el código para que pueda recuperar el botón de alternar?
Aquí esta muy útil para el botón de alternar Bootstrap . Ejemplo en fragmento de código !! y jsfiddle abajo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
//If you want to change it dynamically
function toggleOn() {
$(''#toggle-trigger'').bootstrapToggle(''on'')
}
function toggleOff() {
$(''#toggle-trigger'').bootstrapToggle(''off'')
}
//if you want get value
function getValue()
{
var value=$(''#toggle-trigger'').bootstrapToggle().prop(''checked'');
console.log(value);
}
</script>
Bootstrap 3 tiene opciones para crear botones de alternar basados en casillas de verificación o botones de opción: http://getbootstrap.com/javascript/#buttons
Casillas de verificación
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
Botones de radio
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Para que funcionen, debes inicializar .btn s con el Javascript de Bootstrap:
$(''.btn'').button();
En caso de que alguien todavía esté buscando un buen botón de cambio / alternar, seguí la sugerencia de Rick y creé una directiva angular simple alrededor de él, el cambio angular-switch . Además de preferir un conmutador con estilo de Windows, la descarga total también es mucho más pequeña (2kb vs 23kb minified css + js) en comparación con el bootstrap-switch angular y el conmutador de arranque mencionados anteriormente juntos.
Lo usarías de la siguiente manera. Primero incluya el archivo js y css requerido:
<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>
Y habilítelo en su aplicación angular:
angular.module(''yourModule'', [''csComp''
// other dependencies
]);
Ahora está listo para usarlo de la siguiente manera:
<switch state="vm.isSelected"
textlabel="Switch"
changed="vm.changed()"
isdisabled="{{isDisabled}}">
</switch>
He intentado activar manualmente la clase ''activa'' con javascript. No es tan útil como una biblioteca completa, pero para casos fáciles parece suficiente:
var button = $(''#myToggleButton'');
button.on(''click'', function () {
$(this).toggleClass(''active'');
});
Si lo piensas detenidamente, la clase ''activa'' es utilizada por el programa de arranque cuando se presiona el botón, no antes o después de eso (nuestro caso), por lo que no hay conflicto al reutilizar la misma clase.
Pruebe este ejemplo y dígame si falla: http://jsbin.com/oYoSALI/1/edit?html,js,output
No estoy seguro de si ayuda, pero hay disponible un excelente (no oficial) interruptor Bootstrap . Sin embargo, usa tipos de radio.
Actualización: ahora también puede usar botones de radio o casillas de verificación como conmutadores. Se ha agregado un atributo de type desde V.1.8.
El código fuente está disponible en Github .
Editar: el antiguo http://bootstrapswitch.com/ nombre de dominio no se renovó y no está disponible por ahora
Puede usar el interruptor de diseño de materiales para Bootstrap 3.3.0
http://bootsnipp.com/snippets/featured/material-design-switch
Puede usar la biblioteca CSS Toggle Switch. Simplemente incluya el CSS y programe el JS usted mismo: http://ghinda.net/css-toggle-switch/bootstrap.html
Si desea mantener una base de código pequeña, y solo va a necesitar el botón de alternar para una pequeña parte de la aplicación. Yo sugeriría que mantuvieras tu código javascript self (angularjs, javascript, jquery) y simplemente usa CSS simple.
Buen generador de botones de alternancia: https://proto.io/freebies/onoff/
Si no le importa cambiar su HTML, puede usar el atributo de data-toggle en <button> s. Vea la sección de alternar individual de los ejemplos del botón :
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>