JavaScript DHTML/YUI Library/Panel
Содержание
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>
<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>
<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;
}
- 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.
<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>
<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>