Hello Dwindows

January 30th, 2007

A really basic "window" handler using scriptaculous.
It (almost) won't care about your markup, just a couple of restrictions:

  • Your "windows" need to have the CSS class "window"
  • If a window has buttons, they need to have the classes: "close" or "fold"
  • If your windows have content, it needs to sit in an element with the class "content"

With content and buttons:

HTML:
  1. <div id="window" class="window">
  2.     <div id="window_header">
  3.         <div id="window_close" class="close"></div>
  4.         <div id="window_min" class="fold"></div>
  5.         <span id="window_title">Window</span>
  6.     </div>
  7.     <span class="content" id="window_content">
  8.         Some content in the window.
  9.         <br><br><br>
  10.         The "window" is layed out by the #window-rules...
  11.     </span>
  12. </div>

Just the window:

HTML:
  1. <div id="blank" class="window"></div>

To create one, just create a new Dwindow instance like so:

JAVASCRIPT:
  1. new Dwindow( 'window', {handle: 'window_header'} );

First parameter is the element ID and the second parameter is your normal scriptaculous Draggable options parameter

Check out the examples -> here
and get the script here -> here

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.