具有可調整大小的垂直窗格的最佳方式

因此，我應該從說我對JQuery和CSS的知識不廣泛，但我可以處理基本代碼以及最適度的代碼。具有可調整大小的垂直窗格的最佳方式

我目前正試圖設計一個具有垂直可調整大小窗格的網站佈局。這裏是我的意思是：

____________________________ 
|     |   | 
|     |   | 
|     |   | 
|     |   | 
|_________________|_________|

所以我希望默認在左邊約75％的寬度，然後在右側25％，但你可以拖動豎線來調整左右。然後，這些面板中的每一個都將運行他們自己的ajax。

到目前爲止，我已經嘗試過使用直接的CSS，JQuery和JSplitter庫來發現Jsplitter在jquery 1.8+的Chrome上無法正常工作。有沒有人有任何建議，以簡單的方法來實現我想要的？如果你甚至可以把我和一個教程或圖書館聯繫起來，那會很棒，但是在過去的3個小時裏我一直沒有找到任何東西，我一直在爲此而苦苦掙扎......感謝你的幫助。

編輯：哦，我已經嘗試過用戶界面佈局，但我看到的例子非常複雜...如果有人有一個簡單的例子，也會有所幫助，我瞭解用戶界面佈局非常強大。

來源

2014-01-08 user3175505

將75％的寬度更改爲74％...如果該功能無效，請添加您的css代碼和html。 – Cam

發佈CSS以幫助更容易地遵循此問題。 – Durandal

也許你可以使用這個示例作爲最初的方法：http://jsfiddle.net/amontellano/hM92y/1/

點擊||在中間標記並移動它以展開左側面板。

$('.rsh').draggable({ 
    axis: 'x', 
    containment: 'parent', 
    helper: 'clone', 
    drag: function (event, ui) { 
     var width = ui.offset.left; 
     $(this).prev().width(width); 
    } 
});

它只使用div元素作爲容器。然後，您應該開始播放併爲此添加增強功能。希望它有助於作爲最初的想法。你不需要任何其他庫只是jQuery UI。

來源

2014-01-09 00:29:59

具有可調整大小的垂直窗格的最佳方式

回答

相關問題