mint.com Javascript Dropdown-Effekt

Question

Ich muss einen Effekt neu erstellen, den mint.com auf einer anderen Website hat. Wenn Sie auf die Transaktionsseite gehen und auf eine Ihrer Transaktionen klicken, erscheint darunter ein Tab mit Details zum Bearbeiten. Wenn Sie auf diese Registerkarte klicken, wird ein Div angezeigt, der weitere Details zur Transaktion anzeigt. Ich weiß nicht einmal, wie diese Art von Effekt genannt wird, aber ich muss wissen, dass ich sowas am liebsten mit jQuery neu erstellen soll.

Es gibt einige Screenshots von dem, worüber ich spreche unten.

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

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

Answer 1

nur, was Sie tun würden müssen, ist die Position des angeklickten Element erhalten und ein div es .. natürlich unten angezeigt Sie müssen etwas haben, die alle zusätzlichen Informationen erhält und zeigt es .. so erste, was ich tun würde, ist ein div irgendwo auf der Seite erstellen und verstecken es

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

dann würde ich den Click-Handler gesetzt

$('.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(); 
}); 

und das einzige, was Sie auf den „Ich bin fertig“, um zu tun, brauchen würde, ist Aufruf

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

nachdem sie die Änderungen natürlich Absenden :)

ich nicht haben eine Menge Zeit, um vielleicht ein ausführlicheres Beispiel zu geben, aber das war nur von der Spitze meines Kopfes, was ich in diesem Fall tun würde.

Ich hoffe wirklich, dass dies zumindest Ihnen eine Idee gibt, was Sie können machen.

Answer 2

Hier ist ein jQuery-Plugin, das nur funktioniert das: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx