mint.com javascript dropdown effect

Question

Мне нужно воссоздать эффект, который mint.com имеет на другом сайте. Когда вы переходите на страницу транзакций и нажимаете на одну из своих транзакций, под ней появляется вкладка, в которой указаны детали редактирования. Когда вы нажмете на эту вкладку, div выпадает, раскрывая более подробную информацию о транзакции. Я даже не знаю, как этот эффект называется, но мне нужно знать, чтобы воссоздать что-то вроде этого предпочтительно с помощью jquery.

Есть несколько снимков экрана, о которых я говорю ниже.

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

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

Answer 1

Единственное, что вам нужно будет сделать, это получить позицию щелкнутого элемента и отобразить ДИВ ржало это .., конечно, нужно иметь что-то, что получает всю дополнительную информацию и отображает его .. поэтому первое, что я хотел бы сделать, это создать DIV где-нибудь на странице и скрыть его

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

, то я бы установить обработчик щелчка

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

и единственное, что вам нужно будет сделать на кнопку «Я сделал» это вызов

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

после подачи изменения курса :)

у меня не было много времени, чтобы дать, может быть, более подробный пример, но это было только в моей голове, что бы я сделал в этом случае.

Я действительно надеюсь, что это по крайней мере дает вам представление о том, что вы можете делать.

Answer 2

Вот плагин JQuery, который делает только что: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx