ली तत्वों के लिए वैकल्पिक गुण (बहिष्कृत) मूल्य विशेषता

मैं वर्तमान में एचटीएमएल 5, सीएसएस और jQuery का उपयोग कर एक वेब अनुप्रयोग पर काम कर रहा हूँ। पेज लिंक वाले प्रत्येक ली तत्व के साथ, पेज लिंक प्रदर्शित करने के लिए मेरे पास एक अनियंत्रित सूची (उल) है। यह सूची jQuery का उपयोग करके गतिशील रूप से बनाई गई है।

मैं क्या करना चाहता हूं कि सूची तत्व लिंक में केवल पृष्ठ का नाम प्रदर्शित करें, लेकिन साथ ही साथ पूर्ण लिंक पथ बनाए रखें। उदाहरण के लिए, "http://www.foo.com/xyz/contactus" को "संपर्क" के रूप में प्रदर्शित किया जाएगा, लेकिन ली तत्व अभी भी पूर्ण लिंक पथ को "जान" देगा। इस उद्देश्य के लिए ली का मूल्य गुण सही होगा, क्योंकि मैं उन्हें इस तरह सेट कर सकता था:

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

यह एक सूची बना देगा जैसे:

  • contactus
  • ...

दुर्भाग्यवश एचटीएमएल 4.01 के बाद ली की मान विशेषता को हटा दिया गया है (किसी को इसके पीछे तर्क पता है? मेरे लिए बहुत उपयोगी लगता है ...)।

तो, मुझे आगे बढ़ने के बारे में कुछ सलाह चाहिए। एक विकल्प बहिष्कार को अनदेखा करना और मूल्य विशेषता का उपयोग करना है, क्योंकि सभी प्रमुख ब्राउज़र अभी भी इसका समर्थन करते हैं, लेकिन मैं एक बहिष्कृत सुविधा का उपयोग करने के लिए बहुत उत्सुक नहीं हूं और यह गलत लगता है।

कोई विचार?

0
जोड़ा
विचारों: 1
@nnnnn: बिल्कुल
जोड़ा लेखक o.v., स्रोत
@gdoron: मैंने किया, लेकिन आप केवल एक बार ऐसा कर सकते हैं। अस्वीकृति की मजबूत भावना मेरे लिए सबसे अच्छी है।
जोड़ा लेखक o.v., स्रोत
@nnnnn: मैं सहमत हूं, जो वास्तव में मेरे लिए नहीं हुआ था। लेकिन मुझे लगता है कि मैं अब सूचियों का उपयोग करने के लिए चिपक जाऊंगा, क्योंकि मैं jQuery UI का उपयोग करके इसे क्रमबद्ध बनाने की सोच रहा हूं।
जोड़ा लेखक William, स्रोत
@nnnnnn: ठीक है, कोशिश करूँगा।
जोड़ा लेखक William, स्रोत
@ O.v। मुझे लगता है कि आप एक नई टिप्पणी में "सहमत" लिखने के बजाय एक टिप्पणी को ऊपर उठा सकते हैं ...
जोड़ा लेखक gdoron, स्रोत
"मैं क्या करना चाहता हूं कि सूची तत्व लिंक में केवल पृष्ठ का नाम प्रदर्शित करें, लेकिन साथ ही साथ पूर्ण लिंक पथ बनाए रखें।" - यह बिल्कुल ठीक है कि एंकर टैग क्या हैं , और एंकर टैग्स को कीबोर्ड-केवल उन उपयोगकर्ताओं के लिए काम करने का लाभ होता है जो माउस या अन्य पॉइंटिंग डिवाइस का उपयोग नहीं करते (या नहीं कर सकते)। बहिष्कृत विशेषताओं के संबंध में मानकों का पालन करना अच्छा है और आगे जैसा आपने बताया है, लेकिन मेरी राय में अभिगम्यता मानकों का पालन करना अधिक महत्वपूर्ण है ...
जोड़ा लेखक nnnnnn, स्रोत
विलियम - बस प्रत्येक सूची आइटम में एक लंगर डालें। आप अभी भी सभी सूची सॉर्टिंग और स्टाइल कर सकते हैं जो आप चाहते हैं, लेकिन यह भी पहुंच योग्य होगा ...
जोड़ा लेखक nnnnnn, स्रोत

3 उत्तर

भले ही value को बहिष्कृत किया गया था, फिर भी इसका उपयोग किया जा सकता था और w/जावास्क्रिप्ट का उपयोग किया जा सकता था। आप केवल सत्यापन स्थिति छोड़ रहे हैं!

वैकल्पिक रूप से आप या तो डेटा - * विशेषताओं (जैसा कि मैंने दूसरों को सुझाव दिया है) का उपयोग कर सकते हैं या सीधे डीओएम तत्वों के लिए मूल्यों को मानचित्र बना सकते हैं - चूंकि आप रनटाइम पर इस मार्कअप को उत्पन्न कर रहे हैं, तो आप बस इस तरह की एक संपत्ति जोड़ सकते हैं ( जेएस आपको ऐसा करने की इजाजत देता है वह एक आशीर्वाद और शाप दोनों है):

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

फिर भी ... यदि आप नेविगेशन के लिए इसका उपयोग करना चाहते हैं, तो क्यों न सिर्फ एक href के साथ एंकर का उपयोग करें?

0
जोड़ा

से बदलें:

  • contactus
  • 
    

    सेवा मेरे:

  • contactus
  • 
    

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

    आप मूल्यों को दो तरीकों से प्राप्त कर सकते हैं:

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

    आप उन विशेषताओं पर जॉन रेजिग का यह ब्लॉग पोस्ट पढ़ सकते हैं।

    jQuery data function

    0
    जोड़ा
    यही वही है जो मैं ढूंढ रहा था, धन्यवाद! हमम ... ऐसा लगता है कि मुझे 9 मिनट तक इंतजार करना है जब तक कि मैं आपको किसी कारण से उत्तर नहीं दे सकता
    जोड़ा लेखक William, स्रोत
    @William। मुझे लगता है कि मुझे तब तक इंतजार करना पड़ेगा जब तक कि मैं $ 15 : -)
    जोड़ा लेखक gdoron, स्रोत

    बस एक डेटा विशेषता का उपयोग करें ( परिचय ; < a href = "http://html5doctor.com/html5-custom-data-attributes/" rel = "nofollow"> लंबा ट्यूटोरियल ; spec ):

  • contactus
  • 
    

    प्लस के रूप में, jQuery आसानी से .data </​​code> <�के माध्यम से इस तरह के गुणों के मानों का पता लगाता है और खुलासा करता है </ए> विधि।

    0
    जोड़ा