Je travaille actuellement sur une fonctionnalité similaire pour notre api. Je charge un menu div avec des lignes de liens qui tirent le contenu ajax dans un div "view", puis j'anime le menu et ensuite j'anime la vue dans l'iFrame principal. C'était si facile à faire, alors jetez un coup d'œil à certains de mes javascript et html ci-dessous. Quand j'appuie sur ça, je vais revenir et mettre à jour la réponse, vous pouvez avoir une idée du produit fini. J'espère que cela t'aides.
<!-- 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>
Le matchHolder est utilisé pour afficher le contenu et chargé et est donnée à une position de sorte que son -600px caché en dehors de la partie supérieure de la iFrame. Ensuite, je fais un appel pour obtenir le tableau de bord pour un match
$(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() {
});
});
}
Tout mettre très vaguement ensemble pour le moment mais j'espère que cela vous donne une indication de l'endroit où commencer et qu'il est possible de le faire. Merci.