ti-enxame.com

Evento de expansão / recolhimento recolhível JQuery-Mobile

Alguém conhece outra maneira de capturar o evento de expansão ou recolhimento de um componente marcado com data-role="collapsible" além do evento onclick do cabeçalho?

EDIT: Gostaria de algum tipo de evento que também forneça informações sobre o estado expandido/recolhido do componente.

21
Pablo

Existem eventos personalizados para os blocos collapsible. Você pode vincular aos eventos expand e collapse:

$('#my-collapsible').bind('expand', function () {
    alert('Expanded');
}).bind('collapse', function () {
    alert('Collapsed');
});

Aqui está um jsfiddle: http://jsfiddle.net/6txWy/

59
Jasper

No jQuery Mobile 1.4, existem os eventos collapsiblecollapse e collapsibleexpand . https://api.jquerymobile.com/collapsible/#event-collapse

$( ".selector" ).on( "collapsiblecollapse", function( event, ui ) {} );
14
Robin Manoli

Você pode vincular qualquer evento que desejar, por exemplo:

Demo:

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>
3
Phill Pafford

Você pode tentar o evento de toque jQuery mobile . Eu não o usei pessoalmente, mas ouvi dizer que é semelhante ao manipulador de eventos mousedown. Se você forneceu um pouco mais de detalhes sobre por que o onclick não está funcionando, talvez possamos ajudá-lo um pouco mais.

0
john

Eu não acho que haja outra maneira de fazer isso. Não acredito que você possa utilizar animationComplete neste caso, conforme descrito aqui:
http://jquerymobile.com/test/docs/api/events.html

Talvez você possa utilizar determinadas alterações de classe nos elementos específicos, o que de fato não é melhor do que vincular um evento onclick do cabeçalho.

0
Smamatti