使用jQuery UI的Selectmenu保持图片 [英] Keep picture with Selectmenu of jQuery UI
本文介绍了使用jQuery UI的Selectmenu保持图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用jquery UI-选择菜单"以建立带有图片的列表. 我点击了此链接,它很好. 但是,当您选择一个项目时,仅文本在复制,而不是图片在复制. 我解释为什么我要照片.我有一个列表,没有文本,只有图片,然后当您选择一个项目时,您会看到一个空的跨度... 有人有主意吗?
I use jquery UI - Select Menu to build a List with picture. I follow this link and it's good. But When you select an item, just the text is copying, not the picture. I explain why I want picture. I've a List with no text, just picture, then When you choose an item, you see an empty span ... Someone have an idea?
这里是我的代码
<script type="text/javascript">
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>", { html: item.element.html() });
var attr = item.element.attr("data-style");
if (typeof attr !== typeof undefined && attr !== false) {
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon TFOOptlstFiltreImg"
}).appendTo(li);
}
return li.appendTo(ul);
}
});
$("#people")
.iconselectmenu().iconselectmenu("menuWidget").addClass("ui-menu-icons");
});
</script>
<style type="text/css">
select
{
width: 200px;
}
</style>
<select name="people" id="people">
<option value="1" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option>
<option value="2" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16');">Tauren Mills</option>
<option value="3" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16');">Jane Doe</option>
</select>
推荐答案
使用JQuery UI 选择菜单我提出了以下解决方案的示例:
Using JQuery UI selectmenu examples i came up with the following solution:
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
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);
}
});
$("#people")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="avatar-selected"> ').html(" ").appendTo(widget);
$span.attr("style", $(this).children(":first").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
和相应的CSS:
.ui-selectmenu-menu .ui-menu.avatar .ui-menu-item-wrapper {
padding: 2px 10px 0 30px;
}
.ui-selectmenu-menu .ui-menu.avatar .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-selectmenu-text {
padding-left: 2em;
}
.avatar-selected {
position:absolute;
height: 24px;
width: 24px;
right:auto;
margin-top:-12px;
top:50%;
background-repeat:no-repeat;
}
这篇关于使用jQuery UI的Selectmenu保持图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文