X Drag/Resize/Maximize Demo 2

xFenster

xFenster is an object-oriented version of drag1/demo3.

Javascript

<script type='text/javascript' src='../x_core.js'></script>
<script type='text/javascript' src='../x_event.js'></script>
<script type='text/javascript' src='../x_drag.js'></script>
<script type='text/javascript' src='../lib/xfenster.js'></script>
<script type='text/javascript'>

var fen = new Array(), fen_count = 3;

window.onload = function()
{
  for (var i = 1; i <= fen_count; ++i) {
    fen[i] = new xFenster('fen'+i, i*100, i*100, 'fenBar'+i, 'fenResBtn'+i, 'fenMaxBtn'+i);
  }
}
window.onunload = function()
{
  for (var i = 1; i <= fen_count; ++i) {
    fen[i].onunload();
  }
}
</script>

View xFenster.

HTML

<div id='fen1' class='fenster'>
  <div id='fenMaxBtn1' class='fenMaxBtn' title='Click to Maximize/Restore'>&nbsp;</div>
  <div id='fenBar1' class='fenBar' title='Drag to Move'>xFenster 1</div>
  <div class='fenContent'>
    <p>...</p>
  </div>  
  <div id='fenResBtn1' class='fenResBtn' title='Drag to Resize'>&nbsp;</div>
</div>

<div id='fen2' class='fenster'>
  <div id='fenMaxBtn2' class='fenMaxBtn' title='Click to Maximize/Restore'>&nbsp;</div>
  <div id='fenBar2' class='fenBar' title='Drag to Move'>xFenster 2</div>
  <div class='fenContent'>
    <p>...</p>
  </div>  
  <div id='fenResBtn2' class='fenResBtn' title='Drag to Resize'>&nbsp;</div>
</div>

<div id='fen3' class='fenster'>
  <div id='fenMaxBtn3' class='fenMaxBtn' title='Click to Maximize/Restore'>&nbsp;</div>
  <div id='fenBar3' class='fenBar' title='Drag to Move'>xFenster 3</div>
  <div class='fenContent'>
    <p>...</p>
  </div>  
  <div id='fenResBtn3' class='fenResBtn' title='Drag to Resize'>&nbsp;</div>
</div>

License

By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.

Application Support

Get your questions answered faster by posting at one of the following forums.

SitePoint.com

HFTOnline.com

CodingForums.com

 
xFenster 1

You can focus me by clicking anywhere on me or on one of my child elements.

You can drag me by dragging on the bar at the top of this element.

You can maximize/restore me by clicking on the button in the upper right corner.

You can resize me by dragging on the button in the lower right corner.

 
 
xFenster 2

You can focus me by clicking anywhere on me or on one of my child elements.

You can drag me by dragging on the bar at the top of this element.

You can maximize/restore me by clicking on the button in the upper right corner.

You can resize me by dragging on the button in the lower right corner.

 
 
xFenster 3

You can focus me by clicking anywhere on me or on one of my child elements.

You can drag me by dragging on the bar at the top of this element.

You can maximize/restore me by clicking on the button in the upper right corner.

You can resize me by dragging on the button in the lower right corner.