Alternative à l'attribut de valeur (obsolète) pour les éléments li

Je travaille actuellement sur une application web utilisant HTML 5, CSS et JQuery. J'ai une liste non ordonnée (ul) pour l'affichage des liens de page, avec chaque élément li contenant le lien de la page. Cette liste est créée dynamiquement en utilisant jQuery.

Ce que je voudrais faire, c'est que les éléments de la liste affichent uniquement le nom de la page dans le lien, tout en conservant le chemin complet du lien. Par exemple, "http://www.foo.com/xyz/contactus" s'affichera comme "contactus", mais l'élément li "connaîtra" toujours le chemin complet du lien. A cet effet, l'attribut value de li aurait été parfait, puisque je pourrais les définir comme ceci:

var ul = $('
').attr('id', 'linkList');
for (var i = 0; i < linksOnPage.length; i++) //linksOnPage is an array with all the links
    {
        var pgName = linksOnPage[i].toString().slice(steps[i].toString().lastIndexOf('/') + 1);

       //Create list element and append content
        var li = $('
').text(pgName);   //Set the text to the page name
        li.attr('value', linksOnPage[i].toString());   //Set the value to the full link

        ul.append(li);
    }

Cela créerait une liste comme:

  • contactus
  • ...

Malheureusement, l'attribut value de li est obsolète depuis HTML 4.01 (tout le monde connaît la raison d'être de cela, ça me semble très utile ...).

Donc, je voudrais un conseil sur la façon de procéder. Une option est d'ignorer la dépréciation et d'utiliser l'attribut value de toute façon, puisque tous les principaux navigateurs le supportent toujours, mais je ne suis pas très enthousiaste à l'idée d'utiliser une fonctionnalité obsolète.

Des idées?

0
@nnnnn: exactement
ajouté l'auteur o.v., source
@ gdoron: Je l'ai fait, mais vous ne pouvez le faire qu'une seule fois. Un fort sentiment de désapprobation va au mieux de moi.
ajouté l'auteur o.v., source
@nnnnn: Je suis d'accord, cela ne m'est pas vraiment arrivé. Mais je pense que je vais m'en tenir à l'utilisation de listes pour l'instant, puisque je pense à la rendre triable en utilisant l'interface utilisateur jQuery.
ajouté l'auteur William, source
@nnnnnn: ok, va essayer ça.
ajouté l'auteur William, source
@ o.v. Je pense que vous pouvez upvote un commentaire au lieu d'écrire "d'accord" dans un nouveau commentaire ...
ajouté l'auteur gdoron, source
"Ce que je voudrais faire est d'avoir les éléments de la liste afficher uniquement le nom de la page dans le lien, mais en même temps conserver le chemin de lien complet." - C'est exactement ce que les balises d'ancrage et les balises d'ancrage ont l'avantage de fonctionner pour les utilisateurs au clavier uniquement qui n'utilisent pas (ou ne peuvent pas) une souris ou un autre périphérique de pointage. Il est bon de suivre les normes en ce qui concerne les attributs obsolètes et ainsi de suite comme vous l'avez mentionné, mais à mon avis, il est beaucoup plus important de suivre les
ajouté l'auteur nnnnnn, source
William - Il suffit de mettre une ancre dans chaque élément de la liste. Vous pouvez toujours faire tout le tri et le style de liste que vous voulez, mais il sera également accessible ...
ajouté l'auteur nnnnnn, source

3 Réponses

Même si value était obsolète, il pouvait toujours être utilisé et accessible avec JavaScript. Vous n'abandonnez que le statut de validation!

Vous pouvez également utiliser les attributs data - * (comme d'autres l'ont suggéré) ou mapper directement les valeurs aux éléments DOM - puisque vous générez ce balisage à l'exécution, vous pouvez simplement ajouter une propriété comme ceci ( JS vous permettant de faire cela est à la fois une bénédiction et une malédiction):

li.someLinkPath = 'some url here';
//and in the click handler you could access this as
this.someLinkPath;

Pourtant ... si vous avez l'intention de l'utiliser pour la navigation, pourquoi ne pas utiliser une ancre avec un href?

0
ajouté

Changer de:

  • contactus
  • 
    

    À:

  • contactus
  • 
    

    data-* pattern is the new HTML5 way of keeping values in DOM elements.

    Vous pouvez obtenir les valeurs de l'une des deux façons suivantes:

    $('#li-Id').data('value');
    $('#li-Id').attr('data-value');
    

    Vous pouvez lire cet article de John Resig sur ces attributs.

    jQuery data function

    0
    ajouté
    C'est exactement ce que je cherchais, merci! hmmm ... il me semble que je dois attendre 9 min jusqu'à ce que je puisse vous accepter pour une raison quelconque
    ajouté l'auteur William, source
    @William. Je suppose que je vais devoir attendre jusqu'à ce que je puisse voir le $ 15 : -)
    ajouté l'auteur gdoron, source

    Utilisez simplement un attribut data </​​code> ( intro ; < a href = "http://html5doctor.com/html5-custom-data-attributes/" rel = "nofollow"> tutoriel plus long ; spécification ):

  • contactus
  • 
    

    En plus, jQuery détecte et expose facilement les valeurs de ces attributs via le .data </​​code> méthode.

    0
    ajouté