Twitter Bootstrap - сдвиньте Span влево/вправо

Я использую промежутки начальной загрузки Twitter для формирования двух столбцов в сетке. Я хочу, чтобы пользователь мог закрыть крайний левый диапазон, чтобы правый диапазон заполнил окно просмотра. Я сделал это, скрыв левую панель и изменив ширину правой панели, и это отлично работает. Однако я бы предпочел, чтобы левая панель была закрыта, а ширина правой панели изменялась, чтобы заполнить оставшееся пространство. Лучшее, что я придумал до сих пор, это:

if ( show )
    $('.content-panel').css( { width: '76.6%' } );

$('.left-panel').animate( {width: 'toggle'}, function(){
    if ( !show )
        $('.content-panel').css( { width: '100%' } );
});

где панель .content — это правая колонка. Этот вид работает, но выглядит довольно неуклюжим. Это действительно нужно, чтобы оба диапазона изменялись вместе. Любые предложения приветствуются.


collapse twitter-bootstrap grid
person nevf    schedule 02.01.2013    source источник
comment
Чтобы уточнить, находятся ли два столбца (которые вы хотите манипулировать) в отдельных столбцах Bootstrap?   -  person David Taiaroa    schedule 03.01.2013
comment
Дэвид, да. У меня есть: ‹div class=span12›‹div class=span3›‹/div› ‹div class=span9›‹/div›‹/div› Столбец span3 — это левый столбец, который я хочу закрыть.   -  person nevf    schedule 03.01.2013
comment
nevf - я предполагаю, что вы хотите начать с ‹div class=row›, так что это <div class="row"><div class="span3"></div> <div class="span9"></div></div>   -  person Voodoo    schedule 03.01.2013

Ответы (3)


arrow_upward
4
arrow_downward

Ради интереса я взломал пример Voodoo и использовал Javascript для управления классами, а затем переходы CSS для управления анимацией: http://jsfiddle.net/WDV69/29/

Не обязательно лучшее решение, просто другое.

Извиняюсь, если мой javascript немного груб, это не совсем мой отдел.

$("#closeTrigger").click(function() {

$('.container').removeClass('openLeft').addClass('closeLeft');  
});

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});
person David Taiaroa    schedule 04.01.2013
comment
Дэвид, большое спасибо, это сработало прекрасно. Пришлось немного подправить, но все хорошо. Использование .closeLeft/.openLeft для кнопок, а также .container вызвало некоторое головокружение. - person nevf; 04.01.2013
comment
Я рад, что это было полезно. При необходимости вы можете уточнить это, используя запросы @media, чтобы настроить поведение на гибкой сетке на широких и узких экранах. - person David Taiaroa; 04.01.2013
comment
Я использую плавающие сетки - не могли бы вы объяснить больше. @медиазапросы - person nevf; 05.01.2013
comment
Намного чище @DavidTaiaroa, молодец. Примечание. Анимация CSS3 не работает в IE9 и более ранних версиях, но резервный вариант, кажется, отлично работает в IE. - person Voodoo; 05.01.2013
comment
@nevf по поводу медиа-запросов. Сетка начальной загрузки меняется в зависимости от ширины окна браузера посетителей. BS делает это, указывая определенные свойства CSS, которые активируются только при определенной ширине окна браузера с помощью медиа-запросов [at]. Если вы посмотрите в файлы CSS BS, вы увидите такие записи, как [at]media (max-width: 767px) {что-то для планшетов здесь}. Я начну с примера, когда у меня будет шанс. - person David Taiaroa; 05.01.2013
comment
@ Voodoo для IE ‹ 10 . Да вы правы. Я забыл об этом, спасибо, что указали на это. У меня нет легкого доступа к IE, поэтому хорошо знать, что запасной вариант в порядке. - person David Taiaroa; 05.01.2013

arrow_upward
4
arrow_downward

Вот быстрое решение, которое, кажется, выполняет то, что вы хотите. См. здесь.

Он начинается с классов диапазона Bootstrap для ширины, а затем при щелчке анимирует расширение ширины правого поля, уменьшая размер левого поля, а затем полностью скрывая его. Я возился с добавлением span12 после завершения анимации.

$("#moveTrigger").click(function() {
  // Left box animates to 0 width
  $(".leftbox").animate({ "width": "0%" }, "slow", function() {
    // Hide when width animation finishes
    $(this).hide();
  });
  // Right box expands. Tinkered with add span12 after animation is complete
  $(".rightbox").animate({ "width": "90%" }, "slow", function() {
    $(this).removeClass('span6').addClass('span12').css('width','');
  });
});​

Это, вероятно, требует некоторой доработки, но дает эффект.

person Voodoo    schedule 03.01.2013
comment
@voodoo - спасибо, это было полезно, однако анимация была вялой и выглядела ужасно, и была проблема с неправильным изменением размера правого поля, которую я не смог решить. Код Дэвида работает хорошо, так что это здорово. - person nevf; 04.01.2013

arrow_upward
0
arrow_downward

По запросу другое решение, которое отвечает требованиям:
http://jsfiddle.net/panchroma/pwP5V/

Опять же, это основано на javascript, запущенном @Voodo.

Он использует медиа-запросы для управления анимацией, поэтому, если вы посмотрите в CSS, вы увидите кучу настроек, таких как

@media (max-width: 480px) {
.to-hide {
background-color: yellow;  
}
....
}

Это все еще требует некоторой тонкой настройки, но я думаю, что на этом этапе вам нужен реальный контент, потому что некоторые настройки могут зависеть от относительной высоты ваших левой и правой колонок.

Там нет конца настройки, которые вы можете сделать. Например, проверьте, как работает закрытие в самом узком окне. Время перехода также может быть настроено для открытия и закрытия, а также для разных размеров окна.

Здесь должно быть достаточно, чтобы продержаться какое-то время!

person David Taiaroa    schedule 06.01.2013