Pregunta

Estoy construyendo una aplicación basada en web muy dinámica con una gran cantidad de Javascript para manejar los eventos de usuario. Estoy en el proceso de hacer las cosas un poco más fácil de usar y me encontré con un problema que nunca he tenido antes.

Estoy usando jQuery, por lo factor que en sus respuestas. Gracias de antemano.

I tienen un conjunto de elementos de botón definido como:

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

Tengo estos botones con un estilo por defecto de:

div#option_buttons input {
     cursor: help;
}

A continuación, utilizando jQuery plazo algo así como un clic-evento en un cuadro de selección:

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');
    }
});

Por lo tanto, como se puede ver, cuando una columna se selecciona en el cuadro de selección (no se muestra aquí), quiero que el botón esté habilitado y se comportan como lo haría un botón (con mis propios clics eventos). Pero cuando una columna no está seleccionado (incluyendo la carga por defecto), quiero que el botón de personas con discapacidad. El desarrollador de usabilidad en mí quería dar a los usuarios pistas contextuales sutiles en cuanto a lo que pueden hacer para activar el botón a través de la representación nativa del atributo del título como una información sobre herramientas de peso ligero. Lo hago ya en otras áreas de la aplicación (esto es una bestia loca de un proyecto) y nuestras pruebas de usabilidad han demostrado que los usuarios son al menos capaces de reconocer que cuando el cursor se convierte en "ayuda" que puedan flotar sobre el elemento y obtener alguna información sobre lo que está pasando.

Pero esta es la primera vez que he probado esto con un elemento de formulario. Al parecer, cuando pongo = discapacitadas "desactivado" en el elemento, se ignora por completo el atributo de título y nunca mostrará la punta de la herramienta.

Ahora, sé que tengo algunas opciones (al menos los que yo podía pensar):

  1. Escribir mi propia punta de la herramienta personalizada de plug-in que es un poco más robusto.
  2. No "desactivar" el elemento, pero el estilo es como discapacitados. Esta fue la opción que estaba apoyado en la mayor parte (en términos de facilidad para desarrollar) pero no me gusta tener que hacer esto.
  3. Deja el botón como habilitado pero no procesar el evento click. No me gusta esta opción tanto porque me gusta dejar las cosas de forma nativa estilo como debe ser, lógicamente. Un botón de discapacitados "siente" el más correcto y el aspecto de un botón con discapacidad es inmediatamente reconocible como un botón de personas con discapacidad.

Así que, con todo lo que dijo, me estoy perdiendo algo? ¿Hay algo más fácil que pueda hacer que yo no he pensado? búsquedas de Google me han fallado sobre este tema, por lo que pensé en tirar esto hacia fuera en StackOverflow para conseguir algunos ojos frescos en esto.

** Editar **

acabo de encontrar otra pregunta StackOverflow sobre este tema, sin embargo, que la persona utiliza un conjunto muy diferente de los términos que describen su problema (probablemente por eso no lo encontré).

La url a la pregunta es: Firefox no muestra La información sobre herramientas para campos de entrada con discapacidad

Tanto de las respuestas sobre esta cuestión son bastante buenos, aunque me gustaría ver si alguien tiene alguna otra sugerencia. Tal vez algo más específico jQuery? Gracias de nuevo.

¿Fue útil?

Solución

Hay varios plugins de validación que son muy robustos. Puede encontrarlos en el área jQuery plugins.

Otra opción para usted a través del cual resulta que el amor y tiende a ser trending ahora adays está utilizando el plug-in "Tipsy". Se puede poner poco '?' iconos situados a la derecha de los campos de texto y las personas pueden puntero del ratón sobre ellos para conseguir un "facebook-como" la punta de la herramienta. Este plugin es muy fuerte y altamente recomiendo.

Buena suerte!

Otros consejos

He tenido un problema similar y acabo rodeado el elemento discapacitados en otro elemento e interactuó con el div, yo estaba usando tipTip para mostrar información sobre herramientas para la casilla de verificación desactivada

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

No he probado o no se soluciona el problema con el título que le falta, pero también se puede deshabilitar el botón (s) usando jQuery en $(document).ready()

cordiales, harpax

Si eso no romper su diseño totalmente, se puede reemplazar el botón por un "lapso", "p", ... etiqueta con el "texto 'útil' Mi aquí."

e intercambiarlo con el botón sólo cuando el usuario hace que el movimiento correcto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top