如何創建與原型

Question

alt text http://img197.imageshack.us/img197/9084/seperator.png

http://img197.imageshack.us/img197/9084/seperator.png

兩個div之間的隔膜如何在圖像中創建一個分隔符，如谷歌文檔上面，使用的原型？

Answer 1

該分隔符實際上是表格行中包含的表格單元格。它維護一個background-color和background-image，使其具有類似於您在桌面應用程序中看到的效果。

我不確定你想要做什麼，但假設表格單元格已經在標記中指定，並且它具有適當的樣式，您需要設置幾件事情：

• A mousedown處理程序用於註冊用戶何時點擊單元格。
• A mousemove用於更新瀏覽器窗口上下文中分隔符位置的處理程序。
• A mouseup處理程序知道何時停止更新分隔符的位置。

有關於如何做到這一點的變化，但這裏是一個非常，非常粗略的例子：

var bMouseIsDown = false; 
Event.observe('separator', 'mousedown', function() { 
    bMouseIsDown = true; 
}); 
Event.observe('separator', 'mouseup', function() { 
    bMouseIsDown = false; 
}); 

Event.observe('separator', 'mousemove', function(evt) { 
    if(bMouseIsDown === true) { 
    var iX = Event.pointerX(evt); 
    var iOffsetX = iX - Position.page($('separator'))[0]; 
    var iWidth = $('separator').getDimensions().width; 
    var iElementOffset = iWidth - iOffsetX; 
    $(this).setStyle({ 
     left: iX - iElementOffset 
    }); 
    } 
}); 

Answer 2

如果您已經使用原型，您可以使用Scriptaculous draggable得到分離工作，然後掛鉤其事件以相應地調整兩個DIV的大小。