L'ajout de HTML5 attribut caché de soutien à jQuery .toggle() la méthode

J'aimerais paire HTML5 hidden support avec du jQuery .toggle ().

Donc donné <p id="myElement">Hi there</p>

$('#myElement').toggle() permettrait de masquer l'élément, et l'ensemble hidden="hidden":

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

Et l'exécution de la même $('#myElement').toggle() script de nouveau se montrer (à bascule) de l'élément, et de supprimer le hidden="hidden" bien (il est un booléen):

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

Je voudrez probablement utiliser la fonction complète de la méthode, peut-être quelque chose le long des lignes de

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

Ce qui est le plus performant solution pour l'extension de .toggle() à passer à l'HTML5 hidden attribut? Est-il redondant de le faire?

Cette question est une variante de L'ajout de WAI-ARIA de soutien à jQuery .toggle() la méthode; il a été déterminé qu'il serait superflu de faire basculer l' aria-hidden de l'état en collaboration avec le basculement de l'élément d'affichage.

Je voudrais simplement faire ma propre méthode d'extension/plugin jquery pour faire le tour et donnez-lui un nom approprié.
eh bien, il semble que le .toggle() méthode prend en charge ce type de manipulation à l'élément cible, alors j'aimerais seulement faire cela comme un plugin si elle était en quelque sorte à offrir un gain de vitesse.
Il est actuellement [presque] tout aussi redondant pour basculer à la fois caché et display:none. Quelle est votre motivation pour vouloir en faire ce - que pensez-vous qu'il va corriger ou améliorer?
Je pense que tout ce que j'ai prouvé, c'est que jQuery pouvez activer mon trouble obsessionnel-compulsif

OriginalL'auteur Jeromy French | 2013-01-31

  1. 2

    Quelques commentaires sur ce qui peut ou peut ne pas être utile de mettre cela comme une réponse car il est trop long pour tenir dans un commentaire 🙂 -

    Bien que l'idée derrière hidden est qu'il a le potentiel pour améliorer l'accessibilité de display:none (il ne nécessite pas un outil d'accessibilité pour être au courant de la CSS), il n'y a actuellement pas de béton ou testables avantage que je connais, étant donné que les lecteurs d'écran soutenir le CSS approche de toute façon.

    (...ou plutôt, les navigateurs que les lecteurs d'écran de travail avec déjà analyser la CSS et de transmettre les informations cachées sur les lecteurs d'écran via la plate-forme de l'API d'accessibilité. Les principaux outils de bénéficier de hidden d'autres outils d'accessibilité que de travailler directement avec leur propre copie de la DOM, plutôt que de communiquer avec un "hôte" du navigateur.)

    (Aussi, bien que dans un monde parfait, CSS serait purement de présentation, c'est pas souvent. L'utilisation de display:none est un cas où il ne l'est pas - il est souvent utilisé pour indiquer que le contenu n'est pas actuellement pertinente, qui est sémantique de l'information; et la hidden ne s'adresse ce cas; mais il y a encore d'autres cas qui doivent aussi être abordés: le contenu généré est peut-être le principal autres cas.)

    Je suis un peu hésitant à adopter de nouvelles fonctionnalités jusqu'à ce que je peux vérifier leur comportement et de travail, comme prévu,: il n'est pas rare de nouvelles fonctionnalités pour être spec'd une façon, mais à la fin mises en œuvre de manière subtilement différente manière qui a des implications pour la façon dont la fonctionnalité peut pratiquement être utilisé. (L'utilisation de l'ARIA role="application" est un bon exemple d'une fonction qui a beaucoup de mises en garde.) Et à la fin de la journée, ce n'est pas le respect de la spécification qui fait une page accessible ou pas, que c'est la façon dont l'ensemble de la combinaison de contenu et de navigateur, le lecteur d'écran (ou autre outil d'accessibilité) travailler ensemble que les questions à l'utilisateur final.

    Un autre problème: la spec HTML5 dit de le hidden l'attribut:

    [...] Par exemple, il est incorrect d'utiliser caché pour masquer les panneaux dans un dialogue à onglets, parce que l'interface à onglets est simplement une sorte de dépassement de la présentation [...]

    Cependant, les boîtes de dialogue à onglets sont un cas d'utilisation de jQuery toggle/show/hide/etc méthodes; ainsi, à l'application hidden dans tous ces cas pourrait être [techniquement] à l'encontre de la spec. Semble que le même raisonnement s'appliquerait à la page menubars et leurs menus contextuels aussi.

    merci de prendre le temps de réfléchir à ce sujet. J'ai commencé sur cette tangente à penser que je serais en appliquant des fonctionnalités utiles, mais même après, il est devenu clair qu'il n'y a aucune utilité à présent j'ai toujours voulu voir si c' (à l'aide de .toggle() pour basculer d'une autre logique) était possible.

    OriginalL'auteur BrendanMcK

  2. 2

    La hidden propriété peut être activée à l'aide de la fonction complète de la .toggle() méthode:

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

    Voir http://jsfiddle.net/jhfrench/g8Sqy/ pour un exemple de travail

    Notes:

    • utilisation $(this), pas $this
    • besoin de déclarer une fonction (.toggle(function() {...}), pas .toggle(...)
    • à l'aide de la fonction de rappel pour basculer hidden est vraiment, vraiment plus lent que la plaine-vieux .toggle()
    erreur commune, évident, mais de manière invisible à l'œil use $(this), not $this

    OriginalL'auteur Jeromy French