jquery - 推特板效果滑动框

Question

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

你会在左边看到一个推文标签。当您单击此推文标签时，会在此面板/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. 连接“切换”以关闭面板，这可以通过将上面的代码替换为以下代码来完成：

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

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

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