JQuery - 如何将外部内容加载到一个div中，使用滑动效果切换div，并向下自动滚动以查看展开的div [英] JQuery - How to load external contents into one div, toggle div with sliding effect, and autoscroll down to see expanded div

问题描述

在我的HTML页面上，我有：

连续排列4张图片，坐在下面的
1 div - 折叠。

根据用户点击的图像，我想将相应的外部页面内容加载到该DIV中（使用ajaxpage.js？）。

当内容被加载到DIV中时，DIV应该通过滑动操作来切换打开。 （使用jquery.togglr.js？）

我也希望浏览器自动向下滚动到扩展的DIV，否则，用户可能看不到额外的内容被打开。滚动应该具有缓解作用。 （使用jquery.scrollTo.js？）

最后，如果用户点击与打开DIV相同的图像，它应该切换DIV关闭。如果用户点击了DIV已经打开的另一个图像，那么只需加载新内容而不必关闭并打开DIV。

难点在于如何正确整合所有不同的jQuery插件，以获得所需的行为？

谢谢。

解决方案

好吧，首先，您需要在4张图片上点击事件处理程序：

/ p>

  $（'img.fourImageCssClass'）。click（function（）{
 //在click上做某事。$ （this）是一个代表你点击图片的对象
 var imgSrc = $（this）.attr（'src'）; 
}）; 
  

接下来，您需要获取对< div> 在您的点击处理函数中：

  var yourDiv = $（'＃div-id'）; 
  

然后您可以使用 $。ajax（）方法来抓取内容并将其加载到div中。完成后， slideUp / slideDown 函数将负责打开/关闭div。

最后，为了顺利滚动，您可以为 scrollTop属性 offset（）或你的div的postion（）。

On my HTML page, I have:

4 images sitting in a row, and 1 div sitting immediately underneath - collapsed.

Depending on which image the user clicks, I would like to load the corresponding external page content into that DIV (using ajaxpage.js?).

When the content gets loaded into the DIV, the DIV should toggle open with a sliding action. (using jquery.togglr.js?)

I also would like the browser to automatically scroll down to the expanded DIV, otherwise, the user might not see that extra content has been toggled open. The scrolling should have an easing effect. (using jquery.scrollTo.js?)

Finally, if the user clicks on the same image that toggled the DIV open, it should toggle the DIV close. If the user clicks on another image with the DIV already open, then just load the new content without having to close and open the DIV.

The difficulty is how to properly integrate all the different jquery plugins to get the desired behaviors?

Thanks.

解决方案

Well, to start you'll need a click event handler on your 4 images:

$('img.fourImageCssClass').click(function(){
    // do something on click.  $(this) is an object that represents your clicked image
    var imgSrc = $(this).attr('src');
});

Next you'll need to grab a reference to your <div> in your click handler function:

var yourDiv = $('#div-id');

Then you can use the $.ajax() method to grab the content and load it into your div. Once that's done, the slideUp/slideDown functions will take care of opening/closing the div.

Finally to smoothly scroll, you can just animate the scrollTop property of the window. To know where to scroll to, you can get the offset() or postion() of your div.

这篇关于JQuery - 如何将外部内容加载到一个div中，使用滑动效果切换div，并向下自动滚动以查看展开的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！