繁体   English   中英

JQueryUI在选项中添加图像

[英]JQueryUI adding an image in option

首先,我试图找到一个jquery的选择菜单插件,以便能够在选项中呈现图像。 我找到了这样的,但很久以前它没有更新,我担心它不再受支持了。 所以我正在努力发展我的。

所以我想创建一个JQuery UI Select菜单,我想在选项中添加一个图像。

然后,我构建我的选择,并为每个选项添加图像src数据作为附加属性。 加载jquery UI选择菜单后,我想设置图像。

我在服务器上渲染

 <select id="CarId2" name="CarId2"> <option value="volvo" data-imagesrc="~/Plugins/Cars/Content/Images/volvo.png">Volvo</option> <option value="bmw" data-imagesrc="~/Plugins/Cars/Content/Images/bmw.png">BMV</option> </select> 

在加载我试图读取jqueryui选择菜单的选项,并更新项目的内容,但...我甚至无法加载选项。

 $(document).ready(function () { $("#CarId2").selectmenu(); var options = $("#CarId2").selectmenu("option"); for (item in options) { console.log(item); } }); 

有人可以帮我如何加载ui选择菜单的选项并更新其内容?

您可以使用_renderItem方法中的selectmenu部件。
该函数负责在选择菜单中呈现元素,并使您能够以您希望的方式创建项目。

.selectmenu({
    ...
    _renderItem: function( ul, item ) {
        // Create the list item
        var li = $('<li>')
        // Create the image
        var img = $('<img>')
            .attr('src', $(item.element).data('imagesrc'))

        // append the img to the list item
        img.appendTo(li)

        // append the list item to the menu and return the item
        return li.appendTo( ul );
    }
    ...
})

看看selectmenu自定义渲染,你可以做类似的事情:

 $(function () { $.widget( "custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function( ul, item ) { var li = $( "<li>" ), wrapper = $( "<div>", { text: item.label } ); if ( item.disabled ) { li.addClass( "ui-state-disabled" ); } $( "<span>", { style: item.element.attr( "data-style" ), "class": "ui-icon " + item.element.attr( "data-class" ) }).appendTo( wrapper ); return li.append( wrapper ).appendTo( ul ); } }); $("#CarId2") .iconselectmenu() .iconselectmenu( "menuWidget") .addClass( "ui-menu-icons avatar" ); }); 
 /* select with CSS avatar icons */ option.avatar { background-repeat: no-repeat !important; padding-left: 20px; } .avatar .ui-icon { background-position: left top; } 
 <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <select name="CarId2" id="CarId2"> <option value="volvo" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option> <option value="bmw" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option> <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option> </select> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM