jQuery mobile ajouter une animation à pliable-set

Je voudrais ajouter une animation à réductible ensemble avec jQuery Mobile.
Laissez-moi vous montrer un exemple simple de cette:

<div id="tiles" data-role="collapsible-set" data-iconpos="right">
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>

jQuery Mobile gère parfaitement et me montre pliable série de 3 articles. Ce que je veux, c'est de l'ANIMATION, cependant, je ne semblent pas trouver quelque chose dans les docs.

Je n'ai pas encore testé comment de simples CSS animation(animation de la hauteur de la propriété), cependant est-il un jQuery Mobile façon de faire comme la transformation d'un indicateur interne ?

MODIFIER
J'ai testé un simple jQuery animate méthode et elle fonctionne réellement. Juste au cas où quelqu'un d'autre a besoin de cette. Il fonctionne bien même sur mon 528MHz téléphone Android sur un navigateur par défaut. Un extrait de code que j'ai ajouté est vraiment simple:

$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});

Pas hors de la boîte. Je pense que le problème est le traitement d'une page/fenêtre d'affichage dimensions (aka hauteur) lors d'une "développer" ou "effondrement" de la transition. Droit maintenant, vous cliquez sur un pliable et lorsque la grille est ouverte, les hauteurs de le mettre à jour. Faire cela "en transition" probablement semble horrible, en plus d'être une ressource de la crépine. Encore vous pouvez essayer par le simple ajout/retrait de la transition correspondante-classes (glisser vers le haut/vers le bas dans la case JQM CSS) pour développer et réduire l'événement à l'intérieur de la JQM pliable widget. Puis voir ce qui se passe 🙂
jQuery Mobile expose le expand et collapse événements pour réductible à des widgets. Si vous liez à ces événements, vous pouvez arrêter le comportement par défaut et d'animer l'événement à la place. Voir ma réponse ci-dessous.
Je savais que sur les événements, ne savent pas qu'ils sont exposés. Thx! Je suis également en utilisant le JQM css3 classes pour les non-éléments de la page. La partie la plus difficile avec collapsibles est "inline/statique" des éléments (vs positionné absolument). Donc quand j'utilise css3 animations sur des éléments en ligne je n'ai aucun moyen de mettre à jour des choses comme page-rembourrage au cours de la transition. Donc sur ios4 par exemple avec polyfill fixe le pied de page, le pied de page sera poussé hors de la vue au cours de la transition - pas que c'est un problème grave, mais quand même...
Je n'ai pas essayé, mais vous pouvez essayer absolument position de la grille de contenu. Quitter l'en-tête tout seul donc il faut de l'espace nécessaire, alors que le contenu de position absolue afin de ne pas prendre de l'espace lorsqu'il se dilate. Vous devrez peut-être définir la réductible conteneur de l'élément de position à relative donc, c'est les enfants de l'utiliser comme leur offset parent.
J'ai essayé position:absolute, en jouant avec la réductible (changé en un tabviewer = de gauche à droite). Alors qu'il est plus facile de définir la largeur d'un onglet dimensions, comme cela, c'était terrible si différents onglets a hauteur différente, parce que l'on n'ait aucun moyen de faire ce travail avec pos:abs/rel. Je peux creuser un exemple si vous voulez avoir un look.

OriginalL'auteur lukas.pukenis | 2012-05-03

jquery-mobile

6

Ici ya go:
```
$('[data-role="collapsible"]').bind('expand collapse', function (event) {
    $(this).find('p').slideToggle(500);
    return false;
});
```
J'ai aimé l'idée que vous alliez pour si j'ai joué un peu avec elle un peu. Cette crochets dans la façon de jQuery Mobile contrôles pliable widgets c'est donc un peu moins hacky puis de liaison à l'élément d'en-tête.

La return false; arrête le comportement par défaut et l'autre ligne active ou désactive le contenu dans/hors de la vue à l'aide de jQuery slideUp/slideDown animations. Vous pouvez également utiliser .fadeToggle() ou rouler vos propres animations. Si vous cochez event.type vous pouvez animer basé sur l'événement déclenché.

Voici une démo: http://jsfiddle.net/VtVFB/

merci pour l'amélioration de la solution
Je n'ai pas beaucoup d'expérience avec html, mais je suis de déconner avec jquery mobile dès maintenant. Où exactement cet extrait de code aller?
Je place ce code à l'intérieur d'un pageinit gestionnaire d'événement pour une page spécifique ou un ensemble de pages: $(document).on("pageinit", "#somePageID, #someOtherPageID", function () { ... PLACE CODE HERE ... });. Cette pageinit gestionnaire d'événement doit être exécuté dans la portée globale.
J'ai essayé d'obtenir que cela fonctionne, mais je reçois une erreur de syntaxe sur }); Mon code: $(document).("pageinit", "[data-role= "page"]", function () { $("[data-role='réductible']").bind("expand collapse", function (event) { }); });
Je ne vois pas d'erreurs de syntaxe dans le code que vous avez posté. Aussi, j'avais préfixe de votre intérieur choisissez d'utiliser $(this).find(... de sorte que vous ne lient à l'pliante les éléments de la page qui est en cours d'initialisation.

OriginalL'auteur Jasper
2

Veuillez noter que jQuery Mobile 1.4 et vous avez besoin de se lier à l' collapsibleexpand et collapsiblecollapse des événements au lieu de expand et collapse. Donc le code complet devient
```
$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});
```
Cela a fonctionné pour moi, pouvez-vous expliquer comment fonctionne ce sélecteur de travail? $('[data-role="collapsible"]')

OriginalL'auteur Peter Kassenaar
0

Le code n'est pas tout à fait juste.
Il remplace la valeur par défaut de jquery mobile de mise en œuvre de l'expansion de l'effondrement des événements,
mais ne gère pas le changement de l'expansion de l'effondrement des icônes.

Un meilleur code sera:
```
$('[data-role="collapsible"] h3:first').bind('click', function (event) {
   $(this).next('p').slideToggle(500);
   return false;
});
```
OriginalL'auteur Daniel Berler

La accepté de répondre à n'en compte qu'il ne marche pas changer le réductible curseur en raison de retourner false, c'est donc ma réponse:

Dans mon Projet, c'est le contenu par rapport à la [date-role="collapsible"] sont $(this).find('>*:not(h3)')

/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if (!$(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
}).on('collapse', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if ($(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
});

OriginalL'auteur Prozi

Vous devez vous connecter pour publier un commentaire.