JavaScript DHTML/Ajax Layer/Window Dialog

Материал из Web эксперт
Версия от 07:16, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

DHTML Windowing Toolkit Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>DHTML Windowing Toolkit Demo</title>
    <link href="styles/dwt.css" rel="stylesheet" type="text/css" />
    <style type=text/css>
span.identityName {
  vertical-align: middle;
  border: 0px solid #808080;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 8pt;
  font-weight: bold;
  color: #000000;
  white-space: nowrap;
  overflow-x: hidden;
}
input.updateInterval {
  vertical-align: middle;
  border: 1px solid #808080;
  padding: 1px 3px;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 8pt;
  font-weight: normal;
  color: #000000;
}
span.submit {
  vertical-align: middle;
  border: 1px solid #808080;
  padding: 1px 3px 1px 3px;
  cursor: pointer;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 8pt;
  font-weight: normal;
  color: #000000;
}
div.messageFormBodyBorder {
  border: 1px solid #808080;
  padding: 1px 1px 1px 3px;
  background-color: Window;
  overflow: auto;
}
textarea.messageFormBody {
  margin: 0px;
  border: 0px solid #808080;
  padding: 0px;
  width: 100%;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10pt;
  font-weight: normal;
  color: #000000;
  overflow: auto;
}
input.title {
  float: right;
  vertical-align: middle;
  margin: 2px;
  border: 1px solid #808080;
  padding: 1px 3px;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 8pt;
  font-weight: normal;
  color: #000000;
}
span.openButton {
  float: right;
  vertical-align: middle;
  margin: 2px;
  border: 1px solid #808080;
  padding: 1px 3px 1px 3px;
  cursor: pointer;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 8pt;
  font-weight: normal;
  color: #000000;
}
<!-- WORKAROUND: Internet Explorer textarea width 100% scroll bar bug. -->
textarea.messageFormBody {
  width: expression(this.parentNode.offsetWidth - 8);
}
    </style>
    <script src="scripts/lib/prototype.js" type="text/javascript"></script>
    <script src="scripts/lib/scriptaculous/scriptaculous.js" type="text/javascript"></script>
    <script src="scripts/dwt.js" type="text/javascript"></script>
    <script type="text/javascript">
<!--
/**
 * JavaScript example (chat window).
 *
 * @param  name  The window title / id.
 *
 * @return  The chat window.
 */
function createChatWindow(name) {
  
  // Frame
  var frame = document.createElement(dwt.WindowManager.FRAME.tagName);
  frame.setAttribute("id", name);
  frame.className = dwt.WindowManager.FRAME.activeClassName;
  frame.style.left = "250px";
  frame.style.top = "150px";
  frame.style.width = "350px";
  frame.setAttribute("effect", "Grow");
  
  // Title bar
  var titleBar = document.createElement(dwt.WindowManager.TITLE_BAR.tagName);
  titleBar.className = dwt.WindowManager.TITLE_BAR.activeClassName;
  titleBar.setAttribute("minimizedClass", "dwtMinimizedWindowTitleBar");
  titleBar.setAttribute("inactiveMinimizedClass", "dwtInactiveMinimizedWindowTitleBar");
  var table = document.createElement("table");
  var tbody = document.createElement("tbody");
  // Left chrome
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CHROME_LEFT.activeClassName;
  var img = document.createElement("img");
  img.className = "dwtWindowTitleBarChrome";
  img.src = "images/dwt/blank.gif";
  td.appendChild(img);
  tr.appendChild(td);
  
  // Title bar icon
  td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
  img = document.createElement("img");
  img.className = "dwtWindowTitleBarIcon";
  img.src = "images/dwt/blank.gif";
  td.appendChild(img);
  tr.appendChild(td);
  
  // Title bar text
  td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
  td.setAttribute("valign", "center");
  var titleBarText = document.createElement(dwt.WindowManager.TITLE_BAR_TEXT.tagName);
  titleBarText.className = dwt.WindowManager.TITLE_BAR_TEXT.activeClassName;
  titleBarText.appendChild(document.createTextNode(name));
  td.appendChild(titleBarText);
  tr.appendChild(td);
  td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
  img = document.createElement("img");
  img.className = "dwtWindowTitleBarWhitespace";
  img.src = "images/dwt/blank.gif";
  td.appendChild(img);
  tr.appendChild(td);
  
  // Controls (minimize, close)
  td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName
  img = document.createElement("img");
  img.className = dwt.WindowManager.TITLE_BAR_CONTROL.activeClassName;
  img.src = "images/dwt/minimize.gif";
  img.setAttribute("mouseoverSrc", "images/dwt/minimize.mouseover.gif");
  img.setAttribute("restoreSrc", "images/dwt/restore.gif");
  img.setAttribute("restoreMouseoverSrc", "images/dwt/restore.mouseover.gif");
  img.setAttribute("effect", "Fold");
  img.setAttribute("restoreEffect", "BlindDown");
  img.setAttribute("controlType", "minimize");
  td.appendChild(img);
  tr.appendChild(td);
  td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
  img = document.createElement("img");
  img.className = "dwtWindowTitleBarControl";
  img.src = "images/dwt/close.gif";
  img.setAttribute("mouseoverSrc", "images/dwt/close.mouseover.gif");
  img.setAttribute("effect", "SwitchOff");
  img.setAttribute("controlType", "close");
  td.appendChild(img);
  tr.appendChild(td);
  
  // Right chrome
  td = document.createElement("td");
  td.className = dwt.WindowManager.TITLE_BAR_CHROME_RIGHT.activeClassName;
  img = document.createElement("img");
  img.className = "dwtWindowTitleBarChrome";
  img.src = "images/dwt/blank.gif";
  td.appendChild(img);
  tr.appendChild(td);
  
  tbody.appendChild(tr);
  table.appendChild(tbody);
  titleBar.appendChild(table);
  frame.appendChild(titleBar);
  
  // Border, contents
  border = document.createElement(dwt.WindowManager.BORDER.tagName);
  border.className = dwt.WindowManager.BORDER.activeClassName;
  contents = document.createElement(dwt.WindowManager.CONTENTS.tagName);
  contents.className = dwt.WindowManager.CONTENTS.activeClassName;
  contents.style.height = "150px";
  border.appendChild(contents);
  
  // Message form (status bar)
  messageForm = document.createElement(dwt.WindowManager.STATUS_BAR.tagName);
  messageForm.className = dwt.WindowManager.STATUS_BAR.activeClassName;
  messageForm.style.borderTopWidth = "2px";
  messageForm.style.textAlign = "right";
  var div = document.createElement("div");
  div.className = "messageFormBodyBorder";
  var messageFormBody = document.createElement("textarea");
  messageFormBody.className = "messageFormBody";
  messageFormBody.setAttribute("rows", "2");
  div.appendChild(messageFormBody);
  messageForm.appendChild(div);
  div = document.createElement("div");
  div.style.paddingTop = "5px";
  div.style.paddingBottom = "3px";
  var submit = document.createElement("span");
  submit.className = "submit";
  submit.appendChild(document.createTextNode("Send"));
  div.appendChild(submit);
  messageForm.appendChild(div);
  border.appendChild(messageForm);
  
  frame.appendChild(border);
  document.body.appendChild(frame);
  
  var chatWindow = new dwt.Window(frame);
  
  // Update the zIndex of the text area"s containers.
  // This is an attempt to work around Mozilla Bug 167801,
  // but it doesn"t seem to have any effect :(
  chatWindow.setZIndexOnFocus.push(messageForm.parentNode);
  chatWindow.setZIndexOnFocus.push(messageForm);
  chatWindow.setZIndexOnFocus.push(messageFormBody.parentNode);
  chatWindow.setZIndexOnFocus.push(messageFormBody);
  
  dwt.WindowManager.windows[frame.id] = chatWindow;
  
  // Create an open button for this window
  var openButton = document.createElement("span");
  openButton.className = "openButton";
  openButton.dwtWindow = chatWindow;
  openButton.appendChild(document.createTextNode("Open " + chatWindow.id));
  document.body.appendChild(openButton);
  Event.observe(openButton, "click", window.openClick, false);
  
  return chatWindow;
}
function openClick(event) {
  
  var dwtWindow = null;
  if (window.event) {
    dwtWindow = window.event.srcElement.dwtWindow;
  } else if (event) {
    dwtWindow = event.target.dwtWindow;
  }
  
  if (dwtWindow) {
    dwtWindow.open(dwtWindow.effect);
  }
}
function onLoad() {
  
  // Allows creation of chat windows with arbitrary titles
  var inputTitle = document.createElement("input");
  inputTitle.setAttribute("id", "input.title");
  inputTitle.setAttribute("type", "text");
  inputTitle.className = "title";
  document.body.appendChild(inputTitle);
  var buttonCreate = document.createElement("span");
  buttonCreate.className = "openButton";
  buttonCreate.style.backgroundColor = "#ebebe4";
  buttonCreate.appendChild(document.createTextNode("Create: "));
  document.body.appendChild(buttonCreate);
  Event.observe(buttonCreate, "click",
      function () {
        var inputText = document.getElementById("input.title");
        if (inputText && inputText.value && inputText.value != "") {
          var chatWindow = window.createChatWindow(inputText.value);
          chatWindow.open(chatWindow.effect);
          inputText.value = "";
        }
      },
      false);
  
  // Create pager window
  var _pager = document.getElementById("pager.window");
  var pager = new dwt.Window(_pager);
  var inputs = _pager.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
    pager.setZIndexOnFocus.push(inputs[i]);
  }
   pager.open(pager.effect);
   
   // Create open button for pager window
  var openButton = document.createElement("span");
  openButton.className = "openButton";
  openButton.appendChild(document.createTextNode("Open A Really Long Window Title..."));
  openButton.dwtWindow = pager;
  document.body.appendChild(openButton);
  Event.observe(openButton, "click", window.openClick, false);
  
   // Create a chat window
   chatWindow = createChatWindow("randomtaskdotorg");
   chatWindow.open(chatWindow.effect);
   var span = document.createElement("span");
   span.appendChild(document.createTextNode("Welcome to the DHTML Windowing Toolkit demo.  These windows can be opened, closed, minimized, restored, moved, and resized; with optional script.aculo.us effects.  Use the buttons above to open a window after you"ve closed it, or to dynamically create new windows."));
   chatWindow.contents[0].appendChild(span);
}
  -->
        </script>
  </head>
  <body onload="onLoad()">
    <!-- HTML Example (Pager) -->
    <div id="pager.window" class="dwtWindow" effect="Appear" style="left: 5px; top: 5px; width: 190px;">
      <div id="pager.window.titleBar" class="dwtWindowTitleBar" minimizedClass="dwtMinimizedWindowTitlebar" inactiveMinimizedClass="dwtInactiveMinimizedWindowTitleBar">
        <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td class="dwtWindowTitleBarChromeLeft"><img class="dwtWindowTitleBarChrome" src="images/dwt/blank.gif" /></td>
            <td class="dwtWindowTitleBar" valign="center"><img class="dwtWindowTitleBarIcon" src="images/dwt/blank.gif" /></td>
            <td id="pager.window.titleBar.titleBarText" class="dwtWindowTitleBar"><div class="dwtWindowTitleBarText">This is a Really Long Window Title That Will Need to be Clipped</div></td>
            <td class="dwtWindowTitleBar"><img class="dwtWindowTitleBarWhitespace" src="images/dwt/blank.gif" /></td>
            <td class="dwtWindowTitleBar"><img class="dwtWindowTitleBarControl" controlType="minimize" effect="Fade" restoreEffect="Appear" src="images/dwt/minimize.gif" mouseoverSrc="images/dwt/minimize.mouseover.gif" restoreSrc="images/dwt/restore.gif" restoreMouseoverSrc="images/dwt/restore.mouseover.gif" /></td>
            <td class="dwtWindowTitleBar"><img class="dwtWindowTitleBarControl" controlType="close" effect="DropOut" src="images/dwt/close.gif" mouseoverSrc="images/dwt/close.mouseover.gif" /></td>
            <td class="dwtWindowTitleBarChromeRight"><img class="dwtWindowTitleBarChrome" src="images/dwt/blank.gif" /></td>
          </tr>
        </table>
      </div>
      <div class="dwtWindowBorder"> 
        <div class="dwtWindowContents" style="height: 200px; background-color: #ebebe4;" nsResizeTarget="true">
          <span class="identityName">This is a really long line with nowrap that will require horizontal scrolling.<br />
            <br />
            This window has multiple vertical resize targets.<br />
            Vertically resize me!
          </span>
        </div>
        <div class="dwtWindowStatusBar" style="height: 28px; white-space: normal;" nsResizeTarget="true">
          <span class="dwtWindowStatusBarText">Update Interval:</span> <input type="text" id="pager.window.form.timeout" class="updateInterval" size="2" /> <span class="submit">Submit</span>
        </div>
        <div class="dwtWindowStatusBar" style="height: 28px; white-space: normal;" nsResizeTarget="true">
          <span id="pager.window.status" class="dwtWindowStatusBarText">&nbsp;</span>
        </div>
      </div>
    </div>
  </body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dwt.zip">dwt.zip( 76 k)</a>


Drag and drop window system

<A href="http://www.wbex.ru/Code/JavaScriptDownload/ddi.1.5.2.all-in-one.zip">ddi.1.5.2.all-in-one.zip( 47 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/MvWindowBeta1.htm">Mv Window Beta1</a> <A href="/Code/JavaScript/Ajax-Layer/MvWindowBeta1.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/WindowsXPstylepopuppanel.htm">Windows XP style popup panel</a> <A href="/Code/JavaScript/Ajax-Layer/WindowsXPstylepopuppanel.htm"></a> 3. <A href="/Code/JavaScript/Ajax-Layer/YesnoDialog.htm">Yes no Dialog</a> <A href="/Code/JavaScript/Ajax-Layer/YesnoDialog.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/Modeldialogsetbackgroundbrowserclientareatogray.htm">Model dialog (set background browser client area to gray)</a> <A href="/Code/JavaScript/Ajax-Layer/Modeldialogsetbackgroundbrowserclientareatogray.htm"></a> 5. <A href="/Code/JavaScript/Ajax-Layer/Popuppaneldialog.htm">Popup panel (dialog)</a> <A href="/Code/JavaScript/Ajax-Layer/Popuppaneldialog.htm"></a> 6. <A href="/Code/JavaScript/Ajax-Layer/PhotoBoxExample.htm">Photo Box Example</a> <A href="/Code/JavaScript/Ajax-Layer/PhotoBoxExample.htm"></a> 7. <A href="/Code/JavaScript/Ajax-Layer/Resizablepopupwindow.htm">Resizable popup window</a> <A href="/Code/JavaScript/Ajax-Layer/Resizablepopupwindow.htm"></a> 8. <A href="/Code/JavaScript/Ajax-Layer/Popupwindow.htm">Popup window</a> <A href="/Code/JavaScript/Ajax-Layer/Popupwindow.htm"></a> 9. <A href="/Code/JavaScript/Ajax-Layer/DHTMLWindowingToolkitDemo.htm">DHTML Windowing Toolkit Demo</a> <A href="/Code/JavaScript/Ajax-Layer/DHTMLWindowingToolkitDemo.htm"></a> 10. <A href="/Code/JavaScript/Ajax-Layer/Javascriptbasedwindowsystem.htm">Javascript based window system</a> <A href="/Code/JavaScript/Ajax-Layer/Javascriptbasedwindowsystem.htm"></a> 11. <A href="/Code/JavaScript/Ajax-Layer/XPstylewindow.htm">XP style window</a> <A href="/Code/JavaScript/Ajax-Layer/XPstylewindow.htm"></a>

Javascript based window system

<A href="http://www.wbex.ru/Code/JavaScriptDownload/LWcomponents_0_4.zip">LWcomponents_0_4.zip( 29 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/MvWindowBeta1.htm">Mv Window Beta1</a> <A href="/Code/JavaScript/Ajax-Layer/MvWindowBeta1.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/WindowsXPstylepopuppanel.htm">Windows XP style popup panel</a> <A href="/Code/JavaScript/Ajax-Layer/WindowsXPstylepopuppanel.htm"></a> 3. <A href="/Code/JavaScript/Ajax-Layer/YesnoDialog.htm">Yes no Dialog</a> <A href="/Code/JavaScript/Ajax-Layer/YesnoDialog.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/Modeldialogsetbackgroundbrowserclientareatogray.htm">Model dialog (set background browser client area to gray)</a> <A href="/Code/JavaScript/Ajax-Layer/Modeldialogsetbackgroundbrowserclientareatogray.htm"></a> 5. <A href="/Code/JavaScript/Ajax-Layer/Popuppaneldialog.htm">Popup panel (dialog)</a> <A href="/Code/JavaScript/Ajax-Layer/Popuppaneldialog.htm"></a> 6. <A href="/Code/JavaScript/Ajax-Layer/PhotoBoxExample.htm">Photo Box Example</a> <A href="/Code/JavaScript/Ajax-Layer/PhotoBoxExample.htm"></a> 7. <A href="/Code/JavaScript/Ajax-Layer/Resizablepopupwindow.htm">Resizable popup window</a> <A href="/Code/JavaScript/Ajax-Layer/Resizablepopupwindow.htm"></a> 8. <A href="/Code/JavaScript/Ajax-Layer/Popupwindow.htm">Popup window</a> <A href="/Code/JavaScript/Ajax-Layer/Popupwindow.htm"></a> 9. <A href="/Code/JavaScript/Ajax-Layer/DHTMLWindowingToolkitDemo.htm">DHTML Windowing Toolkit Demo</a> <A href="/Code/JavaScript/Ajax-Layer/DHTMLWindowingToolkitDemo.htm"></a> 10. <A href="/Code/JavaScript/Ajax-Layer/Draganddropwindowsystem.htm">Drag and drop window system</a> <A href="/Code/JavaScript/Ajax-Layer/Draganddropwindowsystem.htm"></a> 11. <A href="/Code/JavaScript/Ajax-Layer/XPstylewindow.htm">XP style window</a> <A href="/Code/JavaScript/Ajax-Layer/XPstylewindow.htm"></a>

Model dialog (set background browser client area to gray)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Dialog</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<script type="text/javascript" src="./build/connection/connection.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>

<script language="javascript">
  YAHOO.namespace("example.container");
  function submitCallback(obj) {
    var response = obj.responseText;
    response = response.split("<!")[0];
    document.getElementById("resp").innerHTML = response;
    eval(response);
  }
  function submitFailure(obj) {
    alert("Submission failed: " + obj.status);
  }
  function init() {
    var handleCancel = function() {
      this.cancel();
    }
    var handleSubmit = function() {
      this.submit();
    }
    
    YAHOO.example.container.dlg = new YAHOO.widget.Dialog("dlg", { modal:true, visible:false, width:"350px", fixedcenter:true, constraintoviewport:true, draggable:true });
    
    YAHOO.example.container.dlg.callback.success = submitCallback;
    YAHOO.example.container.dlg.callback.failure = submitFailure;
    var listeners = new YAHOO.util.KeyListener(document, { keys : 27 }, {fn:handleCancel,scope:YAHOO.example.container.dlg,correctScope:true} );
    YAHOO.example.container.dlg.cfg.queueProperty("keylisteners", listeners);
    YAHOO.example.container.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:handleSubmit } ]);
    
    var handleManual = function(type, args, obj) {
      alert("Manual submission of " + this.id + " detected");
    }
    YAHOO.example.container.dlg.manualSubmitEvent.subscribe(handleManual, YAHOO.example.container.dlg, true);
    YAHOO.example.container.dlg.render();
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box">
    <div class="hd">
      <h1>Dialog Example</h1>
    </div>
    <div class="bd">
      <p>Dialog is a Panel implementation that is used for submitting forms. You can submit the form in three different ways: asynchronously, using the Connection utility, form-based submission, or you can handle the submission manually.</p>
      <p>The URLs for both asynchronous and form-based submission are taken from the form"s action property.</p>
      <p><button onclick="YAHOO.example.container.dlg.show()">Enter your information</button>
        <div class="radioline first"><input type="radio" name="async" id="asyncon" checked onclick="YAHOO.example.container.dlg.cfg.setProperty("postmethod","async")"/><label for="asyncon">Submit asynchronously (Dynamic XmlHttpRequest, POST only)</label></div>
        <div class="radioline"><input type="radio" name="async" id="asyncoff" onclick="YAHOO.example.container.dlg.cfg.setProperty("postmethod","form")" /><label for="asyncoff">Standard form submit (GET or POST)</label></div>
        <div class="radioline last"><input type="radio" name="async" id="asyncoff" onclick="YAHOO.example.container.dlg.cfg.setProperty("postmethod","none")" /><label for="asyncoff">Do nothing and handle posts manually</label></div>
      <select>
        <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
      </select>
      </p>
    </div>
    <div class="ft"></div>
  </div>
  <div class="box" style="margin-top:25px">
    <div class="hd">
      <h2>Server Response</h1>
    </div>
    
    <div class="bd">
      <h3>Post Response Text</h2>
      <p id="resp">[ Server Response will be displayed here ]</p>
    </div>
  </div>
  <div id="dlg">
    <div class="hd">Please enter your information</div>
    <div class="bd">
      <form name="dlgForm" method="POST" action="php/post.php">
      <p>Please enter your personal contact information:</p>
          <label for="firstname">First Name:</label><input type="textbox" name="firstname" /><br/>
          <label for="lastname">Last Name:</label><input type="textbox" name="lastname" /><br/>
          <label for="email">E-mail:</label><input type="textbox" name="email" /><br/> 
          <label for="state[]">State:</label><select multiple name="state[]" ><option value="California">California</option><option value="New Jersey">New Jersey</option><option value="New York">New York</option></select><br/> 
          <label for="radiobuttons">Radio buttons:</label>
          <input type="radio" name="radiobuttons[]" value="1" checked/> 1
          <input type="radio" name="radiobuttons[]" value="2" /> 2<br/>
          <label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1<br/>
          
          <label for="textarea">Text area:</label><textarea name="textarea"></textarea><br/>
          <label for="cbarray">Multi checkbox:</label>
          <input type="checkbox" name="cbarray[]" value="1" /> 1
          <input type="checkbox" name="cbarray[]" value="2" /> 2
        </div>
      </form>
    </div>
  </div>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Mv Window Beta1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>MvWindow</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <meta name="description" content="">
   <meta name="keywords" content="mvwindow, dynamic, window, javascript, content, sytem">
   <meta name="author" content="gsueess">
   <meta name="content-language" content="en">
  
  <!-- include mvwindow script -->
  <script type="text/javascript" language="Javascript" src="mvwindow.js"></script>  
  
  <link href="style/mvwindow.css" rel="StyleSheet" type="text/css">
  <link href="style/page.css" rel="StyleSheet" type="text/css">
</head>
<body bgcolor="#818181" onmousemove="moveit(event);" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<table width="100%" height="100%" onmouseup="stopmove();" cellpadding="0" cellspacing="0">
  <tr><td align="center">
  <table width="576" height="100%" cellpadding="0" cellspacing="0">
    <tr><td height="86" background="images/head.jpg" width="576" align="right"></td></tr>
    <tr><td height="297" background="images/main.jpg" width="576">
        <table width="100%" height="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td width="45">&nbsp;</td>
              <td width="120">
                <table width="100%" height="100%" cellpadding="0" cellspacing="0">
                  <tr><td height="5"></td></tr>
                  <tr><td height="23"><a href="javascript:f1.show();" class="text">MvWindow 1</a></td></tr>
                  <tr><td height="23"><a href="javascript:f2.show();" class="text">MvWindow 2</a></td></tr>
                  <tr><td height="23"><a href="javascript:f3.show();" class="text">MvWindow 3</a></td></tr>
                  <tr><td height="23"><a href="javascript:clearCookies();" class="text">Clear Cookies</a></td></tr>
                  <tr><td height="23"><a href="javascript:viewall();" class="text">Show All</a></td></tr>
                  <tr><td>&nbsp;</td></tr>
                </table>
              </td>
              <td>&nbsp;</td>
            </tr>
        </table>
    </td></tr>
    <tr><td background="images/zw1.jpg" width="576" align="center" valign="bottom"><a href="http://sourceforge.net"><a href="http://sourceforge.net/donate/index.php?group_id=163485"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support This Project" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://sflogo.sourceforge.net/sflogo.php?group_id=163485&amp;type=1" width="88" height="31" border="0" alt="SourceForge.net Logo" /></a></td></tr>
    <tr><td height="35" background="images/end.jpg" width="576"></td></tr>
  </table>
  
  </td></tr>
</table>
<script language="JavaScript" type="text/javascript">
  
  var f1 = new mvwindow("f1"); // create window objekt ( required for each window )
  var f2 = new mvwindow("f2"); // create window objekt ( required for each window )
  var f3 = new mvwindow("f3"); // create window objekt ( required for each window )
  var f4 = new mvwindow("f4"); // create window objekt ( required for each window )
  
  newMvWindow("f1"); // create window f1 ( required for each window )
  newMvWindow("f2"); // create window f2 ( required for each window )
  newMvWindow("f3"); // create window f3 ( required for each window )
  newMvWindow("f4"); // create window f3 ( required for each window )
  
  // custom left start position ( not required )
  lpos = Math.round((document.body.clientWidth-576)/2);
  if (lpos < 10){
    lpos = 10;
  }
  
  // custom top start position ( not required )
  tpos = Math.round((document.body.clientHeight-600)/2);
  if (tpos < 10){
    tpos = 10;
  }
  
  // setsize(width,height,top,left)  position and size of the windows. ( not required )
  f1.setsize(510,290,250,lpos+15);
  f2.setsize(510,290,267,lpos+32);
  f3.setsize(170,185,284,lpos+49);
  f4.setsize(350,85,300,lpos+69);
  
  f1.hide(); // hide the window ( not required )
  f2.hide(); // hide the window ( not required )
  f3.hide(); // hide the window ( not required )
  f4.show(); // show window f4 ( not required )
  
  f1.settitle("MvWindow 1");  // set window title ( not required )
  f2.settitle("MvWindow 2");  // set window title ( not required )
  f3.settitle("MvWindow 3");  // set window title ( not required )
  f4.settitle("MvWindow 4");  // set window title ( not required )
  
  // write content to the windows
  
  var f1content = "<table width=500 height=248><tr><td>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich &uuml;ber den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus &uuml;bertr&auml;gt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen h&auml;tte passieren k&ouml;nnen, wenn dieser Blindtext durch einen echten Text ersetzt worden w&auml;re.</td></tr></table>";  
  var f2content = "<table width=500 height=248>This, of course, is not the real copy for this advertisement. The real words will be written once you have approved the headline. Rest assured, the words will expand the concept. With clarity. Conviction. And even a little wit. Because in today�s competitive marketing environment, the body copy of your advertisment must lead the reader through a series of disarmingly simple thoughts. All your supporting arguments must be communicated with simplicity and charm. And in such a way that the reader will read on. (After all, that�s a reader�s job: to read, isn�t it?)</td></tr></table>";
  f1.setcontent(f1content);
  f2.setcontent(f2content);
  f3.setcontent("<img src=images/sample.jpg width=100% height=100%>");
  f4.setcontent("This web page is meant only as example of the MvWindow Javascript<br><a href=https://sourceforge.net/projects/mvwindow/ class=link>https://sourceforge.net/projects/mvwindow/</a>");
    
  mbarleftpos = Math.round((document.body.clientWidth-550)/2)+22;  //set minimized left window start position ( not required, default 0 )
  mbarbottompos = 27;
  
  cookieactivate(); // set cookies aktiv ( not required )
  
  // Protect the page from content selection. ( not required )
  document.onselectstart=new Function ("return false")
  if (window.sidebar){
    document.onmousedown=disableselect
    document.onclick=reEnable
    }
  // Browser window Resizing ( not required )
  onresize = pagereloader;
  function pagereloader()
  {
    mbarleftpos = Math.round((document.body.clientWidth-550)/2)+22;  //update minimized window left start position
    browserresize();  // move the windows to the new position.
  }
  
  </script>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/MvWindow_Beta1.zip">MvWindow_Beta1.zip( 119 k)</a>


Photo Box Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel - PhotoBox Example</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<script type="text/javascript" src="./examples/container/js/PanelEffect.js"></script>
<script type="text/javascript" src="./examples/container/js/PhotoBox.js"></script>
<link rel="stylesheet" type="text/css" href="./examples/container/css/photobox.css" />
<script language="javascript">
  YAHOO.namespace("example.photobox");
  function init() {
    YAHOO.example.photobox.box = new YAHOO.widget.PhotoBox("win", { 
    effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}], 
    fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:false, modal:true, 
    photos:[{src:"http://www.wbex.ru/style/logo.png",caption:"Linus"},
        {src:"http://www.wbex.ru/style/logo.png",caption:"Linus 2"},
        {src:"http://www.wbex.ru/style/logo.png",caption:"Dobb"s Ferry, NY"}
        ], width:"500px"}  
        );
    YAHOO.example.photobox.box.render();
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box" id="bodyMain">
    <div class="hd">
      <h1>PhotoBox Example</h1>
    </div>
    <div class="bd">
      <button onclick="YAHOO.example.photobox.box.show()">Show the PhotoBox</button>
      <select>
        <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
      </select>
    </div>
  </div>
  <div id="win">
      <div class="hd"><div class="lt"></div><span id="win_title">Linus</span><div class="rt"></div></div>
      <div class="bd">
        <img id="win_img" src="#" width="500"/>
      </div>
    </div>
  </div>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Popup panel (dialog)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel - Aqua Panel Example</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<link rel="stylesheet" type="text/css" href="./examples/container/css/panel-aqua.css" />
<script language="javascript">
  YAHOO.namespace("example.aqua");
  function init() {
    YAHOO.example.aqua.panel = new YAHOO.widget.Panel("win", { effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, width:"30em", fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:true, modal:false } );
    YAHOO.example.aqua.panel.render();
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box" id="bodyMain">
    <div class="hd">
      <h1>Aqua Panel Example</h1>
    </div>
    <div class="bd">
      <p>Some custom CSS allows Panel to be rendered with a familiar skin.
      </p>
      <button onclick="YAHOO.example.aqua.panel.show()">Show the Panel</button>
      <select>
        <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
      </select>
    </div>
  </div>
<div id="win">
    <div class="hd"><div class="lt"></div><span>Sprockets!</span><div class="rt"></div></div>
    <div class="bd">
      <img src="http://static.flickr.ru/7/6301565_7123909f10_t.jpg" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis in risus. Vestibulum a nibh tincidunt elit iaculis laoreet. In pede metus, tristique non, consectetuer a, vestibulum vel, enim. Curabitur neque magna, pulvinar sit amet, lobortis viverra, porta non, dui. Donec tempor, arcu quis interdum pellentesque, dui dolor gravida pede, in iaculis justo tortor venenatis ligula. Cras non pede vel risus egestas faucibus. Nam pulvinar lobortis nisi. In vehicula venenatis sapien.</p>
      <p style="margin-bottom:0px">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et risus ut est adipiscing congue. Praesent ut justo. Proin hendrerit urna eget eros. Curabitur condimentum tempor diam. Pellentesque tortor odio, sollicitudin eget, pellentesque ut, ullamcorper a, justo. Nam tellus pede, fermentum ac, sollicitudin sed, mollis vel, turpis. Fusce pulvinar nibh et erat. Praesent purus nibh, fermentum ac, imperdiet vel, aliquet eu, mi. Praesent non nisi ac mauris tempor ultricies. Nulla mollis tellus porta leo. Nunc accumsan dapibus tellus. Nunc nec nunc.</p>
    </div>
  </div>
</div>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Popup window

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<style>
#win {
  visibility:hidden;
}
</style>
<script language="javascript">
  YAHOO.namespace("example.panel");
  YAHOO.example.panel.panels = [];
  function init() {
    YAHOO.example.panel.panel = new YAHOO.widget.Panel("win", { width:"30em", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true, modal:false } );
    YAHOO.example.panel.panel.render();
    
    YAHOO.example.panel.panels["win"] = YAHOO.example.panel.panel;
  }
  function create() {
    var form = document.forms["overlayform"];
    // get form values
    var id = form["id"].value;
    var x = form["x"].value;
    var y = form["y"].value;
    
    var header = form["header"].value;
    var body = form["body"].value;
    var footer = form["footer"].value;
    var visible = form["visible"].checked;
    var effectArg;
    if (form["effect"].selectedIndex > 0) {
      var dur = form["duration"].value;
      if (! dur) {
        dur = 0.5;
      } else {
        dur = parseFloat(dur);
      }
      var effect = form["effect"].options[form["effect"].selectedIndex].value;
      var effectClass = eval(effect);
      effectArg = {
        effect:effectClass,
        duration:dur
      }
    }
    var width = form["width"].value;
    var height = form["height"].value;
    var zIndex = form["zIndex"].value;
    var constrain = form["constraintoviewport"].checked;
    var useIframe = form["iframe"].checked;
    
    var fixedcenter = form["fixedcenter"].checked;
      
    var modal = form["modal"].checked;
    var close = form["close"].checked;
    var draggable = form["draggable"].checked;
    var context = form["context"].value;
    var contextArg = new Array();
    if (context) {
      contextArg[0] = context;
      contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
      contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
    }
    
    var underlay = "none";
    if (form["underlay"].selectedIndex > 0) {
      underlay = form["underlay"].options[form["underlay"].selectedIndex].value;
    }
    var args = {};
    args.visible = visible;
    if (effectArg) {
      args.effect = effectArg;
    }
    if (x) {
      args.x = parseInt(x);
    }
    if (y) {
      args.y = parseInt(y);
    }
    if (width) {
      args.width = width;
    }
    if (height) {
      args.height = height;
    }
    
    args.constraintoviewport = constrain;
    args.iframe = useIframe;
  
    args.fixedcenter = fixedcenter;
    args.draggable = draggable;
    args.modal = modal;
    args.underlay = underlay;
    args.close = close;
    if (contextArg.length > 0) {
      args.context = contextArg;
    }
    var newMod;
    var isNew = true;
    if (YAHOO.example.panel.panels[id]) {
      newMod = YAHOO.example.panel.panels[id];
      newMod.cfg.applyConfig(args);
      isNew = false;
    } else {
      newMod = new YAHOO.widget.Panel(id, args);
      YAHOO.example.panel.panels[id] = newMod;
    }
    if (header) {
      newMod.setHeader(header);
    }
    if (body) {
      newMod.setBody(body);
    }
    if (footer) {
      newMod.setFooter(footer);
    }
    
    if (isNew) {
      newMod.render(document.body);
    } else {
      newMod.render();
    }
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box" id="bodyMain">
    <div class="hd">
      <h1>Panel Example</h1>
    </div>
    <div class="bd">
      <p>A Panel is a configurable Overlay which behaves like a traditional OS window, and includes built-in drag & drop, a close icon, an underlay (shadow or matte) and built-in modality. To instantiate a Panel against existing markup, the constructor is very similar to the one used for Overlay. The example here is instantiated using this constructor:
        <code>win = new YAHOO.widget.Panel("win", { width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true} );</code>
      </p>
      <p>Panel, like its base classes, features dynamic configuration. Try executing the code below to change the underlay style to matte:
        <code>panel.cfg.setProperty("underlay","matte");<button onclick="YAHOO.example.panel.panel.cfg.setProperty("underlay","matte");">try it!</button></code>
      </p>
      <button onclick="YAHOO.example.panel.panel.show()">Show the Panel</button>
      <select>
        <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
      </select>
    </div>
  </div>
<div id="win">
    <div class="hd">Sprockets!</div>
    <div class="bd">
      <img src="http://www.wbex.ru/style/logo.png" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel tellus quis pede congue rutrum. Proin quam. Nullam sit amet arcu. Vivamus imperdiet. Cras iaculis odio sit amet risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum volutpat laoreet metus. In vel risus non dolor gravida laoreet. Sed convallis libero ut sapien. Aliquam risus tellus, volutpat vel, tincidunt quis, tristique et, justo.</p>
<p>Ut feugiat, sem non hendrerit convallis, nisi lectus laoreet mauris, eget nonummy est eros a ligula. Fusce metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing, mi in dapibus imperdiet, lacus diam auctor ligula, eu interdum nibh nibh in ligula. Aliquam euismod pulvinar dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque metus augue, ornare scelerisque, tempor eget, euismod porttitor, dui. Nulla neque. Praesent ut velit vel mi feugiat posuere. Ut mollis. Aliquam ac massa non velit posuere facilisis.</p>
    </div>
  </div>
</div>
<form onsubmit="return false" id="overlayform">
<div class="overlayform">
  <div class="formheader">
      Create / Modify a Dynamic Panel
    </div>
  <div class="row header">
      <div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
    </div>
  <div class="row first">
      <div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
    </div>
  <div class="row first">
      <div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
    </div>
  <div class="row first">
      <div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
    </div>
  <div class="row first">
      <div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
    </div>
  <div class="row">
      <div class="label">Show/Hide Effect(s)</div><div class="formw"><select name="effect">
      <option value="">*none*</option>
      <option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
      <option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
    </select> Duration: <input type="text" name="duration" style="width:25px"/>s</div>
    </div>
  <div class="row">
      <div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
    </div>
  <div class="row">
      <div class="label">x position</div><div class="formw"><input type="text" name="x" /></div>
    </div>
  <div class="row">
      <div class="label">y position</div><div class="formw"><input type="text" name="y" /></div>
    </div>
  <div class="row">
      <div class="label">width</div><div class="formw"><input type="text" name="width" /></div>
    </div>
  <div class="row">
      <div class="label">height</div><div class="formw"><input type="text" name="height" /></div>
    </div>
  <div class="row">
      <div class="label">z-index</div><div class="formw"><input type="text" name="zIndex" /></div>
    </div>
  <div class="row">
      <div class="label">constrain to viewport</div><div class="formw"><input type="checkbox" name="constraintoviewport" value="checkbox" checked /></div>
    </div>
  
  <div class="row">
      <div class="label">fix to center of viewport</div><div class="formw"><input type="checkbox" name="fixedcenter" value="checkbox" /></div>
    </div>
  <div class="row">
      <div class="label">Use iframe shim</div><div class="formw"><input type="checkbox" name="iframe" value="checkbox" /></div>
    </div>
  <div class="row">
      <div class="label">Modal</div><div class="formw"><input type="checkbox" name="modal" value="checkbox" /></div>
    </div>
  <div class="row">
      <div class="label">Draggable</div><div class="formw"><input type="checkbox" name="draggable" value="checkbox" checked="true"/></div>
    </div>
  
  <div class="row">
      <div class="label">Show close icon</div><div class="formw"><input type="checkbox" name="close" value="checkbox" checked="true"/></div>
    </div>
  <div class="row">
      <div class="label">Underlay</div><div class="formw"><select name="underlay">
      <option value="none">*none*</option>
      <option value="shadow">Shadow</option>
      <option value="matte">Matte</option>
    </select>
    </div>
  <div class="row">
      <div class="label">Context element</div><div class="formw">ID:<input type="text" name="context" /></div>
  </div>
  <div class="row">
    <div class="label">&nbsp;</div>
    <div class="formw">
      Align overlay"s 
      <select name="elementMagnet">
        <option value="tl">top left</option>
        <option value="tr">top right</option>
        <option value="bl">bottom left</option>
        <option value="br">bottom right</option>
      </select>
      corner to context element"s 
      <select name="contextMagnet">
        <option value="tl">top left</option>
        <option value="tr">top right</option>
        <option value="bl">bottom left</option>
        <option value="br">bottom right</option>
      </select> corner
    </div>
    </div>
  <div class="row last">
      <div class="label"></div><div class="formw"><button onclick="create()">create/modify my Panel</button></div>
  </div>
</div>
</form>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Resizable popup window

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel - Resizable Panel Example</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/ResizePanel.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<script type="text/javascript" src="./examples/container/js/ResizePanel.js"></script>
<script language="javascript">
  YAHOO.namespace("example.resize");
  function init() {
    YAHOO.example.resize.panel = new YAHOO.widget.ResizePanel("win", { effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, width:"30em", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true, modal:false } );
    YAHOO.example.resize.panel.render();
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box" id="bodyMain">
    <div class="hd">
      <h1>Resize Panel Example</h1>
    </div>
    <div class="bd">
      <p>This subclass of Panel (ResizePanel) utilizes the footer of the Panel as a resize handle for dynamic drag and resize of a Panel.</p>
      <button onclick="YAHOO.example.resize.panel.show()">Show the ResizePanel</button>
    </div>
  </div>
<div id="win" style="visibility:hidden">
    <div class="hd"><div class="tl"></div><span>Sprockets!</span><div class="tr"></div></div>
    <div class="bd">
      <img src="http://www.wbex.ru/style/logo.png" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis in risus. Vestibulum a nibh tincidunt elit iaculis laoreet. In pede metus, tristique non, consectetuer a, vestibulum vel, enim. Curabitur neque magna, pulvinar sit amet, lobortis viverra, porta non, dui. Donec tempor, arcu quis interdum pellentesque, dui dolor gravida pede, in iaculis justo tortor venenatis ligula. Cras non pede vel risus egestas faucibus. Nam pulvinar lobortis nisi. In vehicula venenatis sapien.</p>
      <p style="margin-bottom:0px">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et risus ut est adipiscing congue. Praesent ut justo. Proin hendrerit urna eget eros. Curabitur condimentum tempor diam. Pellentesque tortor odio, sollicitudin eget, pellentesque ut, ullamcorper a, justo. Nam tellus pede, fermentum ac, sollicitudin sed, mollis vel, turpis. Fusce pulvinar nibh et erat. Praesent purus nibh, fermentum ac, imperdiet vel, aliquet eu, mi. Praesent non nisi ac mauris tempor ultricies. Nulla mollis tellus porta leo. Nunc accumsan dapibus tellus. Nunc nec nunc.</p>
    </div>
  </div>
</div>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Windows XP style popup panel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel - XP Panel Example</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<link rel="stylesheet" type="text/css" href="./examples/container/css/panel-xp.css" />
<script language="javascript">
  YAHOO.namespace("example.xp");
  function init() {
    YAHOO.example.xp.panel = new YAHOO.widget.Panel("win", { effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, width:"30em", fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:true, modal:false } );
    YAHOO.example.xp.panel.render();
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box" id="bodyMain">
    <div class="hd">
      <h1>XP Panel Example</h1>
    </div>
    <div class="bd">
      <p>Some custom CSS allows Panel to be rendered with a familiar skin.
      </p>
      <button onclick="YAHOO.example.xp.panel.show()">Show the Panel</button>
      <select>
        <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
      </select>
    </div>
  </div>
<div id="win">
    <div class="hd"><div class="tl"></div><span>Sprockets!</span><div class="tr"></div></div>
    <div class="bd">
      <img src="http://www.wbex.ru/style/logo.png" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis in risus. Vestibulum a nibh tincidunt elit iaculis laoreet. In pede metus, tristique non, consectetuer a, vestibulum vel, enim. Curabitur neque magna, pulvinar sit amet, lobortis viverra, porta non, dui. Donec tempor, arcu quis interdum pellentesque, dui dolor gravida pede, in iaculis justo tortor venenatis ligula. Cras non pede vel risus egestas faucibus. Nam pulvinar lobortis nisi. In vehicula venenatis sapien.</p>
      <p style="margin-bottom:0px">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et risus ut est adipiscing congue. Praesent ut justo. Proin hendrerit urna eget eros. Curabitur condimentum tempor diam. Pellentesque tortor odio, sollicitudin eget, pellentesque ut, ullamcorper a, justo. Nam tellus pede, fermentum ac, sollicitudin sed, mollis vel, turpis. Fusce pulvinar nibh et erat. Praesent purus nibh, fermentum ac, imperdiet vel, aliquet eu, mi. Praesent non nisi ac mauris tempor ultricies. Nulla mollis tellus porta leo. Nunc accumsan dapibus tellus. Nunc nec nunc.</p>
    </div>
    <div class="ft">
      <div class="bl"></div><span>Some footer text</span><div class="br"></div>
    </div>
  </div>
</div>

</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


XP style window

<A href="http://www.wbex.ru/Code/JavaScriptDownload/mjsobjects.zip">mjsobjects.zip( 815 k)</a>

1. <A href="/Code/JavaScript/Ajax-Layer/MvWindowBeta1.htm">Mv Window Beta1</a> <A href="/Code/JavaScript/Ajax-Layer/MvWindowBeta1.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/WindowsXPstylepopuppanel.htm">Windows XP style popup panel</a> <A href="/Code/JavaScript/Ajax-Layer/WindowsXPstylepopuppanel.htm"></a> 3. <A href="/Code/JavaScript/Ajax-Layer/YesnoDialog.htm">Yes no Dialog</a> <A href="/Code/JavaScript/Ajax-Layer/YesnoDialog.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/Modeldialogsetbackgroundbrowserclientareatogray.htm">Model dialog (set background browser client area to gray)</a> <A href="/Code/JavaScript/Ajax-Layer/Modeldialogsetbackgroundbrowserclientareatogray.htm"></a> 5. <A href="/Code/JavaScript/Ajax-Layer/Popuppaneldialog.htm">Popup panel (dialog)</a> <A href="/Code/JavaScript/Ajax-Layer/Popuppaneldialog.htm"></a> 6. <A href="/Code/JavaScript/Ajax-Layer/PhotoBoxExample.htm">Photo Box Example</a> <A href="/Code/JavaScript/Ajax-Layer/PhotoBoxExample.htm"></a> 7. <A href="/Code/JavaScript/Ajax-Layer/Resizablepopupwindow.htm">Resizable popup window</a> <A href="/Code/JavaScript/Ajax-Layer/Resizablepopupwindow.htm"></a> 8. <A href="/Code/JavaScript/Ajax-Layer/Popupwindow.htm">Popup window</a> <A href="/Code/JavaScript/Ajax-Layer/Popupwindow.htm"></a> 9. <A href="/Code/JavaScript/Ajax-Layer/DHTMLWindowingToolkitDemo.htm">DHTML Windowing Toolkit Demo</a> <A href="/Code/JavaScript/Ajax-Layer/DHTMLWindowingToolkitDemo.htm"></a> 10. <A href="/Code/JavaScript/Ajax-Layer/Javascriptbasedwindowsystem.htm">Javascript based window system</a> <A href="/Code/JavaScript/Ajax-Layer/Javascriptbasedwindowsystem.htm"></a> 11. <A href="/Code/JavaScript/Ajax-Layer/Draganddropwindowsystem.htm">Drag and drop window system</a> <A href="/Code/JavaScript/Ajax-Layer/Draganddropwindowsystem.htm"></a>

Yes no Dialog

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.SimpleDialog</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<script language="javascript">
  YAHOO.namespace("example.simpledialog");
  function init() {
    var handleCancel = function(e) {
      alert("You clicked "Cancel"!");
      this.hide();
    }
    var handleOK = function(e) {
      alert("You clicked "OK"!");
      this.hide();
    }
    YAHOO.example.simpledialog.dlg = new YAHOO.widget.SimpleDialog("dlg", { visible:false, width: "20em", effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25},{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}], fixedcenter:true, modal:true, draggable:false });
    
    YAHOO.example.simpledialog.dlg.setHeader("Warning!");
    YAHOO.example.simpledialog.dlg.setBody("Are you sure you want to do this?");
    YAHOO.example.simpledialog.dlg.cfg.queueProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
    YAHOO.example.simpledialog.dlg.cfg.queueProperty("buttons", [ 
                                    { text:"OK", handler:handleOK, isDefault:true },
                                    { text:"Cancel", handler:handleCancel }
                                  ]);
    var listeners = new YAHOO.util.KeyListener(document, { keys : 27 }, {fn:handleCancel ,scope:YAHOO.example.simpledialog.dlg, correctScope:true} );
    YAHOO.example.simpledialog.dlg.cfg.queueProperty("keylisteners", listeners);
    YAHOO.example.simpledialog.dlg.render(document.body);
  }
  YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
  <div class="box">
    <div class="hd">
      <h1>SimpleDialog Example</h1>
    </div>
    <div class="bd">
      <p>SimpleDialog is an implementation of <a href="panel.html">Panel</a> that behaves like an OS dialog. SimpleDialog is used for asking the user a simple question that usually involves a Yes/No or OK/Cancel response.</p> 
      <p>The code to instantiate this SimpleDialog example looks like this:
        <code>dlg = new YAHOO.widget.SimpleDialog("dlg", { width: "20em", effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, fixedcenter:true, modal:true, draggable:false });<br/><br/>
    YAHOO.example.simpledialog.dlg.setHeader("Warning!");<br/>
    YAHOO.example.simpledialog.dlg.setBody("Are you sure you want to do this?");<br/>
    YAHOO.example.simpledialog.dlg.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
        </code>
        Next, we wire up the buttons using a simple JSON structure that points to local handlers for each button:
        <code>        
        dlg.cfg.setProperty("buttons",  [ 
            { text:"OK", handler:handleOK, isDefault:true },
            { text:"Cancel",handler:handleCancel } 
            ]
        );
        </code>
      </p>
      <button onclick="YAHOO.example.simpledialog.dlg.show()">Show me a dialog</button>
      <select>
        <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
      </select>
    </div>
  </div>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Window_Dialog&oldid=1701»