6

テキストの代わりに画像を含むドロップダウン リストを作成したいのですが、select タグを完全にカスタマイズできるようにしたいと考えています。

DropKick を使用して、ドロップダウン リストでテキストの代わりに画像を使用することは可能ですか?

画像を使用するために変更しようとしていますが、他のドロップキック要素の同じページのテキストにも使用できるようにしたいと考えています。

コード内:

私が変える

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

に

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

2 に答える 2

2

一時的な解決策を見つけました。それが最善かどうかはわかりませんが、今のところ機能しています。

DropKick は、オプション タグを、属性「data-dk-dropdown-value」を持つ a タグを含む li タグに置き換えます。したがって、javascript を使用して、「a」値を「img」要素に置き換えます。img の src 属性はオプションの値です (「data-dk-dropdown-value」属性から取得)。

次に例を示します。

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

より良い、またはより迅速な解決策を見つけた場合は、お知らせください。

(注:要素を置き換える前に、 DropKick を初期化する必要があります)

于 2012-10-25T14:15:37.543 に答える