DropKick selezionare con immagini

Question

Desidero creare un elenco a discesa che include immagini anziché testo e voglio che il tag select sia completamente personalizzabile.

È possibile utilizzare le immagini anziché il testo in un elenco a discesa utilizzando DropKick?

Provo a modificare per l'utilizzo delle immagini ma voglio poterlo usare anche per il testo sulla stessa pagina in un altro elemento dropkick.

Nel codice:

a cambiare

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

a

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

Answer 1

ho trovato una soluzione temporanea, non so se è il migliore, ma funziona per il momento :

DropKick sostituisce i tag di opzione con tag li che include un tag con un attributo "data-dk -dropdown-value". Quindi, usando javascript, sostituisco il valore "a" con un elemento "img" e l'attributo src di img è il valore dell'opzione (ottieni se dall'attributo "data-dk-dropdown-value").

Ecco un esempio:

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

Se si trova una migliore o una soluzione più rapida fatemelo sapere.

(nota: Dropkick deve essere inizializzato prima sostituzione dell'elemento)

Answer 2

Ecco una soluzione migliore utilizzando HTML5 data attributes. Si deve modificare il codice scritto nel file jquery.dropkick-1.0.0.js come segue (numeri di riga si applicano solo alle 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>'; /* << */ 

Inoltre, aggiungere la seguente riga alle opzioni del plugin

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

Prima la seguente riga all'interno la funzione _build,

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

Aggiungere la seguente riga:

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

Infine, all'interno del ciclo dopo

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

Aggiungere la seguente riga

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

Questo potrebbe non essere la migliore pratica di codifica (monkeypatching), come il codice potrebbe rompersi quando la icon l'attributo dei dati non è impostato.

Vi consiglio di aggiungere del codice per controllare il valore del valore dell'attributo dati icon e creare due modelli: uno per l'opzione e un altro per il menu a discesa predefinito. Quindi si può selezionare quale modello usare.Lo stesso vale per la funzione _build, poiché con il monkeypatching dipende dal valore view.icon (se è definito o meno).