Подтвердить что ты не робот

Сплиттер для Twitter Bootstrap

Каков наилучший способ позволить пользователю динамически изменять ширину столбцов страницы в стиле Twitter Bootstrap?

Например, чтобы добавить вертикальный разделитель/разделитель в следующем примере?

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6 resizeMe">Left</div>
        <div class="span6 resizeMe">Right</div>
    </div>
</div>

Ответ 1

Если вы не возражаете против того, чтобы он не был анимированным или динамически регулируемым, здесь я работал над подобным образом с Bootstrap (я использую 2.1.0, но это должно работать в любых версиях 2.x)

Настройте группу кнопок:

<div class="btn-group">
        <a href="##" rel="tooltip" title="Make the Directories side dominant" class="btn btn-mini" data-action="dirDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
        <a href="##" rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
        <a href="##" rel="tooltip" title="Make the Documents side dominant" class="btn btn-mini" data-placement="left" data-action="fileDom"><i class="icon icon-indent-right"></i></a>
        </div>

Теперь, здесь магия JQuery:

$(function(){
$('a[data-action="dirDom"]').click(function (){
    $("#dirList").css('display','inline').removeAttr('class').addClass("span12");
    $("#fileList").removeAttr('class').css("display","none");

});
$('a[data-action="equality"]').click(function (){
    $("#dirList").css('display','inline').removeAttr('class').addClass("span6");
    $("#fileList").css('display','inline').removeAttr('class').addClass("span6");
});
$('a[data-action="fileDom"]').click(function (){
    $("#fileList").css('display','inline').removeAttr('class').addClass("span12");
    $("#dirList").removeAttr('class').css("display","none");
});

});

Я пытаюсь оживить его, но не имел большой удачи, но это работает с точки зрения того, чтобы сделать один размер полностью видимым, тогда левая сторона полностью видима и, наконец, вернется к равным размерам. Я уверен, что лучше JQuery можно написать, но эй, это первый черновик;)

Ответ 2

Я не верю, что сейчас есть способ начальной загрузки, однако вы можете добавить класс в один из ваших div, который помещает border-left:1px solid #EEE или border-right:1px solid #EEE. Единственная проблема с этим решением заключается в том, что ваш объединенный диапазон 12 теперь будет больше, чем нормальная ширина span12 на 1px, и он вытолкнет один из divs на следующую строку. Если это приемлемо для этого, вы можете исправить это, сделав второй div только span5, чтобы ваша сумма была span11 + 1px.

Было бы неплохо, если бы у бутстрапа был класс для этого, который не мешал нормальной системе сетки.