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 that you have read and understand our privacy policy and code of conduct.

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