推特板效果滑动框答案

【问题标题】：tweetboard effect sliding frame推特板效果滑动框
【发布时间】：2010-01-03 16:09:40
【问题描述】：

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

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

如果您能指出正确的资源来生成这种 UI，那就太好了。

提前致谢。

【问题讨论】：

标签： jquery layout slide out

【解决方案1】：

你必须做几件事：

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

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

点击您的识别按钮时动画。

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

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

3。连接一个“切换”以关闭面板，这可以通过将上面的代码替换为以下代码来完成：

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

您可以使用 iframe，但据我所知，当页面在 iframe 中完全加载时，无法执行回调。如果您正在尝试编写一个执行此操作的插件，那么用设置 iframe 的内容替换第一步将是可行的方法。

编辑：抱歉，如果任何代码块被弄乱了，所以没有根据空格格式化或使用编辑器中的“代码”按钮。

【讨论】：