я в настоящее время работаю над аналогичной функцией для нашего API. Я и загружая меню div с строками ссылок, которые вытягивают содержимое ajax в div «view», я затем анимирую меню и анимирую представление в основной iFrame. Это было так легко сделать, чтобы проверить некоторые из моих javascript и html ниже. Когда я подниму это, я вернусь и уточню ответ, который вы можете раздобыть на готовом изделии. Надеюсь это поможет.
<!-- list all the available matches first -->
<div id="MatchContainer">
<div id="spinner"></div>
<div id="matchesListHolder">
<% if @matches %>
<% @matches.each do |match| %>
<%= render :partial => 'plugins/live/clubs/matches_list_item', :locals => {:match => match} %>
<% end %>
<% else %>
There are currently no matches to display
<% end %>
</div>
<div id="matchHolder">
</div>
<div id="closeMatchView">x</div>
</div>
The matchHolder используется для отображения загруженного и содержания, и дается -600px положение так, чтобы его скрыт за пределами верхней части фрейма. Тогда я сделать вызов, чтобы получить оценочный лист на матч
$(function() {
// click event fired to change to the match view window
$('.matchLink').click(function(event) {
if (!clicked) {
clicked = true; // stop click reptition
event.preventDefault();
var live = ($(this).attr('live') == 'true') ? true : false;
var matchId = Number($(this).attr('id'));
$('#matchesListHolder').animate({top: -600}, 500, function() {
$(this).hide();
$('#spinner').show();
if (live) {
displayLiveMatch(matchId);
} else {
displayMatch(matchId);
}
});
}
});
// click function on the close button when the match view window is open
$('#closeMatchView').click(function() {
closeMatchView();
});
});
// display a scorecard for a finished match
function displayMatch(id) {
$.get('/plugins/matches/scorecard/' + id, function(response) {
$('#matchHolder').empty().html(response);
moveDownMatchHolder();
});
}
// move down the match holder container into the iframe
function moveDownMatchHolder() {
$('#spinner').hide();
$('#matchHolder').show().animate({top: 0}, 500, function() {
$('#closeMatchView').show();
});
}
// close the match view and re open the matches list
function closeMatchView() {
$('#closeMatchView').hide();
clicked = false;
$('#matchHolder').animate({top: -600}, 500, function() {
$(this).hide();
$('#matchesListHolder').show().animate({top: 0}, 500, function() {
});
});
}
Все очень свободно положить вместе в тот момент, но я надеюсь, что это дает вам представление о том, с чего начать и что можно сделать. Благодарю.