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.
Ext JS has a powerful / flexible layout engine with support for anchoring and full browser fluid layouts.
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
checkout their
borderlayout.