mint.com JavaScript раскрывает эффект
Я должен воссоздать эффект, который mint.com имеет на другой веб-сайт. Когда Вы переходите к странице транзакций и нажимаете на одну из своих транзакций, вкладка открывается под этим, говорят детали редактирования. Когда Вы нажмете на ту вкладку, отделение будет выпадающее представление большего количества деталей о транзакции. Я даже не знаю то, чем этим видом эффекта это называют, но я должен знать для воссоздания чего-то вроде этого предпочтительно с jQuery.
Существуют некоторые снимки экрана того, о чем я говорю ниже.
2 ответа
Единственное, что вам нужно сделать, это получить позицию элемента, на который был произведен щелчок, и отобразить под ним 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();
});
, и единственное, что вам нужно было бы сделать с кнопкой «Я готов», это call
$("div#myEditRecordContainer").hide();
после отправки изменений, конечно :)
У меня не было много времени, чтобы привести, возможно, более подробный пример, но это было лишь частью моей головы, что я буду делать в этом случае. .
Я действительно надеюсь, что это, по крайней мере, даст вам представление о том, что вы можете сделать.
Вот плагин jQuery, который делает именно это: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery -jExpand-plugin.aspx