Pulsante di commutazione dell'interfaccia utente di Jquery (casella di controllo) clicca/trascina bug

Question

Sto postando questo insieme alla migliore risposta che ho trovato. Non ho trovato domande simili, quindi ecco qui.

Quando un input di tipo checkbox viene convertito in un pulsante ui jquery, ho osservato (come lo others) che registra solo un clic se il mouse è tenuto completamente fermo mentre fa clic. Qualsiasi movimento come mai e niente accade. Per l'utente questo può essere percepito solo come un comportamento instabile e inaffidabile.

Come gli altri aggirano questo comportamento (osservato con jquery 1.6.3/jquery ui 1.8.16 in chrome 14 e cioè 8)? C'è qualcosa di ovvio che mi manca perché devo fare di tutto per ottenere il comportamento previsto?

Answer 1

ho avuto l'idea per questa soluzione da un report problema nella pagina jQuery UI legata alla precedente, ma aveva bisogno di un po 'di lavoro: jsfiddle

allego un clic ascoltatore sull'etichetta e gestire il cambiamento di stato me stessa. Ho anche trovato necessario impedire la selezione del testo sul pulsante di attivazione/disattivazione. Questo viene fatto con i CSS (trovato che altrove su SO)

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

Forse questo può salvare la prossima persona che vuole utilizzare il pulsante di commutazione jQuery UI po 'di tempo e di dolore. Se qualcuno ha una soluzione migliore/più pulita, sono molto interessato!

Answer 2

In realtà, c'è un bug in 1.8.13 e versioni precedenti. Se si fa clic su un pulsante e si sposta/trascina il cursore, il pulsante visualizza visivamente uno stato selezionato, ma la casella di controllo/radio sottostante non è selezionata. Di conseguenza, i dati del modulo inviati al server non sono coerenti con ciò che l'utente vede.

Dalla versione 1.8.14 questo bug è stato risolto. Il rovescio della medaglia è che devi tenere il tuo mouse fermo. Tienilo a mente, se decidi di utilizzare la versione precedente di jquery-ui.

Answer 3

So che questa è una domanda molto vecchio, e da allora è stato risolto, ma ho trovato questo per essere l'unica soluzione che ha funzionato per me:

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

Speriamo jQuery risolverà il problema effettivo presto .

Answer 4

Ho una situazione simile utilizzando il framework bootstrap, e la soluzione che ho trovato non è affatto carina, ma fa il trucco per me.

devo aggiungere manualmente per ogni elemento coinvolto il seguente codice:

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

Esempi: In JavaScript, quando uso jQuery per aggiungere i pulsanti in una finestra di dialogo:

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

o inline in HTML:

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

ho provato ad aggiungere con jQuery un opo sono stati creati i pulsanti:

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

ma semplicemente non funziona - apparentemente deve essere aggiunto direttamente all'elemento.

Come ho detto, non bello, ma almeno in Firefox funziona come un fascino.

Answer 5

Vecchia domanda, ma ho pensato di postare questo dato che avevo la stessa domanda e mi sono diretto qui --- A giudicare dal comportamento dei pulsanti dell'interfaccia utente jQuery dimostrati nella demo qui http://jqueryui.com/button/#radio utilizzando Firefox, sembra essere stato corretto in v1.10.4. Ecco il ticket bug - http://bugs.jqueryui.com/ticket/7665. Ed ecco il changelog per v1.10.4 - http://jqueryui.com/changelog/1.10.4/

fisso: Pulsante Radio & caselle ignorano clic del mouse per i movimenti minori del mouse. (# 7665, 52e0f76)

C'è ancora una questione di non sparare l'evento click però.

Answer 6

Mi sono appena imbattuto anche in questo. Sembra che anche se questo potrebbe essere risolto nell'interfaccia utente di Jquery con alcuni browser, continua a fallire in Firefox. Da quello che ho visto, se fai clic sul pulsante mentre muovi il mouse, il colore del pulsante cambia, ma il valore effettivo di "input" non cambia mai. Quindi non puoi usare un evento "Cambia", ma devi usare un evento "Click" e vedere se effettivamente cambia. Quello che ho fatto è includere un aggiornamento giusto quando si verifica l'evento click. Pertanto, se il valore di input è diverso da quello del pulsante, viene visualizzato come se non l'avessero mai fatto 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"); 
});