RUZEE.LayoutManager

A border layout manager for HTML/CSS in JavaScript.

Want layouts for desktop like applications running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Fox, TK? RUZEE.LayoutManager is the right toy for you. Here's an example and a screen shot:

Some details

RUZEE.LayoutManager is a JavaScript library that allows you to implement "desktop-style" applications in your web browser. Usually a web page is meant to scroll on the highest level, i.e. the body of an HTML page gets scrolled if it doesn't fit into the browser window.

When using desktop applications however, a user is used to a different layout. Usually there is some menu on the top, a status on the bottom, different frames that can be scrolled independently from each other, etc.

If you want to have such a layout with HTML, you may use inner frames (IFRAMEs) and percentual widths and heights, but if you ever tried that you know why you never wanna do that again ;-).

And with RUZEE.LayoutManager you won't have to. It's as simple as adding some classes to your HTML elements and including a JavaScript file and you're done. If you are familiar with Java's BorderLayout you'll almost feel like home.

Requirements

RUZEE.LayoutManager requires Prototype, one of the coolest JavaScript libs out there.

Another requirement is a specific basic style you need to have in your HTML file. First, you need to put your browser into standards compliant mode by putting the following line as the very first one into your HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then put the following statements into your stylesheet:

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

That's it for the requirements.

How-To

RUZEE.LayoutManager uses CSS classes to figure out how to layout the HTML elements in your source file. You may supply these classes to almost every block element. The classes are:

  • lm_top, lm_bottom: align an element at the top/bottom of the parent element. The height may be supplied via the CSS style. If you don't provide a height, RUZEE.LayoutManager will calculate it based on the content of the element.
  • lm_left, lm_right: align an element at the left/right of the parent element. You need to provide a width in your CSS stylesheet in order to make it work!
  • lm_center: Will always fill the remaining space of the parent element, i.e. the space that is not take by any top/bottom/left/right element. No width or height has to be provided in your CSS!

top/bottom are stronger than left/right, i.e. they will always occupy the full width of the parent element. If you want left/right to use the full height, simply put top/bottom into the centered child - every depth is possible ;-)

Centered and left/right elements may also contain scrollable content. It's as simple as adding the CSS property "overflow:auto" to the specific element.

By using CSS class properties, the HTML source can be fully W3C compliant.

Example

Here's some example HTML code (for a more complicated example check out test.html):

<!-- header, js includes, ... (all the required stuff) -->
<body>
  <div class="lm_top">
    Some text at the top (header)
  </div>
  <div class="lm_left" style="width:100px">
    Some text on the left
  </div>
  <div class="lm_center" style="overflow:auto">
    Some text in the center, scrollable
  </div>
  <div class="lm_right" style="width:100px">
    Some text on the right
  </div>
  <div class="lm_bottom">
    Some text at the bottom
  </div>
</body>

That's it - pretty simple, huh? What about getting it?

Download

Get version 0.1! It's released under an MIT style license included in the archive.

Caveats

The order of right and bottom aligned elements is logical but not intuitive. RUZEE.LayoutManager always adds elements from the outside to the inside. For right and bottom this means, that the elements appear in the reverse order as defined in your HTML file.

History

  • 0.1: 2006-11-03: Initial version

In lieu of this code, I would recomend

In lieu of this code, I would recomend Blueprint CSS. It is on Google Gode base.

[...] RUZEE.LayoutManager “This script

[...] RUZEE.LayoutManager “This script is a border layout manager for HTML/CSS in JavaScript. Want layouts for desktop like applications running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Fox, TK? RUZEE.LayoutManager is the right toy for you.” [...]

[...] RUZEE.LayoutManager “This script

[...] RUZEE.LayoutManager “This script is a border layout manager for HTML/CSS in JavaScript. Want layouts for desktop like applications running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Fox, TK? RUZEE.LayoutManager is the right toy for you.” [...]

Nice script. I just posted it on my

Nice script. I just posted it on my website. Cheers, Max

[...] ruzee.com - Steffen Rusitschka

[...] ruzee.com - Steffen Rusitschka » RUZEE.LayoutManager (tags: javascript layout css manager ruzee web development webdev webdesign design html) [...]

[...]

[...] 熟悉Ext、jQuery、Dojo等javascript库的朋友都应该知道,这些库都提供了自己的Layout管理器。现在prototype也有了一个非常简单而强大的布局管理器。是由Xilinus的Sébastien Gruhier (Mr. Proto) 贡献的喔(MIT-license),该layout manager是基于prototype 1.6和CSS之上,其灵感来源于RUZEE.LayoutManager,当然比RUZEE的性能更好,特别是在复杂布局的情况下(简单布局)!我们来看看这些CSS的class是怎么样来产生layout效果的: [...]

Nice! I was actually looking for a

Nice! I was actually looking for a GridLayout layout manager. Have you considered support ing more layout styles than only BorderLayout?

The following is worth a try

The following is worth a try (untested): Use JavaScript to set the width of your div to "0". Then call "RUZEE.LayoutManager.layout();" - it should be gone.
To show it again, set the width to its initial value and perform the same call.

Nice work! This came just in time. I'm

Nice work! This came just in time. I'm trying to show/hide an element giving it an id and setting it's display to either none or block. When I do this, the content of the element gets hidden but not the entire div. Im actually trying to collapse/expand an lm_right element. Any suggestions?