Domanda

Sto costruendo un molto dinamico applicazione web-based che utilizza un sacco di Javascript per gestire gli eventi dell'utente.Io sono in procinto di fare le cose un po ' più utilizzabile, si è imbattuto in un problema che non ho mai avuto prima.

Sto usando jQuery, quindi, fattore che per le vostre risposte.Grazie in anticipo.

Ho una serie di elementi definiti come:

<input type="button" title="My 'useful' text here." disabled="disabled" />

Ho questi pulsanti con uno stile predefinito di:

div#option_buttons input {
     cursor: help;
}

Quindi, utilizzando jQuery io qualcosa di simile, come un evento di una casella di selezione:

window.current_column = '';
$('select.report_option_columns').live('click', function() {
    var column = $(this).val();
    if ( column == window.current_column ) {
        // clear our our previous selections
        window.current_column = '';
        // make this option no longer selected
        $(this).val('');

        $('div#option_buttons input').attr('disabled','disabled');
        $('div#option_buttons input').attr(
            'title',
            'You must select a column from this list.'
        );
        $('div#option_buttons input').css('cursor', 'help');
    } else {
        window.current_column = column;
        $('div#option_buttons input').attr('disabled','');
        $('div#option_buttons input').attr(
            'title',
            'Add this option for the column "' + column + '"'
        );
        $('div#option_buttons input').css('cursor', 'default');
    }
});

Quindi, come potete vedere, quando una colonna è selezionata la casella di selezione (qui non riportata), voglio che il pulsante è abilitato e si comporta come un pulsante (con i miei click-eventi).Ma quando una colonna non è selezionata (compreso quello predefinito di carico), voglio il pulsante disabili.L'usabilità sviluppatore mi ha voluto dare agli utenti sottile contestuale indizi su ciò che possono fare per attivare il pulsante attraverso il rendering nativo dell'attributo title, come un leggero tooltip.Lo faccio già in altre aree di applicazione (questo è un pazzo bestia di un progetto) e il nostro test di usabilità hanno dimostrato che gli utenti sono almeno in grado di riconoscere che quando il cursore assume la forma di "aiuto" che si può passare il mouse sopra l'elemento e ottenere alcune informazioni su ciò che sta succedendo.

Ma questa è la prima volta che ho mai provato con un elemento del form.A quanto pare, quando ho messo disabled="disabled" nell'elemento, ignora completamente l'attributo title e non mostrare mai la punta dell'utensile.

Ora, so di avere un paio di opzioni (almeno quelle che ho potuto pensare):

  1. Scrivere il mio strumento personalizzato punta plug-in che è un po ' più robusto.
  2. Non "disabilitare" l'elemento, ma lo stile è come disabili.Questo era l'opzione ero appoggiato in più (in termini di facilità a sviluppare), ma io odio dover fare questo.
  3. Lasciare il pulsante abilitato ma non elaborare l'evento click.Non mi piace questa opzione, in quanto molto perché mi piace lasciare le cose in modo nativo in stile come dovrebbero essere logicamente.Un pulsante disabilitato "sente" il più corretto e l'aspetto di un pulsante disabilitato è immediatamente riconoscibile come un pulsante disabilitato.

Così, con tutto ciò che ha detto, mi manca qualcosa?C'è qualcosa di semplice che posso fare che, semplicemente, non ho pensato?Le ricerche di Google hanno fallito di me su questo argomento, così ho pensato di lanciare questa su StackOverflow per ottenere una boccata d'occhio questo.

**Edit**

Ho appena trovato un altro StackOverflow domanda su questo stesso argomento, anche se quella persona ha un diverso insieme di termini che descrivono il suo problema (probabilmente perché non l'ho trovato).

La url per il quesito è: Firefox non visualizza le descrizioni dei disabili campi di input

Entrambe le risposte a questa domanda sono abbastanza buone, anche se mi piacerebbe vedere se qualcuno ha altri suggerimenti.Forse qualcosa di più jQuery specifico?Grazie di nuovo.

È stato utile?

Soluzione

Ci sono diversi plugin di convalida che sono molto robusti. Li potete trovare nella zona plugin jQuery.

Un'altra opzione per voi, però, che mi capita di amare e tende ad essere trend ora adays sta usando il plugin "Tipsy". Si può mettere po '?' icone a destra dei vostri campi di testo e le persone possono mouse su di loro per ottenere un suggerimento "facebook-like". Questo plugin è molto forte e lo consiglio vivamente.

In bocca al lupo!

Altri suggerimenti

Ho avuto un problema simile e ho appena circondato disabili elemento di un altro elemento e interagito con quel div, io sto usando tipTip mostra descrizione comandi per disabili casella di controllo

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

Non ho ancora testato se il problema si risolve con il titolo mancante, ma si potrebbe anche disabilitare il tasto (s) utilizzando jQuery su $(document).ready()

saluti, Harpax

Se questo non si rompe il vostro disegno del tutto, è possibile sostituire il pulsante da un "arco", "p", ... tag con "Il mio testo 'utile' qui".

E scambiarlo con il tasto solo quando l'utente fa la mossa giusta.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top