DropKick mit Bildern auswählen

Question

Ich möchte eine Dropdown-Liste erstellen, die Bilder anstelle von Text enthält, und ich möchte, dass das Auswahl-Tag vollständig anpassbar ist.

Es ist möglich, Bilder anstelle von Text in einer Dropdown-Liste mit DropKick zu verwenden?

Ich versuche, für die Verwendung von Bildern zu ändern, aber ich möchte es für Text auch auf der gleichen Seite in einem anderen Dropkick-Element verwenden können.

Im Code:

i

ändern

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

zu

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

Answer 1

ich eine vorübergehende Lösung gefunden, ich weiß nicht, ob es das beste ist, aber es funktioniert jetzt :

DropKick ersetzt Optionstags mit li-Tags, die ein a-Tag mit dem Attribut "data-dk -Dropdown-Wert ". Also, benutze javascript ich ersetze den "a" -Wert mit einem "img" -Element und das src-Attribut des img ist der Wert der Option (get if from "data-dk-dropdown-value" -Attribut). Hier

ein Beispiel:

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\">"; 

Wenn Sie eine bessere oder eine schnellere Lösung lassen Sie mich wissen zu finden.

(Anmerkung: DROPKICK muss vor Ersetzen des Elements initialisiert werden)

Answer 2

Hier ist eine bessere Lösung mit HTML5 data attributes. Man muss den Code ändern, in der jquery.dropkick-1.0.0.js Datei geschrieben wie folgt (Zeilennummern gelten nur für 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>'; /* << */ 

Des Weiteren die folgende Zeile in der

// 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'); /* << */ 
    } 

Bevor Sie die folgenden Zeilenoptionen des Plug-Ins hinzufügen, innerhalb die _build Funktion,

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

Fügen Sie die folgende Zeile ein:

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

schließlich innerhalb der Schleife nach

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

Fügen Sie folgende Zeile

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

dies nicht die beste Codierung der Praxis (monkeypatching) sein könnte, da der Code brechen kann, wenn die icon Datenattribut ist nicht festgelegt.

Ich empfehle Ihnen, einen Code hinzuzufügen, um den Wert des icon Datenattributwerts zu überprüfen und zwei Vorlagen zu erstellen: eine für die Option und eine weitere für das Standard-Dropdown. Dann kann man auswählen, welche Vorlage zu verwenden ist.Dasselbe gilt für die _build-Funktion, da bei der Monkey-Anpassung der Wert view.icon (falls definiert oder nicht) abhängt.