我正在使用
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");
});
这个问题肯定会解决.
