effet tweetboard cadre coulissant

Question

Lorsque vous visitez ce lien http://tweetboard.com/alpha/

vous verrez une étiquette Tweets sur la gauche. Lorsque vous cliquez sur cette étiquette de tweets, un autre site se charge dans ce panneau/iframe. Pouvez-vous s'il vous plaît m'aider à comprendre comment cette fonctionnalité est créée? Il semble que je devrais être capable de créer cet effet en utilisant HTML standard et jQuery.

Si vous pouvez me pointer vers les bonnes ressources pour générer ce genre d'interface utilisateur, qui sera grande.

Merci d'avance.

Answer 1

Vous devez faire deux choses:

1. Chargez le site externe dans un div qui est probablement placé tout à fait hors de la page. (Remarque: vous auriez à passer le site externe via un proxy car $() La charge est AJAX.)

$ ("# sliderpanel") charge ("/ getpagescript q = http://www.google.com?".)

2. Animate clic de bouton d'identification.

$("#slider").click(function() { 
      $(this).show("slide", { direction: "right" }, 1000); 
    }); 

/* see: http://docs.jquery.com/UI/Effects/Slide */ 

3. Fil un 'basculer' pour fermer le panneau, cela peut être fait en remplaçant le code ci-dessus avec quelque chose comme:

$("#slider").click(function() { 
    if($(this).is(":hidden")) { 
     $(this).show("slide", { direction: "right" }, 1000); 
    } else { 
     $(this).hide("slide", { direction: "left" }, 1000); 
    } 
}); 

Vous pouvez utiliser un iframe, mais pour autant que je sache, il n'y a aucun moyen d'effectuer un callb Ack lorsque la page est entièrement chargée dans l'iframe. Si vous essayez d'écrire un plugin qui le fait, un remplacement de la première étape par la définition du contenu d'un iframe serait le chemin à parcourir.

edit: désolé si l'un des blocs de code sont embrouillés, SO n'est pas mise en forme selon des espaces ou en utilisant le bouton « code » dans l'éditeur.