Frage

Ich baue eine sehr dynamische Web-basierte Anwendung viel mit Javascript Benutzerereignisse zu handhaben. Ich bin in den Prozess Dinge machen ein wenig mehr verwendbar und stieß auf ein Problem, dass ich noch nie zuvor hatte.

Ich bin mit jQuery, so Faktor, dass in auf Ihre Antworten. Vielen Dank im Voraus.

Ich habe eine Reihe von Tastenelementen wie folgt definiert:

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

Ich habe diese Tasten mit einem Standard-Stil:

div#option_buttons input {
     cursor: help;
}

Dann, mit jQuery Ich laufe so etwas wie dies als Klick-Ereignis auf einer Auswahlbox:

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

So, wie Sie sehen können, wenn eine Spalte in dem Auswahlkästchen aktiviert ist (hier nicht dargestellt), mag ich die Taste wie ein Knopf würde aktiviert und verhalten wird (mit meinen eigenen Klick-Ereignissen). Aber wenn eine Spalte nicht ausgewählt ist (einschließlich der Standard-Last), möchte ich die Schaltfläche deaktiviert. Die Usability-Entwickler in mir wollte den Benutzer subtil kontextuellen Hinweise darauf, geben, was sie tun können, die Taste durch die native Wiedergabe des Titelattribut als leichte Tooltip zu ermöglichen. Ich tue dies bereits in anderen Bereichen der Anwendung (dies ist ein verrücktes Tier von einem Projekt) und unseren Usability-Tests haben gezeigt, dass die Nutzer sind mindestens in der Lage zu erkennen, dass, wenn die Cursor auf „Hilfe“ ändern, dass sie die schweben über können Element und einige Informationen über das bekommen, was vor sich geht.

Aber dies ist das erste Mal, dass ich dieses Element mit einer Form ausprobiert habe. Offenbar, wenn ich disabled = „disabled“ im Element setzen, ignoriert vollständig die Titel Attribut und wird nie die Werkzeugspitze angezeigt werden soll.

Nun, ich weiß, ich habe ein paar Optionen (zumindest die, die ich mir vorstellen könnte):

  1. Schreiben Sie meine eigene benutzerdefinierte Werkzeugspitze Plug-In ist ein bisschen robuster.
  2. Do not "disable" das Element, aber Stil als deaktiviert. Dies war die Option Ich wurde am meisten stützte sich (in Bezug auf die Einfachheit zu entwickeln), aber ich hasse es, dies zu tun.
  3. Lassen Sie die Taste aktiviert, aber nicht das Click-Ereignis verarbeiten. Ich weiß nicht, wie diese Option so viel weil ich Dinge wie nativ wie sie sein sollten logisch gestylt verlassen. Eine deaktivierte Schaltfläche „fühlt“ die korrekteste und das Aussehen eines behinderten Taste als deaktivierte Schaltfläche sofort erkennbar ist.

Also, mit allem, was gesagt, bin ich etwas fehlt? Gibt es etwas einfach, dass ich tun kann, dass ich gerade nicht gedacht? Google-Suchanfragen haben es versäumt, mich zu diesem Thema, so dass ich dachte, dass ich diese heraus werfen würde Stackoverflow einige frische Augen auf diese zu erhalten.

** ** Bearbeiten

Ich habe gerade eine andere Frage Stackoverflow zu diesem demselben Thema, obwohl diese Person einen ganz anderen Satz von Begriffen verwendet, sein Problem beschreiben (wahrscheinlich, warum ich es nicht finden).

Die URL auf die Frage ist: Firefox zeigt nicht Tooltips für deaktivierte Eingabefelder

Sowohl der Antworten auf diese Frage sind ziemlich gut, obwohl Ich mag würde, um zu sehen, ob jemand noch andere Vorschläge hat. Vielleicht etwas mehr jQuery spezifisch? Nochmals vielen Dank.

War es hilfreich?

Lösung

Es gibt mehrere Validierungs Plugins, die sehr robust sind. Sie können sie in der jQuery-Plugins-Bereich.

Eine weitere Option für Sie, obwohl der ich Liebe geschehen und neigt adays Trending nun werden soll, wird mit dem „Tipsy“ Plugin. Sie können wenig setzen ‚?‘ Symbole auf der rechten Seite des Textfelder und die Leute können über sie Maus ein „Facebook-like“ Werkzeugspitze zu bekommen. Dieses Plugin ist sehr scharf, und ich kann es sehr empfehlen.

Viel Glück!

Andere Tipps

Ich hatte ein ähnliches Problem, und ich umgeben nur das deaktivierte Element in ein anderes Element und mit diesem div interagierten, i tipTip wurde mit für Behinderte Checkbox zeigen Tooltip

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

Ich habe auch nicht nicht getestet, dass löst das Problem mit dem fehlenden Titel, aber Sie können auch die Taste (n) mit Jquery deaktivieren auf $(document).ready()

Grüße, Harpax

Wenn das nicht bricht Ihr Design total, können Sie Ihre Taste durch eine „Spanne“, „p“, ersetzen ... Tag mit „My‚nützlichen‘Text hier.“

Und tauscht sie mit der Taste nur dann, wenn der Benutzer die richtige Bewegung macht.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top