jquery-steps – 如何为每一步设置内容的动态高度?

前端之家收集整理的这篇文章主要介绍了jquery-steps – 如何为每一步设置内容的动态高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 Jquery步骤向导插件.我遇到的问题是,向导的每一步都有不同高度的内容.用于控制内容高度的示例中包含的css是
.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

我已经调整了最小高度和溢出属性,但仍然没有做我想要完成的.我想要的是只有高度足够容纳每一步的内容的高度.

例如,说我的步骤1有2个字段,步骤2有2个字段.在这些例子中,内容是相同的高度,所以看起来可怕的高度比2个字段要容纳10个字段要大得多第2步.

如果我删除最小高度属性,没有内容显示. Jquery步骤需要一个固定的高度来处理所有步骤吗?我希望有一种方式使高度动态地适应每个单独步骤的高度.

谢谢

解决方法

在jquery.steps.css中删除以下类的height属性
.wizard > .content > .body{height:95%;}

在 – jquery.steps.js中搜索

stepTitles.eq(state.currentIndex)
  .addClass("current").next(".body").addClass("current");

应该在844行左右.直接添加

stepTitles.eq(state.currentIndex).next(".body")
    .each(function () {
    var bodyHeight = $(this).height();
    var padding = $(this).innerHeight() - bodyHeight;
    bodyHeight += padding;
    $(this).after('<div class="' + options.clearFixCssClass + '"></div>');
    $(this).parent().animate({ height: bodyHeight },"slow");
});

这个问题肯定会解决.

原文链接:https://www.f2er.com/jquery/176422.html

猜你在找的jQuery相关文章