Alternativ la atributul value (depreciat) pentru elementele li

În prezent lucrez la o aplicație web folosind HTML 5, CSS și JQuery. Am o listă neordonată (ul) pentru afișarea legăturilor de pagină, cu fiecare element li care conține linkul de pagină. Această listă este creată dinamic folosind jQuery.

Ceea ce aș vrea să fac este să am elemente de listă afișând doar numele paginii din link, dar să păstrez în același timp calea de legătură completă. De exemplu, "http://www.foo.com/xyz/contactus" ar fi afișat ca "contactus", dar elementul li va "cunoaște" încă calea linkului complet. În acest scop, valoarea atributului li ar fi fost perfectă, deoarece i-aș putea pune astfel:

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

Aceasta ar crea o listă precum:

  • contactus
  • ...

Din păcate, atributul de valori al lui li a fost depreciat din moment ce HTML 4.01 (cineva știe rațiunea din spatele acestui lucru? Se pare destul de util pentru mine ...).

Deci, aș vrea un sfat despre cum să procedați. O opțiune este ignorarea deprecierii și utilizarea atributului valoare oricum, deoarece toate browserele majore o suportă încă, dar nu sunt foarte dornic să utilizez o caracteristică depreciată și se simte doar greșit.

Vreo idee?

0
@nnnnn: exact
adăugat autor o.v., sursa
@ gdoron: Am făcut-o, dar o puteți face doar o singură dată. Sentimentul puternic de dezaprobare merge cel mai bine din partea mea.
adăugat autor o.v., sursa
@nnnnn: Sunt de acord, că de fapt nu mi-a apărut. Dar cred că mă voi baza pe folosirea listelor pentru moment, deoarece mă gândesc să fac acest lucru folosind jQuery UI.
adăugat autor William, sursa
@nnnnnn: ok, va încerca asta.
adăugat autor William, sursa
@ O.v. Cred că puteți adăuga un comentariu în loc să scrieți "sunt de acord" într-un comentariu nou ...
adăugat autor gdoron, sursa
"Ceea ce aș vrea să fac este să aflu elementele din listă să afișeze doar numele paginii în legătură, dar să păstreze în același timp calea de legătură completă". - exact pentru ce etichetele de ancorare sunt , și etichetele de ancorare au avantajul de a lucra pentru utilizatorii care folosesc numai tastatură și care nu utilizează (sau nu pot) să utilizeze un mouse sau alt dispozitiv de indicare. Este bine să urmați standardele cu privire la atributele depreciate și așa cum ați menționat, însă în opinia mea este mult mai important să respectați standardele de accesibilitate ...
adăugat autor nnnnnn, sursa
William - Puneți doar o ancoră în fiecare articol de listă. Puteți totuși să faceți tot felul de sortare și stil de listă pe care doriți, dar va fi și accesibil ...
adăugat autor nnnnnn, sursa

3 răspunsuri

Deși codul value a fost depreciat, acesta ar putea fi utilizat și accesat cu JavaScript. Doar renunțați la starea de validare!

Alternativ, ați putea folosi atributele data - * (după cum văd ceilalți le-au sugerat) sau să valoreze valori directe elementelor DOM - deoarece generați acest marcaj în timpul rulării puteați să adăugați o proprietate similară JS vă permite să faceți acest lucru este atât o binecuvântare cât și un blestem):

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

Totuși ... dacă intenționați să folosiți acest lucru pentru navigație, de ce să nu folosiți doar o ancoră cu un href?

0
adăugat

Schimbați de la:

  • contactus
  • 
    

    La:

  • contactus
  • 
    

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

    Puteți obține valorile într-unul din cele două moduri:

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

    Puteți citi această postare pe blog a lui John Resig pe acele atribute.

    jQuery data function

    0
    adăugat
    Exact ceea ce căutam, mulțumesc! Hmmm ... pare ca trebuie sa astept 9 minute pana cand te pot accepta sa raspunzi din vreun motiv
    adăugat autor William, sursa
    @William. Cred că va trebui să aștept până pot vedea $ 15 : -)
    adăugat autor gdoron, sursa

    Pur și simplu utilizați un atribut data </​​code> ( intro ; < a href = "http://html5doctor.com/html5-custom-data-attributes/" rel = "nofollow"> tutorial mai lung ; spec ):

  • contactus
  • 
    

    Ca un plus, jQuery detectează și expune convenabil valorile acestor atribute prin .data </​​code> .

    0
    adăugat
    JavaScript, România - Moldova
    JavaScript, România - Moldova
    328 participanți

    Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com