Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript library with support for anchors/docking like winforms apps have

Is there anything in jQuery or any other JavaScript library that makes it easy to layout a webpage like you would a windows form (i.e.-.NET WinForms) app where you can set "Anchors" for each element? So if I set an anchor for Top, Left, and Right... the element will expand its width as the contain expands, but not the height (but will stay at the same Y/top location). If I don't set any anchors, the element stays the same width and height and is centered.

I know this is opposite of most good web design (where pages need to work on various screen sizes/etc), but in my case I'm trying to create a very rich UI that just isn't possible using the available HTML/CSS layout rules. Before you say that isn't true, I think there are several popular websites that use JavaScript to reposition items as the page resizes. For example, I think Google Calendar does this.

My overall UI design is similar to this Dojo example: http://demos.dojotoolkit.org/demos/themePreviewer/demo.html

My page will always fit inside the browser window (never vertical/horz scrollbars on the window itself) -- up to a min size of course, at which case it's fine if you can't use the page (same as the Dojo example, it just crops parts and becomes unusable). I'll have several panels with splitters to resize each one, and also content inside the panels that needs to anchor to various points (bottom/right/left/top/fill).

I don't know Dojo -- it seems pretty massive. I'm mostly wondering what my options are, and leaning towards a smaller library specific for just adding anchor/docking support.

like image 611
eselk Avatar asked Dec 06 '25 08:12

eselk


1 Answers

I am in the process of writing my own similar layout framework, I am just about finished with its core features, and it is possible that this could work for you. Mine is designed to allow the user to move docked panels around as they please, but this feature 'could' be disabled on your docking panels if you really want to.

Check it out here: http://docker.webcabin.org/

EDIT: The layout framework is now completed and ready for official use!

like image 197
Lochemage Avatar answered Dec 08 '25 22:12

Lochemage