推板效果滑架

Question

当您访问此链接时http://tweetboard.com/alpha/

您会在左侧看到一条Tweets标签。 当您单击此tweets标签时，另一个站点将加载到此面板/ iframe中。 您能帮我了解如何创建此功能吗？ 看来我应该能够使用标准HTML和jQuery创建此效果。

如果您可以为我提供生成此类UI的正确资源，那就太好了。

提前致谢。

Answer 1

您必须做几件事：

1. 将外部网站加载到div中，该div可能完全位于页面之外。 （注意：您必须通过代理传递外部站点，因为$（）。load是AJAX）

$（“＃sliderpanel”）。load（“ / getpagescript？q = http://www.google.com ”）;

2. 单击您的识别按钮进行动画处理。

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

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

3.连接“ toggle”以关闭面板，这可以通过将上面的代码替换为类似的代码来完成：

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

您可以使用iframe，但据我所知，当页面完全加载到iframe中时，无法执行回调。 如果您要编写一个可以执行此操作的插件，则可以通过设置iframe内容代替第一步。

编辑：对不起，如果任何代码块被弄乱了，那么SO不会根据空格格式化或使用编辑器中的“代码”按钮。