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