image - ZK - コンボボックスの選択されたアイテムの画像

Question

ZK で選択したアイテムで画像/アイコンを表示する方法を知っている人は誰でもCombobox。たとえば、このZK Live Demoは、ドロップダウンのそれぞれに画像を配置する方法を示していますComboitem。ただし、この例でアイテムを選択すると、コンボボックスにはそのアイテムのラベルが表示されますが、画像は表示されません。

Answer 1

現在、それをカスタマイズする必要があります（選択したアイテムの画像ノードをコンボボックスにコピーします）、あなた自身の簡単なサンプル：

<zk xmlns:w="client">
    <style>
        .z-combobox-inp,
        .z-combobox-rounded-inp {
            padding-left: 30px;
        }
    </style>
    <combobox>
        <attribute w:name="bind_"><![CDATA[
            function (a, b, c) {
                this.$bind_(a, b, c);
                // anchor used to position selected image
                var n = this.$n(),
                    ref = n.firstChild,
                    span = document.createElement('span');
                jq(span).css('position', 'relative')
                    .addClass('custom-selected-image-anchor');
                n.insertBefore(span, ref);
            }
        ]]></attribute>
        <attribute w:name="_hilite2"><![CDATA[
            function (sel, opts) {
                this.$_hilite2(sel, opts);
                if (opts && opts.sendOnSelect && sel) {
                    var $anchor = jq(this.$n()).find('.custom-selected-image-anchor');
                    $anchor.find('.custom-selected-image')
                        .each(function () {
                            this.parentNode.removeChild(this);
                        });
                    $anchor[0].appendChild(
                        jq(sel.getImageNode()).clone() // clone node
                            .css({'position': 'absolute', // add style
                                'left': '0px',
                                'top': '3px'}) // also add class
                            .addClass('custom-selected-image')[0]       
                    );
                }
            }
        ]]></attribute>
        <comboitem label="test" image="images/battery.gif" />
        <comboitem label="test 2" image="images/left_arrow.png" />
    </combobox>
</zk>