Question

在花费数小时阅读横向手风琴的各种JScript和CSS3版本后，我正在寻找的内容很难找到......

基本上，我们支付并使用了许多Telerik控件的地狱，而且对于特定页面，我有3个RadGrids和一个RadHTMLBarChart，如果你愿意，我希望在4个单独的面板中显示..

我真正希望显示这些的方式是在水平手风琴中，但考虑到内容主要是动态的，因为高度可以调整radgrid给定其保持的记录数或宽度可能调整图表取决于显示固定宽度版本的列数实际上不起作用...

那么，有没有合适的水平手风琴版本，有人知道我可以在我的项目中使用这种情景吗？

JS或CSS3我不介意......

提前致谢！亚当。

Answer 1

使用CSS3可以实现水平手风琴，但需要注意的是，您需要使用CSS预编译器，例如LESS或SASS（我在这里使用LESS）。

需要使用无序列表<ul>，<label>和<input>单选按钮。

@slideWidth: 3%;
@totalWidth: 100%;

.slider(@slides) {
    input[type="radio"]:checked ~ .accslide {
        width: @totalWidth * ((@totalWidth - (@slideWidth * @slides)) / 100);
    }
}

上面定义的“class”.slider（@slides）是使用每个滑动分隔器的宽度计算滑动部分相对于屏幕的正确尺寸（表示为100％宽度）（表示为3％宽度））。

“class”.accslide是实际的“幻灯片部分”，可以作为“General Sibling”访问。

以下是codepen中的一些工作。

为了处理手风琴的动画，每个“accslide”使用另一个名为.transitionArgs（@arguments）的LESS“类”，它被称为“mixin”，这使您可以处理浏览器的交叉兼容性。

.transitionArgs(@arguments) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -ms-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}

如果您有任何疑问，请随时提出。

自动可缩放（高度和宽度）动画水平手风琴

1 个答案: