jquery - una - ¿Cómo cambiar el contenido en los botones de la IU semántica?
cambiar valor text jquery (4)
La documentation dice que un botón puede formatearse para activarse o desactivarse , pero el ejemplo dado es meramente
<div class="ui toggle button">
Vote
</div>
que, naturalmente, no funciona. Una inspección del código fuente del ejemplo revela que una clase active se agrega mediante programación.
Probablemente me esté perdiendo algo simple, pero ¿cómo puedo crear un botón de alternar como en ese ejemplo? ¿Cuál es la sintaxis para especificar con qué alternar?
El siguiente código es hacer la magia:
semantic.button = {};
// ready event
semantic.button.ready = function() {
// selector cache
var
$buttons = $(''.ui.buttons .button''),
$toggle = $(''.main .ui.toggle.button''),
$button = $(''.ui.button'').not($buttons).not($toggle),
// alias
handler = {
activate: function() {
$(this)
.addClass(''active'')
.siblings()
.removeClass(''active'')
;
}
}
;
$buttons
.on(''click'', handler.activate)
;
$toggle
.state({
text: {
inactive : ''Vote'',
active : ''Voted''
}
})
;
};
// attach ready event
$(document)
.ready(semantic.button.ready)
;
El siguiente código simple funciona bien para dos botones de alternar diferentes con el evento onClick. Gracias Mukesh por inspirarme.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="../../dist/semantic.css">
<script src="../assets/library/jquery.min.js"></script>
<script src="../../dist/semantic.js"></script>
</head>
<script>
function show(b){
alert( $(b).hasClass("active"));
}
// attach ready event
$(document)
.ready(function() {
var $toggle = $(''.ui.toggle.button'');
$toggle
.state({
text: {
inactive : ''Vote'',
active : ''Voted''
}
})
;
})
;
</script>
<body>
<button class="ui toggle button" onclick="show(this)">
Vote
</button>
<br/><br/>
<button class="ui toggle button" onclick="show(this)">
Vote
</button>
</body>
</html>
Es muy simple,
<button class="ui toggle button active" id="tgl">Toogle button</button>
solo use el jQuery clásico, haga clic para toogle la clase activa, y agregue cualquier otro cambio que necesite. Creo que usar la etapa semántica es una pérdida de tiempo en este caso.
$(''#tgl'').click(function(){
$(this).toggleClass(''active'');
});
La forma más fácil de hacer que los botones de alternancia funcionen sin ninguna opción, etc. es la siguiente:
$(''.ui.button.toggle'').state();
Esto debería alternar entre los colores gris y verde predeterminados al hacer clic. Vea las otras respuestas para un comportamiento más complicado. Asegúrese de que el DOM, etc., se cargue primero como con otros inicializadores de IU semánticos.