Question

我正在使用Bootstrap's Carousel创建一个显示一堆Highcharts小部件的信息中心。我已成功实现它，因此1图表显示并使用一些“分块”逻辑一次显示2个小部件。这一切都很好，但我想增强一些东西：

如果用户的屏幕尺寸足以容纳2个图表，则显示2个图表并按2分页。
如果用户的屏幕尺寸较小，仅适合1个图表，则显示1并将分页设置为1.
如果用户的屏幕尺寸< 2，但是＆gt; 1，显示1.5图表和分页1。

我正在使用AngularJS来构建HTML。在单独的模板块中执行＃1和＃2很容易，然后根据屏幕大小显示/隐藏。但是，我对＃3感到有点难过。我无法弄清楚如何显示2个图表，但只能分页1。

Answer 1

我最终编写了以下JavaScript来执行此操作。基本上，我正在渲染两个不同的部分（使用类.oneup和.twoup），然后在显示.oneup的情况下添加“预览”。

<script type="text/javascript">
var chartBar = $('#chart-bar');

function chartPreview(firstChart) {
    var chartBarWidth = chartBar.width();
    if (chartBarWidth > 600) {
        var currentChart = $('.carousel-inner:visible .active');
        // append the next widget to the current item
        var chartToCheck = (firstChart) ? currentChart : currentChart.next();

        if (chartToCheck.next()) {
            chartToCheck.next().find('.widget').clone().appendTo(chartToCheck);
            $('.carousel-inner').css({'margin-left': '10px', 'width': '98.8%'})
        }
    } else if (chartBarWidth > 1040) {
        $('.carousel-inner').css({'margin-left': '0', 'width': '100%'})
    }
}
$(document).ready(function() {
    $('.widgets').sortable({
        cursor: "move",
        handle: ".heading"
    }).disableSelection();
    $('.boxes,.tasks').sortable();

    var carousel = $('.carousel');
    $(carousel).carousel({
        interval: 0
    });

    if (chartBar.width() < 1040) {
        chartBar.find('.oneup').show();
        chartPreview(true);

        carousel.bind('slide', function() {
            chartPreview(false);
        });
    } else {
        chartBar.find('.twoup').show();
    }
});

如果我不必渲染oneup和twoup，那就太好了，但我不确定如何使用AngularJS。这是我的一次性重复：

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget}}" type="{{widget.chartType}}"></chart>
    </div>
</div>

与twoup ng-repeat：

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | chunk: 2 | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget[0]}}" type="{{widget[0].chartType}}"></chart>
        <chart class="widget" value="{{widget[1]}}" type="{{widget[1].chartType}}"></chart>
    </div>
</div>

Bootstrap Carousel根据屏幕尺寸显示不同数量的项目

1 个答案: