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并隐藏它

<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

mint.com javascript下拉效果

2 个答案: