0

Понадобилось реализовать функционал таких кнопочек:

alt text

Сделал я это так: при клике на такую кнопку просто заменяем класс col-md-3 на col-md-4 (к примеру). Естественно, с таким подходом получился только один div с классом row. Но спустя ряды из-за разных вышин появляются отступы. Так вот, как без задания определенной вышины сделать такой переключатель? Можно было бы с использованием ajax и дивами с классом row, но не хочу лишний раз увеличивать нагрузку.

Как с помощью js сделать переключение кол-ва колонок bootstrap с большим кол-вом рядов?

1 ответ 1

1

Первое что приходит на ум - генерировать строки в зависимости от нужного количества колонок и перестраивать html.

/* JavaScript */

//сохраняем нужные элементы
var items = $('.item');

//функция перестановки элементов
function rearrange(numCols) {
    //может прийти строка, поэтому превращаем её в целое число
    numCols = parseInt(numCols);

    //для красоты, чтобы элементы имели одинаковую ширину
    //можно этого не делать, но тогда, например, в одной row могут оказаться два элемента с классом col-md-7, вследствие чего второй элемент будет перенесён на другую строку
    if(numCols > 6) {
        numCols = 12;
    }

    //очищаем прежде созданные rows
    $('.container').empty();

    //генерируем имя класса для колонки
    var colClassName = 'col-md-' + Math.floor(12 / numCols);

    //идём по элементам с шагом равным количеству колонок
    for(var i = 0; i < items.length; i+= numCols) {
        //создаём row
        var row = $('<div>').addClass('row');

        //кладём в row нужные элементы (не больше, чем количество колонок)
        for(var j = i; j < i+numCols; j++) {
            $(items[j])
                .removeClass()//чистим все классы
                .addClass(colClassName + ' item')//добавляем "колоночный" класс
                .appendTo(row);//вставляем элемент в row
        }

        //добавляем row в container :)
        $('.container').append(row);
    }
}

$(function(){
  console.log("ff");
    //подписываемся на изменения в <select>
    $(document).on('change', '#selectNumColumns', function(e) {
        //берем к-во колонок из выбранного значения select-а
        var neededColNum = $(this).val();

        //дёргаем перестановку
        rearrange(neededColNum);
    });

    //подписываемся на кнопки
    //чтоб не плодить много слушателей, кнопка должна иметь класс ".btnRearrange", а также атрибут 'data-val' равный нужному количеству колонок
    $(document).on('click', '.btnRearrange', function(e){
        //берем к-во колонок из атрибута 'data-val'
        var neededColNum = $(this).data('val');

        //дёргаем перестановку
        rearrange(neededColNum);
    });

    //дёргаем перестановку при загрузке страницы
    rearrange(parseInt($('#selectNumColumns').val()));
});
/* CSS (не обязательно) */

.item {
    padding: 5px 10px;
    outline: 1px solid #aaa;
}
<!-- HTML -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnRearrange" data-val="3" class="btn btn-default">3</button>
<button class="btnRearrange" data-val="4" class="btn btn-default">4</button>
<select id="selectNumColumns">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="12">12</option>
</select>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
</div>

(код лучше выполнять во всю страницу)

2
  • 1
    Демки можно размещать прямо на сайте с помощью кнопки "Фрагмент кода" (Ctrl+M).
    – Kyubey
    12 июн 2015 в 12:46
  • Сделал. Никак не решался начать это юзать :)
    – n1k1ch
    12 июн 2015 в 12:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.