JQuery-Mobile разворачивается развернуть/свернуть событие
Кто-нибудь знает какой-либо другой способ захватить событие расширения или свертывания компонента, помеченного data-role="collapsible"
, кроме события onclick
его заголовка?
EDIT: Мне нужно какое-то событие, которое также предоставит информацию о расширенном/сведенном состоянии компонента.
Ответы
Ответ 1
Существуют специальные события для блоков collapsible
. Вы можете привязываться к событиям expand
и collapse
:
$('#my-collapsible').bind('expand', function () {
alert('Expanded');
}).bind('collapse', function () {
alert('Collapsed');
});
Вот jsfiddle: http://jsfiddle.net/6txWy/
Ответ 2
В jQuery Mobile 1.4 есть сбрасываемые сворачивающиеся и разворачивающиеся события. https://api.jquerymobile.com/collapsible/#event-collapse
$( ".selector" ).on( "collapsiblecollapse", function( event, ui ) {} );
Ответ 3
Вы можете связать любое событие, которое вы хотите, например:
Демо:
JS
$("div:jqmData(role='collapsible')").each(function(){
bindEventTouch($(this));
});
function bindEventTouch(element) {
element.bind('tap', function(event, ui) {
if(element.hasClass('ui-collapsible-collapsed')) {
alert(element.attr('id')+' is closed');
} else {
alert(element.attr('id')+' is open');
}
});
}
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible" id="number1">
<h3>Header #1</h3>
<p>I'm Header #1</p>
</div>
<br />
<div data-role="collapsible" data-collapsed="false" id="number2">
<h3>Header #2</h3>
<p>I'm Header #2</p>
</div>
</div>
</div>
Ответ 4
Я не думаю, что есть другой способ сделать это. Я не считаю, что вы можете использовать animationComplete
в этом случае, как описано здесь:
http://jquerymobile.com/test/docs/api/events.html
Возможно, вы можете использовать определенные изменения класса для определенных элементов, что на самом деле не лучше, чем привязка события onclick заголовка.
Ответ 5
Вы можете попробовать jQuery mobile коснуться события. Я не использовал его лично, но я слышал, что он похож на обработчик события mousedown
. Если вы дадите немного больше информации о том, почему onclick не работает, возможно, мы могли бы помочь вам немного больше.