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