使用 Jquery + Masonry 插件的帮助:如何展开/折叠框以显示内容 [英] Help with Jquery + Masonry Plugin: How to expand/collapse boxes to reveal content

问题描述

我在一个项目中使用 masonry jquery 插件:(http://desandro.com/resources/jquery-masonry)

基本上，我在网格中有一组框(缩略图).单击一个时，我希望它扩大到更大的尺寸以显示更多内容(附加图像和文本).我正在努力解决如何让缩略图消失，然后让新内容出现在展开的框中.我不知道如何使新内容出现或将其存储在我的页面上的什么位置——它需要有一个关闭按钮吗?插件的创建者给了我一个关于扩展部分的快速提示，但是我使用的代码有一个固定的高度和宽度，我希望它们根据处于展开状态的内容量而变化.

到目前为止，这是我的 jquery 代码:http://pastie.org/1002101

这是我想要实现的行为的类似示例(除了我的盒子将具有不同的扩展尺寸):(http://www.learnsomethingeveryday.co.uk)

您还会从该示例中注意到，它一次只允许展开 1 个框——我也希望拥有该功能.

抱歉所有问题——我对 jquery 很陌生，任何帮助都会很棒！

解决方案

试试这个(demo here):

$(document).ready(function(){$('#grid').masonry({单一模式:假，itemSelector: '.box',动画:真});$('.box').click(function(){if ($(this).is('.expanded')){恢复框()；} 别的 {恢复框()；$(这个)//保存原始框大小.data('size', [ $(this).width(), $(this).height() ]).动画({宽度:335，身高:335}， 功能(){$('#grid').masonry();}).addClass('expanded');}函数恢复框(){var len = $('.expanded').length - 1;$('.expanded').each(function(i){var box = $(this).data('size');$(this).animate({宽度:(框[0] || 100)，高度:(框[1] || 'auto')}， 功能(){如果 (i >= len) {$('#grid').masonry();}}).removeClass('expanded');})}});});

<小时>

更新:您好 Jam，我不知道您为我留下了评论，下次请在答案下添加评论或更新您的问题.你也可以在人名前加上@"，他们会得到一个消息标志.

针对您关于设置大小和隐藏内容的问题，我修改了 demo(漂亮包括所有的 HTML 和 CSS)来显示不同宽度的框.让单击框展开以包含所有隐藏内容有一个小问题.通常，隐藏内容的高度和宽度为零.但是 jQuery 能够确定隐藏内容的大小，但它仍然存在一些问题，因为您可能需要限制隐藏内容的宽度或高度.所以我最终做的是在盒子内部添加隐藏内容，并向包含扩展隐藏内容的宽度和高度的盒子添加 data-size 属性，例如:

我还提供了一种在框展开时隐藏可见内容的方法，方法是向内容添加 hideable 类，因为您提供的图像似乎隐藏了原始内容:

如果未设置 data-size 属性，则脚本将默认为 defaultSize 设置:

注意演示使用 $(document).ready(function(){...}) 而不是 $(window).load(masonry 的作者推荐的 function(){...}) 因为 jFiddle 只是不想处理窗口加载.

$(window).load(function () {var defaultSize = [180, 180];//扩展框尺寸:[width , height]$('#grid').masonry({单一模式:假，列宽:100，可调整大小:真实，itemSelector: '.box',动画:真});$('.box').click(function () {if ($(this).is('.expanded')) {恢复框()；} 别的 {var size = ($(this).attr('data-size')) ?$(this).attr('data-size').split(',') : defaultSize;$(这个)//保存原始框大小.data('size', [$(this).width(), $(this).height()]).animate({宽度:尺寸[0]，高度:尺寸[1]}， 功能 () {//当盒子完全展开时显示隐藏的内容$(this).find('.expandable').show('slow');$(this).find('.hideable').hide('slow');$('#grid').masonry();});恢复框()；$(this).addClass('expanded');}功能恢复框(){var len = $('.expanded').length - 1;$('.expanded').each(function (i) {var box = $(this).data('size');$(this).find('.expandable').hide('slow');$(this).find('.hideable').show('slow');$(this).animate({宽度:(框[0] || 100)，高度:(框 [1] || '自动')}， 功能 () {如果 (i >= len) {$('#grid').masonry();}}).removeClass('expanded');})}});});

I'm using the masonry jquery plugin on a project: (http://desandro.com/resources/jquery-masonry)

Basically I have a set of boxes (thumbnails) in a grid. When one is clicked, I want it to expand to a larger size to show more content (additional images and text). I'm struggling with how to make the thumbnail dissappear and then have new content appear in the expanded box. I don't know how to make the new content appear or where to store it on my page--and it needs to have a close button? The creator of the plugin gave me a quick tip for the expanding part, but the code I'm using has a set height and width and I want them to be variable depending on how much content is in the expanded state.

Here's my jquery code so far: http://pastie.org/1002101

This is a similar example of the behaviour I want to achieve (except my boxes will have have varying expanded sizes): (http://www.learnsomethingeveryday.co.uk)

You'll also notice from that example that it only allows 1 box to be expanded at a time--I would also like to have that functionality.

Sorry for all the questions--I'm pretty new to jquery, any help would be amazing!

解决方案

Try this (demo here):

$(document).ready(function(){

 $('#grid').masonry({
    singleMode: false,
    itemSelector: '.box',
    animate: true
 });

 $('.box').click(function(){
  if ($(this).is('.expanded')){
   restoreBoxes();
  } else {
   restoreBoxes();
   $(this)
    // save original box size
    .data('size', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $('#grid').masonry();
    })
    .addClass('expanded');
  }

  function restoreBoxes(){
   var len = $('.expanded').length - 1;
   $('.expanded').each(function(i){
    var box = $(this).data('size');
    $(this).animate({
      width: ( box[0] || 100 ),
      height: ( box[1] || 'auto' )
     }, function(){
        if (i >= len) {
       $('#grid').masonry();
      }
    })
    .removeClass('expanded');
   })
  }
 });
});

---

Update: Hi Jam, I didn't know you left a comment for me, next time please add comments under the answer or update your question. Also you can put "@" in front of the person's name and they will get a message flag.

In response to your question about set size and hidden content, I modified the demo (pretty much all of the HTML and CSS included) to show varying width boxes. Having the clicked box to expand to contain all of the hidden content has a slight problem. Normally, hidden content has a height and width of zero. But jQuery is able to determine the hidden content size, but it still has some problems because you might need to limit the width or height of the hidden content. So what I ended up doing was adding the hidden content in a inside of the box and adding a data-size attribute to the box which contains the width and height of the expanded hidden content, for example:

<div class="box" data-size="380,380">
    <p>This is the visible content.</p>
    <div class="expandable">
        This is the hidden content which shows when the box is clicked.
    </div>
</div>

I've also included a way to hide the visible content when the box is expanded, by adding a hideable class to the content, since the image you provided seems to have the original content hidden:

<div class="box" data-size="380,380">
    <p class="hideable">This is the visible content.</p>
    <div class="expandable">
        This is the hidden content which shows when the box is clicked.
    </div>
</div>

If the data-size attribute is not set, then the script will default to the defaultSize setting:

Note the demo is using $(document).ready(function(){...}) instead of $(window).load(function(){...}) as recommended by the author of masonry because jFiddle just doesn't want to work with window load.

$(window).load(function () {

    var defaultSize = [180, 180]; // expanded box size: [width , height]
    $('#grid').masonry({
        singleMode: false,
        columnWidth: 100,
        resizeable: true,
        itemSelector: '.box',
        animate: true
    });

    $('.box').click(function () {
        if ($(this).is('.expanded')) {
            restoreBoxes();
        } else {
            var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize;
            $(this)
            // save original box size
            .data('size', [$(this).width(), $(this).height()]).animate({
                width: size[0],
                height: size[1]
            }, function () {
                // show hidden content when box has expanded completely
                $(this).find('.expandable').show('slow');
                $(this).find('.hideable').hide('slow');
                $('#grid').masonry();
            });
            restoreBoxes();
            $(this).addClass('expanded');
        }

        function restoreBoxes() {
            var len = $('.expanded').length - 1;
            $('.expanded').each(function (i) {
                var box = $(this).data('size');
                $(this).find('.expandable').hide('slow');
                $(this).find('.hideable').show('slow');
                $(this).animate({
                    width: (box[0] || 100),
                    height: (box[1] || 'auto')
                }, function () {
                    if (i >= len) {
                        $('#grid').masonry();
                    }
                }).removeClass('expanded');
            })
        }
    });
});

这篇关于使用 Jquery + Masonry 插件的帮助:如何展开/折叠框以显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！