mint.com javascript下拉效果

Question

我需要重新创建mint.com在另一个网站上的效果.当您转到交易页面并单击其中一个交易时,会在下方弹出一个选项卡,其中显示编辑详细信息.当您单击该选项卡时,div将下拉,显示有关该事务的更多详细信息.我甚至不知道这种效果是什么,但我需要知道用jquery重新创建这样的东西.

我在下面谈论的是一些屏幕截图.

已关闭http://img710.imageshack.us/img710/4066/screenshot1qt.png

打开http://img25.imageshack.us/img25/8140/screenshotiz.png

Answer 1

您唯一需要做的就是获取单击元素的位置并在其下方显示一个 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();

当然提交更改后:)

我没有太多的时间来给出一个更详细的例子，但这只是我在这种情况下会做的事情。

我真的希望这至少能让你知道你能做什么。