#jquery #jquery-ui
#jquery #jquery-пользовательский интерфейс
Вопрос:
Я использую jQuery UI для отображения выпадающего меню выбора со значками для каждой опции. Я хотел бы вызвать событие, когда пользователь нажимает на опцию.
Вот фрагмент :http://jsfiddle.net/L8p5n41j /
Мой HTML :
$(function() {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
change: function(event, ui) {
alert("TEST");
},
_renderItem: function(ul, item) {
var li = $("<li>", {
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(li);
return li.appendTo(ul);
}
});
$("#people")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
Мой jQuery :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<select name="people" id="people">
<option value="1" data-class="avatar" data-style="background-image: url(amp;apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsteridamp;amp;r=gamp;amp;s=16amp;apos;);">John Resig</option>
<option value="2" data-class="avatar" data-style="background-image: url(amp;apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsteridamp;amp;r=gamp;amp;s=16amp;apos;);">Tauren Mills</option>
<option value="3" data-class="avatar" data-style="background-image: url(amp;apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsteridamp;amp;r=gamp;amp;s=16amp;apos;);">Jane Doe</option>
</select>
Комментарии:
1. Я сделал для вас фрагмент, который я имел в виду.
2. Поскольку вы используете SelectMenu в своем виджете, вы можете использовать стандартное
select
событие для этого виджета: api.jqueryui.com/selectmenu/#event-select3. Какую функцию или действие вы хотите вызвать при
select
срабатывании?
Ответ №1:
Рассмотрим следующий код:http://jsfiddle.net/Twisty/brsfmk5d/5 /
$(function() {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function(ul, item) {
var li = $("<li>", {
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(li);
return li.appendTo(ul);
}
});
$("#people").iconselectmenu({
select: function(e, ui) {
console.log("Selected: " ui.item.label);
}
})
.addClass("ui-menu-icons avatar");
});
Когда элемент выбран, select
запускается обратный вызов, и вы можете увидеть выбранную метку в консоли.
тип изменения (событие, пользовательский интерфейс): selectmenuchange
Срабатывает при изменении выбранного элемента. Не каждое
select
событие запускает событие изменения.тип выбора (событие, пользовательский интерфейс): selectmenuselect
Срабатывает при выборе пункта меню.
Надеюсь, это поможет.