Hinzufügen von HTML5-Attribut "hidden" Unterstützung für jQuery .toggle () - Methode

Ich würde gerne paar HTML5 hidden Unterstützung mit jQuery .toggle () - Methode.

Also da <p id="myElement">Hi there</p>

$('#myElement').toggle() würde, verstecken das element, und legen Sie hidden="hidden":

<p id="myElement" style="display: none;" hidden="hidden">Hi there</p>

Sowie die Ausführung des gleichen $('#myElement').toggle() Skript wieder zeigen würde (Umschalten) des Elements, und entfernen Sie die hidden="hidden" - Eigenschaft (boolean):

<p id="myElement" style="display: inline">Hi there</p>

Möchte ich wahrscheinlich um die vollständige Funktion der die Methode, vielleicht etwas entlang der Linien von 

$('#myElement').toggle(
    if ($this.css('display')==='none'){
       $this.prop('hidden', 'hidden');
    }
    else
    {
       $this.removeProp('hidden');
    }
)

Was ist die performante Lösung für die Erweiterung .toggle() zu wechseln, die das HTML5 - hidden - Attribut? Ist es redundant, dies zu tun?

Diese Frage ist eine variation von Hinzufügen von WAI-ARIA Unterstützung für jQuery .toggle () - Methode; es wurde festgestellt, dass es überflüssig wäre zum Umschalten der aria-hidden Zustand in Verbindung mit Umschalten des Elements anzuzeigen.

Ich würde einfach machen, meine eigene extension-Methode/jquery-plugin, um den trick zu tun, und nennen Sie es etwas passendes.
nun, es scheint, die .toggle() - Methode unterstützt diese Art der manipulation, um das target-element, so würde ich dies nur tun als ein plugin, wenn es irgendwie bieten Geschwindigkeit gewinnen.
Es ist derzeit [fast] genauso redundant zum Umschalten der beiden hidden und display:none. Was ist Ihre motivation für den Wunsch, dies zu tun - was glaubst du, wird es reparieren oder zu verbessern?
Ich denke, ich habe bewiesen ist, dass jQuery aktivieren können, die meine OCD

InformationsquelleAutor Jeromy French | 2013-01-31

  1. 2

    Einige Kommentare auf dieser, die möglicherweise oder möglicherweise nicht nützlich sein - putting dies als eine Antwort, denn es ist zu lang und passt nicht in einen Kommentar 🙂 -

    Während die Idee hinter hidden ist, dass es hat das Potenzial, um eine bessere Zugänglichkeit als display:none (es erfordert nicht ein Eingabehilfen-tool, um bewusst sein, der CSS), gibt es zurzeit keine konkrete oder messbare nutzen, den ich kenne - da Screenreader-Unterstützung der CSS-Ansatz sowieso.

    (...oder besser gesagt, der Browser, Screenreader arbeiten mit bereits analysiert das CSS, und übergeben Sie die versteckten Informationen auf der Screenreader über die Plattform, die accessibility-API. Wahrscheinlich die wichtigsten Werkzeuge zu nutzen hidden werden andere ein - /Ausgabehilfe-Werkzeuge, die direkt mit Ihrer eigenen Kopie der DOM eher als die Kommunikation mit einem 'host' browser.)

    (Auch während in einer perfekten Welt, CSS wäre rein Präsentations -, ist es oft nicht. Verwendung von display:none ist ein Fall, wo es nicht - es wird oft verwendet, um anzuzeigen, dass Inhalte, die für Sie nicht relevant, das ist semantische Informationen; und die hidden befasst sich mit diesem Fall; aber es gibt noch andere Fälle, die müssen auch angesprochen werden: die generierten Inhalte, ist vielleicht der wichtigste anderen Fall).

    Bin ich etwas zögerlich, um neue Funktionen einzuführen, bis ich die überprüfung der Verhaltens-und Arbeitsweisen wie geplant: es ist nicht ungewöhnlich für neue Funktionen geskilled eine Möglichkeit, aber am Ende wird umgesetzt in eine leicht unterschiedliche Weise, hat Auswirkungen darauf, wie die Funktion kann praktisch verwendet werden. (Die Verwendung des ARIA-role="application" ist ein gutes Beispiel für eine Funktion, die viele Vorbehalte.) Und am Ende des Tages, es ist nicht die Einhaltung der Spezifikation, dass die macht einer Seite zugänglich ist, oder nicht, wie es ist, wie die ganze Kombination von content, browser-und screenreader (oder andere Eingabehilfen-tool) arbeiten zusammen, die Fragen an den Endbenutzer.

    Weiteres Problem zu beachten: die HTML5-Spezifikation sagt, dass der hidden - Attribut:

    [...] Zum Beispiel, es ist falsch zu verwenden, versteckte, ausblenden von Abschnitten in einem Dialogfeld mit Registerkarten, weil die tabbed Schnittstelle ist lediglich eine Art von überlauf-Präsentation [...]

    Jedoch, tabbed-Dialoge sind eine gemeinsame use-case für die jQuery - toggle/show/hide/etc Methoden; so Anwendung hidden in allen diesen Fällen könnte [technisch] gegen die spec. Scheint die gleiche Argumentation gelten würde Seite Menüleisten und deren popup-Menüs auch.

    vielen Dank für die Zeit nehmen, um darüber nachzudenken. Ich begann auf dieser Tangente dachte, ich würde die Anwendung nützliche Funktionen, aber auch nach es wurde klar, dass es kein Dienstprogramm, das wollte ich noch sehen, wenn es (mit .toggle() wechseln einige andere Logik) möglich war.

    InformationsquelleAutor BrendanMcK

  2. 2

    Den hidden Eigenschaft kann ein-und ausgeschaltet werden über die komplette Funktion des .toggle() Methode:

    $('#myElement').toggle(function() {
    if ($(this).css('display')==='none'){
       $(this).prop('hidden', 'hidden');
    }
    else
    {
       $(this).removeProp('hidden');
    }
})

    Sehen http://jsfiddle.net/jhfrench/g8Sqy/ für ein Beispiel

    Hinweise:

    • verwenden $(this), nicht $this
    • deklarieren müssen eine Funktion (.toggle(function() {...}), nicht .toggle(...)
    • mit dem callback zu wechseln hidden ist wirklich, wirklich langsamer als plain old .toggle()
    häufiger Fehler, klar, aber so für das Auge unsichtbar use $(this), not $this

    InformationsquelleAutor Jeromy French

Schreibe einen Kommentar