mint.com эффект выпадающего javascript - PullRequest
9 голосов
/ 20 мая 2010

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

Есть несколько скриншотов того, о чем я говорю ниже.

закрыто http://img710.imageshack.us/img710/4066/screenshot1qt.png

открыто http://img25.imageshack.us/img25/8140/screenshotiz.png

Ответы [ 2 ]

4 голосов
/ 20 мая 2010

единственное, что вам нужно сделать, это определить положение элемента, по которому щелкнули мышью, и отобразить нижеприведенный элемент div ... конечно, вам нужно иметь что-то, что получает всю дополнительную информацию и отображает ее ... поэтому первым делом я бы сделал это создать 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();

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

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

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

1 голос
/ 04 августа 2010

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

...