mint.com javascript dropdown effect

Question

Ho bisogno di ricreare un effetto che mint.com ha su un altro sito web. Quando si accede alla pagina delle transazioni e si fa clic su una delle transazioni, viene visualizzata una scheda sotto che riporta i dettagli della modifica. Quando si fa clic su tale scheda verrà visualizzato un div che espone ulteriori dettagli sulla transazione. Non so nemmeno che effetto abbia questo tipo di effetto, ma ho bisogno di sapere per ricreare qualcosa di simile preferibilmente con jquery.

Ci sono alcuni screenshot di ciò di cui sto parlando qui sotto.

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

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

Answer 1

unica cosa che avrebbe bisogno di fare è ottenere la posizione dell'elemento cliccato e visualizzare un div muggito esso .. naturalmente è necessario avere qualcosa che ottiene tutte le informazioni supplementari e lo visualizza .. quindi prima cosa che vorrei fare è creare un div da qualche parte sulla pagina e nasconderlo

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

quindi vorrei impostare il gestore di 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(); 
}); 

e l'unica cosa che avrebbe bisogno di fare sul pulsante "ho finito" è chiamata

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

dopo aver presentato i cambiamenti di rotta :)

non ho avuto un bel po 'di tempo per dare forse un esempio più dettagliato ma questo era proprio il massimo della mia testa quello che avrei fatto in questo caso ..

Spero davvero che questo almeno ti dia un'idea di cosa puoi fare.

Answer 2

Qui è un plugin jQuery che fa proprio questo: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx