Bootstrap 3 - 可摺疊的右側面板，例如Google Drive Details/Activity面板

爲我們現有的產品開發新的網頁佈局。我們希望將整合的團隊聊天和活動供稿顯示始終顯示在每個頁面的右側。我們使用的是Bootstrap 3，我有一個看起來不錯的模擬。我使用的香草引導12列大小樣式來做到這一點：Bootstrap 3 - 可摺疊的右側面板，例如Google Drive Details/Activity面板

current mock with right-side panel displayed

現在我們要允許用戶摺疊該右側面板（水平），尤其對於意見，並在水平的房地產是非常重要的（網格視圖等）。

有沒有Bootstrap的方法來做到這一點？我很擅長使用垂直分離器小部件，或者頂部導航欄中的切換按鈕，或其他任何演示文稿都有意義。這更多的是我需要建議的網格大小。

來源

2014-04-09 mtutty

你看過畫布範例嗎？ http://getbootstrap.com/examples/offcanvas/ – moodyjive

謝謝。我剛纔看了一下，看起來很近，但我希望展開的部分壓縮主顯示區域，而不是將其從頁面滑出。 – mtutty

我需要類似的方法來完成我們的一個項目，而全屏視圖是here。

我修改了一下腳本和佈局以獲得你想要實現的內容。代碼是here，全屏是here。即使在刷新頁面之後，我仍然使用jquery cookie保留視圖狀態。點擊齒輪圖標將切換邊欄。該腳本是：

$(function() { 
     var $menu = $('#sidebar-wrapper'); 
     var $content = $('#main-wrapper'); 
     if ($.cookie('offcanvas') == 'hide') { 
      $content.addClass('no-transition'); 
      $menu.hide(); 
      $menu.css('right', -($menu.outerWidth() + 10)); 
      $content.removeClass('col-md-10').addClass('col-md-12'); 
     } 
     else if ($.cookie('offcanvas') == 'show') { 
      $menu.show(500).animate({ right: 0 }); 
      // $menu.show(); 
      $content.removeClass('no-transition'); 
      $content.removeClass('col-md-12').addClass('col-md-10'); 
     } 


     $('.toggle-button').click(function() { 
      $content.removeClass('no-transition'); 
      if ($menu.is(':visible') && $content.hasClass('col-md-10')) { 
       // Slide out 
       $menu.animate({ 
        right: -($menu.outerWidth() + 10) 
       }, function() { 
        $menu.hide(1000); 
       }); 
       $content.removeClass('col-md-10').addClass('col-md-12'); 
       $.cookie('offcanvas', 'hide'); 
      } 
      else { 
       // Slide in 
       $menu.show(500).animate({ right: 0 }); 
       $content.removeClass('col-md-12').addClass('col-md-10'); 
       $.cookie('offcanvas', 'show'); 
      } 
      if ($content.hasClass('col-md-12') && $menu.is(':hidden')) { 
       $menu.animate({ 
        right: 0 
       }, function() { 
        $menu.show(1000); 
       }); 
       // $menu.show(); 
       $content.removeClass('no-transition'); 
       $content.removeClass('col-md-12').addClass('col-md-10'); 
      } 
     }); 
     $('.bs-tooltip').tooltip(); 
    });

您可以自定義佈局/ CSS來得到你想要得到的。

來源

2014-04-16 12:51:32 Ravimallya

這正是我想到的。我會將佈局和動畫翻轉到右側，它應該是完美的。 – mtutty

第二個jsfiddle只有右側欄。 – Ravimallya

我錯過了值得100分的賞金......即使它被接受的答案... – Ravimallya

我剛剛完成了我認爲你想用jquery添加和刪除引導類。我有一個ID爲collapse的按鈕，點擊後它會檢查側邊欄是否打開並更改佈局。標記：

<div class="container"> 
    <div class="row"> 
     <div class="row"> 
      <div class="col-md-12"><button class="btn-primary btn-large btn" id="collapse">Collapse sidebar</button></div> 
     </div> 
     <div class="row"> 
      <div class="col-md-8" id="content" style="height:400px;border:2px solid black">Hello, I'm a 3/4 width Div.</div> 
      <div class="col-md-4 open" id="sidebar" style="height:400px;border:2px solid blue">Hey There, I'm a 1/4 width Div</div> 
     </div> 
    </div> 
</div>

jQuery的：

$('#collapse').click(function(){ 
    if($('#sidebar').hasClass('open')) 
    { 
     $('#sidebar').removeClass('col-md-4'); 
     $('#sidebar').removeClass('open'); 
     $('#sidebar').addClass('hidden'); 
     $('#content').addClass('col-md-12'); 
     $('#content').removeClass('col-md-8'); 
    } 
    else 
    { 
     $('#sidebar').addClass('col-md-4'); 
     $('#sidebar').addClass('open'); 
     $('#sidebar').removeClass('hidden'); 
     $('#content').removeClass('col-md-12'); 
     $('#content').addClass('col-md-8'); 
    } 
});

唯一的CSS我已經是一個隱藏的類.hidden{display:none;}和fiddle.我用XS在撥弄因爲小窗口。但工作原理是一樣的。

來源

2014-04-12 03:33:03 Bryan

爲您完成了這項工作？ – Bryan

是的，它可以工作，但我確實在尋找具有一些緩動/滑動效果的東西，以便與我們其餘的模擬效果保持一致。 – mtutty

我已經使用2個項目的佈局插件，這幫助了我很多它給你完全的控制。我的情況也需要左，右和底部。鏈接是，

http://layout.jquery-dev.net/

心中已經使用也和bootstrap3使用引導MODLE化妝舒爾把這些代碼後不久body標籤

編碼快樂的時候是明智的。

來源

2014-04-12 12:55:39

Bootstrap 3 - 可摺疊的右側面板，例如Google Drive Details/Activity面板

回答

相關問題