JavaScript DHTML/YUI Library/Panel

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

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

<title>Simple Panel Example</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">

Simple Panel Example

Use the show/hide buttons below to show and hide two simple panels. The first panel is created based on markup on the page and its draggable configuration is set to true; it can be dragged around the screen.

<style> 

 #container {height:15em;}

</style> <script> 

   YAHOO.namespace("example.container");
   function init() {
     // Instantiate a Panel from markup
     YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"320px", visible:false, constraintoviewport:true } );
     YAHOO.example.container.panel1.render();
     // Instantiate a Panel from script
     YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"320px", visible:false, draggable:false, close:false } );
     YAHOO.example.container.panel2.setHeader("Panel #2 from Script — This Panel Isn"t Draggable");
     YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
     YAHOO.example.container.panel2.setFooter("End of Panel #2");
     YAHOO.example.container.panel2.render("container");
     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("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(window, "load", init);

</script> 

   <button id="show1">Show panel1</button> 
   <button id="hide1">Hide panel1</button>
Panel #1 from Markup — This Panel is Draggable
This is a Panel that was marked up in the document.
End of Panel #1
   <button id="show2">Show panel2</button> 
   <button id="hide2">Hide panel2</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>


Creating a Modal "Loading" 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=utf-8">

<title>Creating a Modal "Loading" Panel</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/connection/connection-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.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">

Creating a Modal "Loading" Panel

A common use case for the Panel Control involves using it to display "please wait" text and images to indicate that the application is busy doing something. As this page loads, a modal "please wait"-style Panel Control instance appears and the remainder of the page dims. When the content for the container is loaded (consisting of lorem ipsum text), the panel and its modaliy mask fade away and the page returns to a normal interactive state.

<script type="text/javascript"> 

   YAHOO.namespace("example.container");
   function init() {
       var content = document.getElementById("content");
       
       content.innerHTML = "";
       if (!YAHOO.example.container.wait) {
           // Initialize the temporary Panel to display while waiting for external content to load
           YAHOO.example.container.wait = 
                   new YAHOO.widget.Panel("wait",  
                                                   { width: "240px", 
                                                     fixedcenter: true, 
                                                     close: false, 
                                                     draggable: false, 
                                                     zindex:4,
                                                     modal: true,
                                                     visible: false
                                                   } 
                                               );
   
           YAHOO.example.container.wait.setHeader("Loading, please wait...");
           YAHOO.example.container.wait.setBody("<img src=\"http://us.i1.yimg.ru/us.yimg.ru/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
           YAHOO.example.container.wait.render(document.body);
       }
       // Define the callback object for Connection Manager that will set the body of our content area when the content has loaded

       var callback = {
           success : function(o) {
               content.innerHTML = o.responseText;
               content.style.visibility = "visible";
               YAHOO.example.container.wait.hide();
           },
           failure : function(o) {
               content.innerHTML = o.responseText;
               content.style.visibility = "visible";
               content.innerHTML = "CONNECTION FAILED!";
               YAHOO.example.container.wait.hide();
           }
       }
   
       // Show the Panel
       YAHOO.example.container.wait.show();
       
       // Connect to our data source and load the data
       var conn = YAHOO.util.Connect.asyncRequest("GET", "yui_2.7.0b-assets/container-assets/somedata.php?r=" + new Date().getTime(), callback);
   }
   
   YAHOO.util.Event.on("panelbutton", "click", init);

</script> <button id="panelbutton">Show Panel</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>


Draggable and not draggable titled 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=utf-8">

<title>Simple Panel Example</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">

Simple Panel Example

Use the show/hide buttons below to show and hide two simple panels. The first panel is created based on markup on the page and its draggable configuration is set to true; it can be dragged around the screen.

<style> 

 #container {height:15em;}

</style> <script> 

   YAHOO.namespace("example.container");
   function init() {
     // Instantiate a Panel from markup
     YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"320px", visible:false, constraintoviewport:true } );
     YAHOO.example.container.panel1.render();
     // Instantiate a Panel from script
     YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"320px", visible:false, draggable:false, close:false } );
     YAHOO.example.container.panel2.setHeader("Panel #2 from Script — This Panel Isn"t Draggable");
     YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
     YAHOO.example.container.panel2.setFooter("End of Panel #2");
     YAHOO.example.container.panel2.render("container");
     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("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(window, "load", init);

</script> 

   <button id="show1">Show panel1</button> 
   <button id="hide1">Hide panel1</button>
Panel #1 from Markup — This Panel is Draggable
This is a Panel that was marked up in the document.
End of Panel #1
   <button id="show2">Show panel2</button> 
   <button id="hide2">Hide panel2</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>


Layout inside a resizable 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>Layout inside a resizable Panel</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;

}

  1. demo .yui-resize-handle-br {
   height: 11px;
   width: 11px;
   background-position: -20px -60px;
   background-color: transparent;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.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> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script> </head> <body class=" yui-skin-sam">

<script> (function() { 

   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       layout = null,
       resize = null;
   Event.onDOMReady(function() {
       var panel = new YAHOO.widget.Panel("demo", {
           draggable: true,
           close: false,
           autofillheight: "body", // default value, specified here to highlight its use in the example            
           underlay: "none",
           width: "500px",
           height: "300px",
           xy: [100, 100]
       });
       panel.setHeader("Test Panel");
panel.setBody("
"); 
       panel.renderEvent.subscribe(function() {
           Event.onAvailable("layout", function() {
               layout = new YAHOO.widget.Layout("layout", {
                   height: (panel.body.offsetHeight - 20),
                   width: 480,
                   units: [
                       { position: "top", height: 25, resize: false, body: "Top", gutter: "2" },
                       { position: "left", width: 150, resize: true, body: "Left", gutter: "0 5 0 2", minWidth: 150, maxWidth: 300 },
                       { position: "bottom", height: 25, body: "Bottom", gutter: "2" },
                       { position: "center", body: "Center Unit", gutter: "0 2 0 0" }
                   ]
               });
               layout.render();
           });
       });
       panel.render();
       resize = new YAHOO.util.Resize("demo", {
           handles: ["br"],
           autoRatio: true,
           status: false,
           minWidth: 380,
           minHeight: 300
       });
       resize.on("resize", function(args) {
           var panelHeight = args.height,
           padding = 20;
           //Hack to trick IE into behaving
           Dom.setStyle("layout", "display", "none");
           this.cfg.setProperty("height", panelHeight + "px");
           layout.set("height", this.body.offsetHeight - padding);
           layout.set("width", this.body.offsetWidth - padding);
           //Hack to trick IE into behaving
           Dom.setStyle("layout", "display", "block");
           layout.resize();
           
       }, panel, true);
   });

})(); </script> </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>


Skinning a Panel with Custom CSS: Introduction

   <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>Skinning a Panel with Custom CSS: Introduction</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/container-core.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>
 <style tyle="text/css">
 #example {height:20em;}
 /* Aqua Panel Skin CSS */
 /* Provide skin for default Panel elements, ontop of container-core.css */
 #myPanel_c.yui-panel-container.shadow .underlay { 
   position:absolute;
       left:3px;
   right:-3px;
   top:3px;
   bottom:-3px;
   background-color:#000;
   opacity:0.12;
   filter:alpha(opacity=12);
 }
 #myPanel.yui-panel {
   border:none;
   overflow:visible;
   background-color:transparent;
 }
 #myPanel.yui-panel .container-close {
   position:absolute;
   top:3px;
   left:4px;
   height:18px;
   width:17px;
   background:url(yui_2.7.0b-assets/container-assets/img/aqua-hd-close.gif) no-repeat; 
 }
 /* span:hover not supported on IE6 */
 #myPanel.yui-panel .container-close:hover {
   background:url(yui_2.7.0b-assets/container-assets/img/aqua-hd-close-over.gif) no-repeat; 
 }
 #myPanel.yui-panel .hd { 
   padding:0;
   border:none;
   background:url(yui_2.7.0b-assets/container-assets/img/aqua-hd-bg.gif) repeat-x;
   color:#000;
   height:22px;
   margin-left:6px;
   margin-right:6px;
   text-align:center;
   overflow:visible;
 }
 #myPanel.yui-panel .bd {
   overflow:hidden;
   padding:4px;
   border:1px solid #aeaeae;
   background-color:#FFF;
 }
 #myPanel.yui-panel .ft {
   font-size:75%;
   color:#666;
   padding:2px;
   overflow:hidden;
   border:1px solid #aeaeae;
   border-top:none;
   background-color:#dfdfdf;
 }
 /* Provide skin for custom elements */
 #myPanel.yui-panel .hd span {
   vertical-align:middle;
   line-height:22px;
   font-weight:bold;
 }
 #myPanel.yui-panel .hd .tl {
   width:7px;
   height:22px;
   top:0;
   left:0px;
   background:url(yui_2.7.0b-assets/container-assets/img/aqua-hd-lt.gif) no-repeat;
   position:absolute;
 }
 #myPanel.yui-panel .hd .tr {
   width:7px;
   height:22px;
   top:0;
   right:0px;
   background:url(yui_2.7.0b-assets/container-assets/img/aqua-hd-rt.gif) no-repeat;
   position:absolute;
 }
 </style>
 <script type="text/javascript">
 YAHOO.namespace("example.container");
 YAHOO.util.Event.onDOMReady(function () {
   YAHOO.example.container.myPanel = new YAHOO.widget.Panel("myPanel", { 
     width:"300px", 
     visible:false, 
     constraintoviewport:true, 
     draggable:true 
   });
   YAHOO.example.container.myPanel.render();
 });
 </script>

</head> <body>

Skinning a Panel with Custom CSS: Introduction

In this example, custom CSS and images are applied to the appearance of a Panel instance to stylize it similar to a Mac OS X document window. Use the buttons below to show and hide the Panel.

Panel from Markup
This is a Panel that was marked up in the document.
End of Panel
   <button onclick="YAHOO.example.container.myPanel.show()">Show panel</button>
   <button onclick="YAHOO.example.container.myPanel.hide()">Hide panel</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>


Use the show/hide buttons below to show and hide two simple 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>Simple Panel Example</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">

Simple Panel Example

Use the show/hide buttons below to show and hide two simple panels. The first panel is created based on markup on the page and its draggable configuration is set to true; it can be dragged around the screen.

<style> 

 #container {height:15em;}

</style> <script> 

   YAHOO.namespace("example.container");
   function init() {
     // Instantiate a Panel from markup
     YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"320px", visible:false, constraintoviewport:true } );
     YAHOO.example.container.panel1.render();
     // Instantiate a Panel from script
     YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"320px", visible:false, draggable:false, close:false } );
     YAHOO.example.container.panel2.setHeader("Panel #2 from Script — This Panel Isn"t Draggable");
     YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
     YAHOO.example.container.panel2.setFooter("End of Panel #2");
     YAHOO.example.container.panel2.render("container");
     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("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(window, "load", init);

</script> 

   <button id="show1">Show panel1</button> 
   <button id="hide1">Hide panel1</button>
Panel #1 from Markup — This Panel is Draggable
This is a Panel that was marked up in the document.
End of Panel #1
   <button id="show2">Show panel2</button> 
   <button id="hide2">Hide panel2</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>

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