ड्रॉपकिक छवियों के साथ चयन करें

Question

मैं एक ड्रॉप डाउन सूची बनाना चाहता हूं जिसमें टेक्स्ट की बजाय छवियां शामिल हों और मैं चुनिंदा टैग पूरी तरह से अनुकूलन योग्य बनाना चाहता हूं।

DropKick का उपयोग करके ड्रॉप डाउन सूची पर पाठ के बजाय छवियों का उपयोग करना संभव है?

मैं छवियों का उपयोग करने के लिए संशोधित करने का प्रयास करता हूं लेकिन मैं इसे अन्य ड्रॉपकिक तत्व में उसी पृष्ठ पर पाठ के लिए भी उपयोग करने में सक्षम होना चाहता हूं।

कोड में:

मैं

optionTemplate = '<li class="{{ current }}"><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>', 

optionTemplate = '<li class="{{ current }}"><img src="images//{{ value }}.png" /></li>', 

Answer 1

को मैं एक अस्थायी समाधान पाया बदलने के लिए, अगर यह सबसे अच्छा है मुझे पता नहीं है, लेकिन यह अब के लिए काम करता :

ड्रॉपकिक ली टैग के साथ विकल्प टैग को प्रतिस्थापित करता है जिसमें एक विशेषता वाला एक टैग शामिल होता है "डेटा-डीके -dropdown-मूल्य "। इसलिए, जावास्क्रिप्ट का उपयोग करके मैं "im" मान को "img" तत्व से प्रतिस्थापित करता हूं और img की src विशेषता विकल्प का मान है ("डेटा-डीके-ड्रॉपडाउन-मान" विशेषता से प्राप्त करें)।

channel = document.getElementById('dk_container_channels-menu').getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('li').getElementsByTagName('a')[0].innerHTML = "<img src=\"images/channels/" + channel + ".png\">"; 

आप एक बेहतर लगता है या एक तेज समाधान मुझे पता है, तो:

यहाँ एक उदाहरण है।

:

Answer 2

यहाँ एचटीएमएल 5 data attributes का उपयोग कर एक बेहतर समाधान है (ध्यान दें Dropkick तत्व की जगह से पहले प्रारंभ किया जाना चाहिए)। एक के रूप में इस प्रकार है jquery.dropkick-1.0.0.js फ़ाइल में लिखा कोड संशोधित करना होगा (लाइन नंबर केवल v1.0.0 पर लागू होते हैं):

// Line 39 -- Add "<img>" 
// HTML template for the dropdowns 
dropdownTemplate = [ 
    '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">', 
    '<a class="dk_toggle">', 
     '<span class="dk_label">{{ label }}<img src="{{ icon }}"/></span>', /* << */ 
    '</a>', 
    '<div class="dk_options">', 
     '<ul class="dk_options_inner">', 
     '</ul>', 
    '</div>', 
    '</div>' 
].join(''), 

// Line 51 -- Add "<img>" (string broken down here for readability) 
// HTML template for dropdown options 
optionTemplate = '<li class="{{ current }}">' + 
       '<a data-dk-dropdown-value="{{ value }}">{{ text }}' + 
       '<img src="{{ icon }}"/></a></li>'; /* << */ 

इसके अलावा, प्लगइन के विकल्प

// Line 98 -- add "data.icon" 
    // Don't do anything if we've already setup dropkick on this element 
    if (data.id) { 
    return $select; 
    } else { 
    data.settings = settings; 
    data.tabindex = tabindex; 
    data.id  = id; 
    data.$original = $original; 
    data.$select = $select; 
    data.value  = _notBlank($select.val()) || _notBlank($original.attr('value')); 
    data.label  = $original.text(); 
    data.options = $options; 

    /* Add this attribute */ 
    data.icon  = $original.data('icon'); /* << */ 
    } 

में निम्नलिखित पंक्ति जोड़ भीतर निम्न पंक्ति से पहले _build समारोह,

// Line 318 
if (view.options && view.options.length) { 

निम्न पंक्ति जोड़ें:

// Line 317. To be placed after other "template = template.replace" statements 
template = template.replace('{{ icon }}', view.icon); 

अंत में, के बाद

// Line 321 
var // ... 
    oTemplate = optionTemplate 
; 

पाश अंदर, निम्न पंक्ति

// To be placed after other "oTemplate = oTemplate.replace" statements 
oTemplate = oTemplate.replace('{{ icon }}', view.icon); 

यह सबसे अच्छा कोडन अभ्यास (monkeypatching) नहीं हो सकता है के रूप में जोड़ें कोड टूट सकता है जब icon डेटा विशेषता सेट नहीं है।

मैं आपको icon डेटा विशेषता मान के मूल्य की जांच करने के लिए कुछ कोड जोड़ने और दो टेम्पलेट्स बनाने के लिए सलाह देता हूं: एक विकल्प के लिए और दूसरा डिफ़ॉल्ट ड्रॉपडाउन के लिए। फिर कोई चुनने के लिए कौन सा टेम्पलेट चुन सकता है।_build फ़ंक्शन के लिए यह वही है, जैसा कि बंदरपैचिंग के साथ यह view.icon मान (यदि यह परिभाषित किया गया है या नहीं) पर निर्भर करता है।