mint.com javascript dropdown effect

Question

J'ai besoin de recréer un effet que mint.com a sur un autre site. Lorsque vous allez à la page des transactions et cliquez sur l'une de vos transactions, un onglet apparaît en dessous qui dit éditer les détails. Lorsque vous cliquez sur cet onglet, un div déroulera exposant plus de détails sur la transaction. Je ne sais même pas quel genre d'effet cela s'appelle mais j'ai besoin de savoir pour recréer quelque chose comme ça de préférence avec jquery.

Il y a quelques captures d'écran de ce dont je parle ci-dessous.

closed http://img710.imageshack.us/img710/4066/screenshot1qt.png

open http://img25.imageshack.us/img25/8140/screenshotiz.png

Answer 1

seule chose que vous devez faire est d'obtenir la position de l'élément cliqué et afficher un div beugler il .. Bien sûr, vous avez besoin d'avoir quelque chose qui obtient toutes les informations supplémentaires et l'affiche .. donc première chose que je voudrais faire est de créer un div quelque part sur la page et le cacher

<div id="myEditRecordContainer" style="position:absolute; top: 0px; left: 0px; display: none"></div> 

je fixerait le gestionnaire de clic

$('.recordDiv').click(function(e){ 
    //get the position of the clicked element 
    var position = $(e.target).position(); 

    //set position of the div bellow the current element 
    $('div#myEditRecordContainer').css({"top" : position.top() + $(this).height() + "px", "left": position.left()}); 

    //some kind of method that will get or populate the extra information 
    //you can use the $.ajax() to get the html from a web service or something along those lines 
    var detailsHtml = GetExtraRecordDetails(); 
    $("div#myEditRecordContainer").html(detailsHtml); 

    //now display the div - we already set the css for the position 
    //correctly so it should just display where you wanted it 
    $("div#myEditRecordContainer").show(); 
}); 

et la seule chose que vous devez faire sur le « Je suis fait » bouton est appel

$("div#myEditRecordContainer").hide(); 

après avoir soumis les changements de cap :)

Je n'ai pas J'ai eu beaucoup de temps pour donner peut-être un exemple plus détaillé, mais ce n'était que le haut de ma tête ce que je ferais dans ce cas ..

J'espère vraiment que cela vous donne au moins une idée de ce que vous pouvez faire.

Answer 2

Voici un plugin jQuery qui fait exactement cela: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx