web-dev-qa-db-fra.com

Événement de développement / réduction pliable JQuery-Mobile

Quelqu'un connaît-il un autre moyen de capturer l'événement de développement ou de réduction d'un composant marqué par data-role="collapsible" en dehors de l'événement onclick de son en-tête?

EDIT: Je voudrais une sorte d'événement qui fournira également des informations sur l'état développé/réduit du composant.

jqueryjquery-mobile
21
Pablo

Il existe des événements personnalisés pour les blocs collapsible. Vous pouvez vous lier aux événements expand et collapse:

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

Voici un jsfiddle: http://jsfiddle.net/6txWy/

59
Jasper

Dans jQuery Mobile 1.4, il y a les événements collapsiblecollapse et collapsibleexpand . https://api.jquerymobile.com/collapsible/#event-collapse

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

Vous pouvez lier n'importe quel événement que vous voulez, par exemple:

Démo:

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

Vous pouvez essayer l'événement jQuery mobile tap. Je ne l'ai pas utilisé personnellement, mais j'entends qu'il est similaire au gestionnaire d'événements mousedown. Si vous avez donné un peu plus de détails sur les raisons pour lesquelles onclick ne fonctionne pas, nous pourrions peut-être vous aider un peu plus.

0
john

Je ne pense pas qu'il existe une autre façon de procéder. Je ne pense pas que vous puissiez utiliser animationComplete dans ce cas comme décrit ici:
http://jquerymobile.com/test/docs/api/events.html

Vous pouvez peut-être utiliser certaines modifications de classe sur les éléments spécifiques, ce qui n'est pas mieux que de lier un événement onclick de l'en-tête.

0
Smamatti