Prototype Window Class

This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it's not mandatory. It has been tested on Safari, […]

This javascript class allows you to add window in a HTML page.

This class is based on Prototype. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it's not mandatory.

It has been tested on Safari, Camino, Firefox and IE6.

Features

  • Resizable windows
  • Minimze/Maximize
  • Modal dialogs
  • Visual effects
  • Skinnable
  • And more...

How to Use

It's easy to use, just include two javascripts and one css (more if you want different skins).

<script type="text/javascript" src="/javascripts/prototype.js"> </script> <script type="text/javascript" src="/javascripts/window.js"> </script><link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"></link>

To create a window, you just have to instanciate a Window object with some optional parameters, set innerHTML of the window main content and call show() or showCenter() function. Check out the samples tab with more sample codes

 win = new Window('window_id', {title: "Sample", top:100, left:350}) win.getContent().innerHTML = "
<H4>Hello world !!</H4>"; win.setDestroyOnClose(); win.showCenter(); 

Continue to read for more information, documentation & expamples...

Prototype, Window Class

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.