JavaScript DHTML/YUI Library/Overlay

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

Creating and Positioning an Overlay

   <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=utf-8">

<title>Creating and Positioning an Overlay</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>

</head> <body class=" yui-skin-sam">

Creating and Positioning an Overlay

Overlays are extensions of Modules and differ in the sense that the float above the normal page flow. They can be positioned in three different ways: By fixing them to the center of the viewport (overlay1 below), by specifying a position (overlay2), and by positioning them relative to a context element (overlay3).

Use the buttons in the example below to show and hide the three Overlay instances.

<style>

 .yui-overlay { position:absolute;background:#fff;border:1px dotted black;padding:5px;margin:10px; }
 .yui-overlay .hd { border:1px solid red;padding:5px; }
 .yui-overlay .bd { border:1px solid green;padding:5px; }
 .yui-overlay .ft { border:1px solid blue;padding:5px; }
 #ctx { background:orange;width:100px;height:25px; }
 
 #example {height:15em;}

</style> <script>

   YAHOO.namespace("example.container");
   function init() {
     // Build overlay1 based on markup, initially hidden, fixed to the center of the viewport, and 300px wide
     YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", { fixedcenter:true,
                                           visible:false,
                                           width:"300px" } );
     YAHOO.example.container.overlay1.render();
     YAHOO.log("Overlay1 rendered.", "info", "example");
     // Build overlay2 dynamically, initially hidden, at position x:400,y:500, and 300px wide
     YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2", { xy:[600,200],
                                           visible:false,
                                           width:"300px" } );
     YAHOO.example.container.overlay2.setHeader("Overlay #2 from Script");
     YAHOO.example.container.overlay2.setBody("This is a dynamically generated Overlay.");
     YAHOO.example.container.overlay2.setFooter("End of Overlay #2");
     YAHOO.example.container.overlay2.render(document.body);
     YAHOO.log("Overlay2 rendered.", "info", "example");
     // Build overlay3 dynamically, initially hidden, aligned to context element "context", and 200px wide
           // Re-align just before the overlay is shown and whenever the window is resized to account for changes in the position  
           // of the context element after the initial context alignment 
     YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3", { context:["ctx","tl","bl", ["beforeShow", "windowResize"]],
                                           visible:false,
                                           width:"200px" } );
     YAHOO.example.container.overlay3.setHeader("Overlay #3 from Script");
     YAHOO.example.container.overlay3.setBody("This is a dynamically generated Overlay.");
     YAHOO.example.container.overlay3.setFooter("End of Overlay #3");
     YAHOO.example.container.overlay3.render(document.body);
     YAHOO.log("Overlay3 rendered.", "info", "example");
     YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, YAHOO.example.container.overlay1, true);
     YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, YAHOO.example.container.overlay1, true);
     YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, YAHOO.example.container.overlay2, true);
     YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, YAHOO.example.container.overlay2, true);
     YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
     YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);
   }
   YAHOO.util.Event.addListener(window, "load", init);

</script>

 overlay1:
 <button id="show1">Show</button>
 <button id="hide1">Hide</button>
 overlay2:
 <button id="show2">Show</button>
 <button id="hide2">Hide</button>
 overlay3:
 <button id="show3">Show</button>
 <button id="hide3">Hide</button>
Align to me

</body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Using the Overlay Manager to Manage Multiple Panels

   <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=utf-8">

<title>Using the Overlay Manager to Manage Multiple Panels</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>

</head> <body class=" yui-skin-sam">

Using the Overlay Manager to Manage Multiple Panels

OverlayManager allows you to manage multiple Overlays (and Overlay subclasses like Panel, Dialog, SimpleDialog and Tooltip) on the same page, giving focus and z-index supremacy to the focused overlay and providing you with event hooks to respond to focus and blur of your overlays with your own scripts.

Use the buttons below to show and hide the overlays in this example"s OverlayManager group. Click within differnt overlays and drag them around to get a sense for how OverlayManager provides a light, operating-system-like feel to the interaction.

<style type="text/css"> .yui-skin-sam .yui-panel .hd {

   background: #F2F2F2;

} .yui-skin-sam .yui-panel-container.focused .yui-panel .hd {

   background: url(yui_2.7.0b-lib/assets/skins/sam/sprite.png) repeat-x 0 -200px;

} </style> <script> YAHOO.namespace("example.container"); function init() {

 // Build panel1 based on markup
 YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { xy:[250,100],
                                   visible:false,
                                   width:"300px"
                                   } );
 YAHOO.example.container.panel1.render();
 // Build panel2 based on markup
 YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { xy:[350,150],
                                   visible:false,
                                   width:"300px"
                                   } );
 YAHOO.example.container.panel2.render();
 // Build panel3 based on markup
 YAHOO.example.container.panel3 = new YAHOO.widget.Panel("panel3", { xy:[450,200],
                                   visible:false,
                                   width:"300px"
                                   } );
 YAHOO.example.container.panel3.render();
 YAHOO.example.container.manager = new YAHOO.widget.OverlayManager();
 YAHOO.example.container.manager.register([YAHOO.example.container.panel1,
                       YAHOO.example.container.panel2,
                       YAHOO.example.container.panel3]);
 YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
 YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
 YAHOO.util.Event.addListener("focus1", "click", YAHOO.example.container.panel1.focus, YAHOO.example.container.panel1, true);
 YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
 YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
 YAHOO.util.Event.addListener("focus2", "click", YAHOO.example.container.panel2.focus, YAHOO.example.container.panel2, true);
 YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.panel3.show, YAHOO.example.container.panel3, true);
 YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.panel3.hide, YAHOO.example.container.panel3, true);
 YAHOO.util.Event.addListener("focus3", "click", YAHOO.example.container.panel3.focus, YAHOO.example.container.panel3, true);
 YAHOO.util.Event.addListener("showAll", "click", YAHOO.example.container.manager.showAll, YAHOO.example.container.manager, true);
 YAHOO.util.Event.addListener("hideAll", "click", YAHOO.example.container.manager.hideAll, YAHOO.example.container.manager, true);
 YAHOO.util.Event.addListener("blurAll", "click", YAHOO.example.container.manager.blurAll, YAHOO.example.container.manager, true);

} YAHOO.util.Event.onDOMReady(init); </script>

panel1: <button id="show1">Show</button> <button id="hide1">Hide</button> <button id="focus1">Focus</button>

panel2: <button id="show2">Show</button> <button id="hide2">Hide</button> <button id="focus2">Focus</button>

panel3: <button id="show3">Show</button> <button id="hide3">Hide</button> <button id="focus3">Focus</button>

All Panels: <button id="showAll">Show All</button> <button id="hideAll">Hide All</button> <button id="blurAll">Blur All</button>

</body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>