2010-05-19 19 views
9

Muszę odtworzyć efekt, który mint.com ma na innej stronie. Po przejściu do strony transakcji i kliknięciu jednej z transakcji pojawi się zakładka zawierająca szczegóły dotyczące edycji. Po kliknięciu tej zakładki div zostanie opuszczony, ujawniając więcej szczegółów dotyczących transakcji. Nie wiem nawet, jaki efekt wywołuje ten efekt, ale muszę wiedzieć, aby odtworzyć coś takiego, najlepiej przy pomocy jquery.mint.com javascript dropdown effect

Istnieje kilka zrzutów ekranu z tego, o czym mówię poniżej.

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

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

+0

Man, teraz masz mnie głodny do pizzy! – Josh

+0

o_O lol i piwo? Myślę, że znalazłem to, czego szukam. Miałem moment aha i uświadomiłem sobie, że jest to efekt akordowy i wkrótce potem znalazłem rozwiązanie. –

Odpowiedz

4

Jedyną rzeczą, którą musisz zrobić, to położenie elementu klikniętego i wyświetlanie div ryczeć to .. oczywiście trzeba mieć coś, co dostaje wszystkie dodatkowe informacje i wyświetla je .. więc pierwszą rzeczą, którą chciałbym zrobić, to stworzyć div gdzieś na stronie i ukryć to

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

wtedy ustawić obsługi kliknij

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

a jedyną rzeczą, jaką trzeba zrobić na przycisk „skończę” jest wywołanie

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

po złożeniu zmiany oczywiście :)

nie mam dużo czasu, aby dać może bardziej szczegółowy przykład, ale to był tylko szczyt mojej głowy, co bym zrobił w tym przypadku ..

Naprawdę mam nadzieję, że to przynajmniej daje wyobrażenie o tym, co możesz zrobić.

+0

Właściwie już to rozgryzłem, ale dziękuję za wkład. –