当前位置：文江博客话题详情

推特板效果滑动框架

发布于 2024-08-16 15:17:40 字数 271 浏览 12 评论 0原文

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

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

如果您能为我指出生成此类 UI 的正确资源，那就太好了。

提前致谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒儿 2024-08-23 15:17:40

您必须做几件事：

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

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

单击您的识别按钮时产生动画。

 $("#slider").click(function () {
           $(this).show("幻灯片", { 方向: "右" }, 1000);
     });

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

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

$("#slider").click(function () {
  if($(this).is(":隐藏")) {
      $(this).show("幻灯片", { 方向: "右" }, 1000);
   } 别的 {
      $(this).hide("幻灯片", { 方向: "向左" }, 1000);
   }
});

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

编辑：抱歉，如果任何代码块被搞乱，那么不会根据空格进行格式化或使用编辑器中的“代码”按钮。

You'll have to do a couple of things:

Load the external site into a div which is probably positioned absolutely off the page. (Note: you'd have to pass the external site through a proxy because $().load is AJAX)

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

Animate on click of your identifying button.

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

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

3. Wire up a 'toggle' to close the panel, this can be done by replacing the above code with something like:

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

You could use an iframe, but as far as I know, there is no way to perform a callback when the page is fully loaded in the iframe. If you're trying to write a plugin that does this, an replacing the first step with setting an iframe's content would be the way to go.

edit: sorry if any of the code blocks are messed up, SO isn't formatting according to whitespace or using the 'code' button in the editor.

回复收藏 0 原文

~没有更多了~