Twitter Bootstrap Izgara Sistemi için Hücre Splitter

Question

Bir satır ve iki sütun içeren bir bootstrap ızgaram var, şimdi bu sütunlar arasında splitter ayarlamak istiyorum. Kodum şunun gibi görünüyor.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6">.col-md-6</div> 
     <!--need to work here--> 
     <div class="col-md-6">.col-md-6</div> 
    </div> 
</div> 

Şimdi bu iki sütunu bölen bir açısal yönerge veya önyükleme ayırıcısı oluşturmak istiyorum. Bu örnek Silverlight'a benzer. Bu splitter nasıl oluşturabilirim? Herhangi bir bilgin var mı? Yazımı okuyan herkese teşekkürler.

Answer 1

Bölücü el ile oluşturabilirsiniz. Bkz. Jsfiddle veya Plnlkr.

DÜZENLEME

Sen HTML bu aşağıdaki kodla çalışacağız

<div id="sidebar"> 
    <span id="position"></span> 
    <div id="dragbar"></div> 
    sidebar 
</div> 
<div id="main"> 
    main 
</div> 

CSS

body,html { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#main { 
    background-color: BurlyWood; 
    float: right; 
    position: absolute; 
    height: 200px; 
    right: 0; 
    left: 200px; 
    margin-top: 10px; 
} 

#sidebar { 
    background-color: IndianRed; 
    margin-top: 10px; 
    width: 200px; 
    float: left; 
    position: absolute; 
    height: 200px; 
    overflow-y: hidden; 
} 

#dragbar { 
    background-color: black; 
    height: 100%; 
    float: right; 
    width: 3px; 
    cursor: col-resize; 
} 

#ghostbar { 
    width: 3px; 
    background-color: #000; 
    opacity: 0.5; 
    position: absolute; 
    cursor: col-resize; 
    z-index: 999; 
} 

JS

$(document).ready(function() { 
    var i = 0; 
    var dragging = false; 
    $('#dragbar').mousedown(function (e) { 
     e.preventDefault(); 
     dragging = true; 
     var main = $('#main'); 
     var ghostbar = $('<div>', { 
      id: 'ghostbar', 
      css: { 
       height: main.outerHeight(), 
       top: main.offset().top, 
       left: main.offset().left 
      } 
     }).appendTo('body'); 
     $(document).mousemove(function (e) { 
      ghostbar.css("left", e.pageX + 2); 
     }); 
    }); 
    $(document).mouseup(function (e) { 
     if (dragging) { 
      $('#sidebar').css("width", e.pageX + 2); 
      $('#main').css("left", e.pageX + 2); 
      $('#ghostbar').remove(); 
      $(document).unbind('mousemove'); 
      dragging = false; 
     } 
    }); 
}); 

Bu, div splitter için daha kapsamlı olan example.