JavaScript DHTML/Ajax Layer/Window Dialog

Материал из Web эксперт
Перейти к: навигация, поиск

Содержание

DHTML Windowing Toolkit Demo

   <source lang="html4strict">

<!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;

}

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">

       </script>
 </head>
 <body onload="onLoad()">
<img class="dwtWindowTitleBarChrome" src="images/dwt/blank.gif" /> <img class="dwtWindowTitleBarIcon" src="images/dwt/blank.gif" />
This is a Really Long Window Title That Will Need to be Clipped
 <img class="dwtWindowTitleBarWhitespace" src="images/dwt/blank.gif" /> <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" /> <img class="dwtWindowTitleBarControl" controlType="close" effect="DropOut" src="images/dwt/close.gif" mouseoverSrc="images/dwt/close.mouseover.gif" /> <img class="dwtWindowTitleBarChrome" src="images/dwt/blank.gif" /> 
         This is a really long line with nowrap that will require horizontal scrolling.

           

           This window has multiple vertical resize targets.

           Vertically resize me!
         

         Update Interval: <input type="text" id="pager.window.form.timeout" class="updateInterval" size="2" /> Submit

          

 </body>

</html> 

      </source>

<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)

   <source lang="html4strict">

<!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>

Dialog Example

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.

The URLs for both asynchronous and form-based submission are taken from the form"s action property.

<button onclick="YAHOO.example.container.dlg.show()">Enter your information</button>

<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>
<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>
<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>
     <select>
       <option>This is a <select> element, helpul for testing the IFRAME shim</option>
     </select>

Server Response</h1> </div>

Post Response Text</h2>

[ Server Response will be displayed here ]

   </div>
 </div>
Please enter your information
     <form name="dlgForm" method="POST" action="php/post.php">

Please enter your personal contact information:

         <label for="firstname">First Name:</label><input type="textbox" name="firstname" />

         <label for="lastname">Last Name:</label><input type="textbox" name="lastname" />

         <label for="email">E-mail:</label><input type="textbox" name="email" />
 
         <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>
 
         <label for="radiobuttons">Radio buttons:</label>
         <input type="radio" name="radiobuttons[]" value="1" checked/> 1
         <input type="radio" name="radiobuttons[]" value="2" /> 2

         <label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1

         
         <label for="textarea">Text area:</label><textarea name="textarea"></textarea>

         <label for="cbarray">Multi checkbox:</label>
         <input type="checkbox" name="cbarray[]" value="1" /> 1
         <input type="checkbox" name="cbarray[]" value="2" /> 2

     </form>

 </div>

</body> </html> 

      </source>

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


Mv Window Beta1

   <source lang="html4strict">

<!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">
 
 
 <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">

 
<a href="javascript:f1.show();" class="text">MvWindow 1</a>
<a href="javascript:f2.show();" class="text">MvWindow 2</a>
<a href="javascript:f3.show();" class="text">MvWindow 3</a>
<a href="javascript:clearCookies();" class="text">Clear Cookies</a>
<a href="javascript:viewall();" class="text">Show All</a>
 
  
<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>      <img src="http://sflogo.sourceforge.net/sflogo.php?group_id=163485&type=1" width="88" height="31" border="0" alt="SourceForge.net Logo" /></a>

<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 = "
Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträ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ätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.
"; var f2content = "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>
"; 
 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
<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> 

      </source>

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


Photo Box Example

   <source lang="html4strict">

<!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>

PhotoBox Example

     <button onclick="YAHOO.example.photobox.box.show()">Show the PhotoBox</button>
     <select>
       <option>This is a <select> element, helpul for testing the IFRAME shim</option>
     </select>
Linus
       <img id="win_img" src="#" width="500"/>

 </div>

</body> </html> 

      </source>

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


Popup panel (dialog)

   <source lang="html4strict">

<!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>

Aqua Panel Example

Some custom CSS allows Panel to be rendered with a familiar skin. 

     <button onclick="YAHOO.example.aqua.panel.show()">Show the Panel</button>
     <select>
       <option>This is a <select> element, helpul for testing the IFRAME shim</option>
     </select>
Sprockets!
     <img src="http://static.flickr.ru/7/6301565_7123909f10_t.jpg" alt="sprockets!" style="float:left;margin:0 5px 5px"/>

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.

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.

</div>

</body> </html> 

      </source>

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


Popup window

   <source lang="html4strict">

<!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>

  1. 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>

Panel Example

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: win = new YAHOO.widget.Panel("win", { width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:true} );

Panel, like its base classes, features dynamic configuration. Try executing the code below to change the underlay style to matte: panel.cfg.setProperty("underlay","matte");<button onclick="YAHOO.example.panel.panel.cfg.setProperty("underlay","matte");">try it!</button> 

     <button onclick="YAHOO.example.panel.panel.show()">Show the Panel</button>
     <select>
       <option>This is a <select> element, helpul for testing the IFRAME shim</option>
     </select>
Sprockets!
     <img src="http://www.wbex.ru/style/logo.png" alt="sprockets!" style="float:left;margin:0 5px 5px"/>

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.

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.

</div> <form onsubmit="return false" id="overlayform"> 

     Create / Modify a Dynamic Panel
Property
Value
ID
<input type="text" name="id" />
Header
<textarea name="header"></textarea>
Body
<textarea name="body"></textarea>
Footer
<textarea name="footer"></textarea>
Show/Hide Effect(s)
<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
Visible
<input type="checkbox" name="visible" value="checkbox" checked="true"/>
x position
<input type="text" name="x" />
y position
<input type="text" name="y" />
width
<input type="text" name="width" />
height
<input type="text" name="height" />
z-index
<input type="text" name="zIndex" />
constrain to viewport
<input type="checkbox" name="constraintoviewport" value="checkbox" checked />
fix to center of viewport
<input type="checkbox" name="fixedcenter" value="checkbox" />
Use iframe shim
<input type="checkbox" name="iframe" value="checkbox" />
Modal
<input type="checkbox" name="modal" value="checkbox" />
Draggable
<input type="checkbox" name="draggable" value="checkbox" checked="true"/>
Show close icon
<input type="checkbox" name="close" value="checkbox" checked="true"/>
Underlay
<select name="underlay"> 
     <option value="none">*none*</option>
     <option value="shadow">Shadow</option>
     <option value="matte">Matte</option>
   </select>
Context element
ID:<input type="text" name="context" />
 
     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
<button onclick="create()">create/modify my Panel</button>

</form> </body> </html> 

      </source>

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


Resizable popup window

   <source lang="html4strict">

<!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>

Resize Panel Example

This subclass of Panel (ResizePanel) utilizes the footer of the Panel as a resize handle for dynamic drag and resize of a Panel.

     <button onclick="YAHOO.example.resize.panel.show()">Show the ResizePanel</button>

</body> </html> 

      </source>

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


Windows XP style popup panel

   <source lang="html4strict">

<!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>

XP Panel Example

Some custom CSS allows Panel to be rendered with a familiar skin. 

     <button onclick="YAHOO.example.xp.panel.show()">Show the Panel</button>
     <select>
       <option>This is a <select> element, helpul for testing the IFRAME shim</option>
     </select>
Sprockets!
     <img src="http://www.wbex.ru/style/logo.png" alt="sprockets!" style="float:left;margin:0 5px 5px"/>

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.

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.

Some footer text

</div>

</body> </html> 

      </source>

<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

   <source lang="html4strict">

<!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>

SimpleDialog Example

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.

The code to instantiate this SimpleDialog example looks like this: dlg = new YAHOO.widget.SimpleDialog("dlg", { width: "20em", effect:{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.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN); Next, we wire up the buttons using a simple JSON structure that points to local handlers for each button: dlg.cfg.setProperty("buttons", [ { text:"OK", handler:handleOK, isDefault:true }, { text:"Cancel",handler:handleCancel } ] ); 

     <button onclick="YAHOO.example.simpledialog.dlg.show()">Show me a dialog</button>
     <select>
       <option>This is a <select> element, helpul for testing the IFRAME shim</option>
     </select>

</body> </html> 


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

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