Jquery UI botón de alternancia (casilla de verificación) clic/arrastrar error

Question

Estoy publicando esto junto con la mejor respuesta que he encontrado. No he encontrado ninguna pregunta similar, así que aquí va.

Cuando una entrada de tipo checkbox se convierte en un botón jquery ui, he observado (como en el others) que solo registra un clic si el mouse se mantiene completamente inmóvil mientras hace clic. Cualquier movimiento que ocurra y nada sucede. Para el usuario, esto solo puede percibirse como un comportamiento escabroso y poco confiable.

¿Cómo funcionan otros en este comportamiento (observado con jquery 1.6.3/jquery ui 1.8.16 en Chrome 14 y es decir 8)? ¿Hay algo obvio que me estoy perdiendo ya que tengo que llegar a tal extremo para obtener el comportamiento esperado?

Answer 1

me ocurrió la idea de esta solución a partir de un informe de problemas en la página jQuery UI relacionado con el anterior, pero que necesitaba un poco de trabajo: jsfiddle

adjunto un detector de clics en la etiqueta y manejar el cambio de estado mí mismo. También me pareció necesario evitar la selección de texto en el botón de alternar. Esto se hace con CSS (encontró que en otras partes de SO)

.unselectable { 
    -moz-user-select: -moz-none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
} 

Tal vez esto puede ahorrar la siguiente persona que quiera utilizar el botón de activación jQuery UI algún tiempo y el dolor. Si alguien tiene una solución mejor/más limpia, ¡estoy muy interesado!

Answer 2

En realidad, hay un error en 1.8.13 y versiones anteriores. Si hace clic en un botón y mueve/arrastra su cursor, un botón obtiene visualmente un estado seleccionado, pero la casilla de verificación/radio subyacente no está seleccionada. Como consecuencia, los datos del formulario enviados al servidor no son coherentes con lo que el usuario ve.

A partir de la versión 1.8.14 se solucionó este error. El inconveniente es que tienes que mantener el mouse quieto. Tenga esto en cuenta, si decide usar la versión anterior de jquery-ui.

Answer 3

Sé que esto es una pregunta muy viejo, y desde entonces ha sido fijada, pero he encontrado que se trata de la única solución que trabajó para mí:

http://ultcombo.github.com/UltButtons/

suerte jQuery solucionar el problema real pronto .

Answer 4

Tengo una situación similar usando el marco de arranque, y la solución que encontré no es bonita en absoluto, pero me sirve.

tengo que añadir manualmente para cada elemento involucrado el siguiente código:

.on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false }) 

Ejemplos: En JavaScript, cuando se utiliza jQuery para añadir botones en un cuadro de diálogo:

.append($(document.createElement('a')) 
    .attr({'class': 'btn', 'href': '#'}) 
    .append($(document.createTextNode('1'))) 
    .on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false }) 
) 

o en línea en HTML:

<a class="btn" href="#" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" onclick="UseButton(this); return false;" >1</a> 

He intentado agregarlo con jQuery a espués se crearon los botones:

.on('mousedown', 'a.btn', function(ev) { ev.preventDefault [...] }) 

pero simplemente no funciona - al parecer tiene que ser añadido directamente al elemento.

Como dije, no es bonita, pero al menos en Firefox funciona como un encanto.

Answer 5

Pregunta anterior, pero pensé en publicar esto porque tenía la misma pregunta y me dirigí aquí --- A juzgar por el comportamiento de los botones de la interfaz de usuario jQuery demostrados en la demostración aquí http://jqueryui.com/button/#radio usando Firefox, parece haber sido arreglado en v1.10.4. Aquí está el ticket de error - http://bugs.jqueryui.com/ticket/7665. Y aquí está la lista de cambios para v1.10.4 - http://jqueryui.com/changelog/1.10.4/

fijo: Botón de opción & casillas de verificación ignoran clics del mouse para movimientos menores ratón. (# 7665, 52e0f76)

Sin embargo, aún no se ha activado el evento click.

Answer 6

Acabo de encontrar esto también. Parece que aunque esto puede solucionarse en Jquery UI con algunos navegadores, aún falla en Firefox. Por lo que he visto, si hace clic en el botón mientras mueve el mouse, el color del botón cambia, pero el valor real de "entrada" nunca cambia. Por lo tanto, no puede usar un evento "Cambiar", sino que debe usar un evento "Hacer clic" y ver si realmente cambia. Lo que hice fue incluir una actualización justo cuando ocurre el evento click. Por lo tanto, si el valor de entrada es diferente al botón, se ve al usuario ya que nunca lo han hecho clic.

$(function() { $("#myButtonSet").buttonset(); }); 
$('#myButtonSet').on('click',function(){ 
     //This will reset the button back to it's original state if the input does not 
     //match what the user clicked. It is so fast that it seems to the user they never 
     //clicked the button at all, prompting them to do it again. 
    $("input[name='myButtonSetName']").button("refresh"); 
});