removing old version of yui
This commit is contained in:
JT Smith
parent
d1d368dcd1
commit
4fd23d094f
766 changed files with 0 additions and 262230 deletions
|
|
@ -1,14 +0,0 @@
|
|||
.panel {
|
||||
overflow:visible;
|
||||
}
|
||||
|
||||
.panel .bd {
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.panel .ft {
|
||||
padding:0px;
|
||||
height:4px;
|
||||
font-size:4px;
|
||||
background-color:#CCC;
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
body {
|
||||
background-image:url(../img/bg.png);
|
||||
background-repeat:repeat-x;
|
||||
background-color:#FFFFFF;
|
||||
}
|
||||
|
||||
.homeLink {
|
||||
background-color:#CCC;position:absolute;right:0;top:0;text-align:center;padding:5px;margin-bottom:5px;border:1px solid #CCC;width:75px;
|
||||
}
|
||||
|
||||
label {
|
||||
float:left;
|
||||
width:150px;
|
||||
}
|
||||
.buttonset {
|
||||
clear:both;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.box code, .box xmp {
|
||||
display:block;
|
||||
padding:5px;
|
||||
font-size:11px;
|
||||
background-color:#EEE;
|
||||
border:1px solid #555;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
.bd form {
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
.box {
|
||||
border:1px solid #CCC;
|
||||
background-color:#FFF;
|
||||
padding:5px;
|
||||
width:700px;
|
||||
}
|
||||
|
||||
.box p {
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
.box h1 {
|
||||
font-family:georgia,times new roman,times,serif;
|
||||
color:purple;
|
||||
font-size:24px;
|
||||
margin-top:0px;
|
||||
margin-bottom:10px;
|
||||
padding-bottom:5px;
|
||||
border-bottom:1px dotted black;
|
||||
}
|
||||
|
||||
.box h2 {
|
||||
font-family:georgia,times new roman,times,serif;
|
||||
color:purple;
|
||||
font-size:14px;
|
||||
margin-top:0px;
|
||||
margin-bottom:10px;
|
||||
padding-bottom:5px;
|
||||
border-bottom:1px dotted black;
|
||||
}
|
||||
|
||||
.box h3 {
|
||||
font-family:georgia,times new roman,times,serif;
|
||||
color:black;
|
||||
font-size:11px;
|
||||
margin-top:0px;
|
||||
margin-bottom:5px;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
font:100 76% verdana;
|
||||
text-decoration:none;
|
||||
background-color: #E4E4E4;
|
||||
color: #333;
|
||||
cursor: hand;
|
||||
vertical-align: middle;
|
||||
border: 2px solid #797979;
|
||||
border-top-color:#FFF;
|
||||
border-left-color:#FFF;
|
||||
margin:2px;
|
||||
padding:2px;
|
||||
}
|
||||
|
||||
button.default {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
button:hover, button.hover {
|
||||
border:2px solid #90A029;
|
||||
background-color:#EBF09E;
|
||||
border-top-color:#FFF;
|
||||
border-left-color:#FFF;
|
||||
}
|
||||
|
||||
button:active {
|
||||
border:2px solid #E4E4E4;
|
||||
background-color:#BBB;
|
||||
border-top-color:#333;
|
||||
border-left-color:#333;
|
||||
}
|
||||
|
||||
div.overlayform {
|
||||
width:700px;
|
||||
border:1px solid black;
|
||||
background-color:#FFF;
|
||||
}
|
||||
|
||||
div.overlayform .formheader {
|
||||
padding:5px;
|
||||
font-weight:bold;
|
||||
background-color:#D92121;
|
||||
color:#FFF;
|
||||
|
||||
}
|
||||
|
||||
div.overlayform textarea {
|
||||
width:450px;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
div.overlayform button {
|
||||
float:right;
|
||||
margin-right:10px
|
||||
}
|
||||
|
||||
div.row {
|
||||
clear:both;
|
||||
vertical-align:middle;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
|
||||
div.row.header {
|
||||
font-weight:bold;
|
||||
background-color:#666;
|
||||
color:#FFF;
|
||||
vertical-align:middle;
|
||||
height:1em;
|
||||
}
|
||||
|
||||
div.row.first {
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
div.row.last {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
div.row div.label {
|
||||
float: left;
|
||||
width: 125px;
|
||||
margin-right:10px;
|
||||
text-align: right;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
div.row div.formw {
|
||||
float: left;
|
||||
text-align: left;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#resp {
|
||||
font-family:courier;
|
||||
font-size:12px;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.box label {
|
||||
float:none;
|
||||
}
|
||||
|
||||
.radioline {
|
||||
width:100%;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.radioline.first {
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
.radioline.last {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.module {
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
border:1px solid red;
|
||||
background-color:#FFFFFF;
|
||||
}
|
||||
div.overlayform {
|
||||
width:700px;
|
||||
border:1px solid black;
|
||||
background-color:#FFF;
|
||||
}
|
||||
|
||||
div.overlayform .formheader {
|
||||
padding:5px;
|
||||
font-weight:bold;
|
||||
background-color:#D92121;
|
||||
color:#FFF;
|
||||
|
||||
}
|
||||
|
||||
div.overlayform textarea {
|
||||
width:450px;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
div.overlayform button {
|
||||
float:right;
|
||||
margin-right:10px
|
||||
}
|
||||
|
||||
div.row {
|
||||
clear:both;
|
||||
vertical-align:middle;
|
||||
padding-bottom:5px;
|
||||
}
|
||||
|
||||
div.row.header {
|
||||
font-weight:bold;
|
||||
background-color:#666;
|
||||
color:#FFF;
|
||||
vertical-align:middle;
|
||||
height:1em;
|
||||
}
|
||||
|
||||
div.row.first {
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
div.row.last {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
div.row div.label {
|
||||
float: left;
|
||||
width: 125px;
|
||||
margin-right:10px;
|
||||
text-align: right;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
div.row div.formw {
|
||||
float: left;
|
||||
text-align: left;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
#win {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.panel-container.shadow .underlay {
|
||||
background-color:#999;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border:none;
|
||||
overflow:visible;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.panel .hd {
|
||||
padding:0;
|
||||
border:none;
|
||||
background:transparent url(../img/aqua-hd-bg.gif);
|
||||
color:#000;
|
||||
height:22px;
|
||||
margin-left:7px;
|
||||
margin-right:7px;
|
||||
text-align:center;
|
||||
overflow:visible;
|
||||
}
|
||||
|
||||
.panel .hd span {
|
||||
vertical-align:middle;
|
||||
line-height:22px;
|
||||
}
|
||||
|
||||
.panel .close {
|
||||
top:3px;
|
||||
left:4px;
|
||||
height:18px;
|
||||
width:17px;
|
||||
}
|
||||
|
||||
.panel .close.nonsecure {
|
||||
background-image:url(../img/aqua-hd-close.gif);
|
||||
}
|
||||
|
||||
.panel .close.secure {
|
||||
background-image:url(../img/aqua-hd-close.gif);
|
||||
}
|
||||
|
||||
.panel .close.nonsecure:hover {
|
||||
background-image:url(../img/aqua-hd-close-over.gif);
|
||||
}
|
||||
|
||||
.panel .close.secure:hover {
|
||||
background-image:url(../img/aqua-hd-close-over.gif);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.panel .lt {
|
||||
width:7px;height:22px;
|
||||
top:0;left:0;
|
||||
background:transparent url(../img/aqua-hd-lt.gif);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.panel .rt {
|
||||
width:7px;height:22px;
|
||||
top:0;right:0;
|
||||
background:transparent url(../img/aqua-hd-rt.gif);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.panel .bd {
|
||||
overflow:hidden;
|
||||
padding:4px;
|
||||
border:1px solid #aeaeae;
|
||||
background-color:#FFF;
|
||||
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
#win {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.panel-container.shadow .underlay {
|
||||
background-color:#999;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border:none;
|
||||
overflow:visible;
|
||||
background:transparent url(../img/xp-brdr-rt.gif) no-repeat top right;
|
||||
}
|
||||
|
||||
.panel .hd {
|
||||
padding:0;
|
||||
border:none;
|
||||
background:transparent url(../img/xp-hd.gif);
|
||||
color:#FFF;
|
||||
height:30px;
|
||||
margin-left:8px;
|
||||
margin-right:8px;
|
||||
text-align:left;
|
||||
vertical-align:middle;
|
||||
overflow:visible;
|
||||
}
|
||||
|
||||
.panel .hd span {
|
||||
line-height:30px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.panel .close {
|
||||
top:5px;
|
||||
right:8px;
|
||||
height:21px;
|
||||
width:21px;
|
||||
}
|
||||
|
||||
.panel .close.nonsecure {
|
||||
background-image:url(../img/xp-close.gif);
|
||||
}
|
||||
|
||||
.panel .close.secure {
|
||||
background-image:url(../img/xp-close.gif);
|
||||
}
|
||||
|
||||
.panel .tl {
|
||||
width:8px;height:29px;
|
||||
top:1px;left:0;
|
||||
background:transparent url(../img/xp-tl.gif);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.panel .tr {
|
||||
width:8px;height:29px;
|
||||
top:1px;right:0;
|
||||
background:transparent url(../img/xp-tr.gif);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.panel .bl {
|
||||
width:8px;height:26px;
|
||||
bottom:0;left:0;
|
||||
background:transparent url(../img/xp-bl.gif);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.panel .ft {
|
||||
background:transparent url(../img/xp-ft.gif);
|
||||
font-size:11px;
|
||||
height:26px;
|
||||
padding:0px 10px;
|
||||
}
|
||||
|
||||
.panel .ft span {
|
||||
line-height:22px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.panel .br {
|
||||
width:8px;height:26px;
|
||||
bottom:0;right:0;
|
||||
background:transparent url(../img/xp-br.gif);
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.panel .bd {
|
||||
overflow:hidden;
|
||||
padding:10px;
|
||||
border:none;
|
||||
background:#FFF url(../img/xp-brdr-lt.gif) repeat-y;
|
||||
margin:0 4px 0 0;
|
||||
}
|
||||
|
||||
.panel .bd .brdr-rt {
|
||||
width:4px;
|
||||
right:0;
|
||||
top:29px;
|
||||
bottom:26px;
|
||||
height:auto;
|
||||
background:#FFF url(../img/xp-brdr-rt.gif) repeat-y;
|
||||
position:absolute;
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
#win {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
.photobox {
|
||||
border:3px solid #666;
|
||||
overflow:visible;
|
||||
background-color:#333;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
.photobox .hd {
|
||||
font-family:georgia, times new roman, times, serif;
|
||||
font-weight:normal;
|
||||
border:none;
|
||||
border-bottom:1px solid #666;
|
||||
background:transparent;
|
||||
color:#FFF;
|
||||
height:18px;
|
||||
text-align:left;
|
||||
overflow:visible;
|
||||
padding:0;
|
||||
padding-bottom:5px;
|
||||
margin-bottom:5px;
|
||||
width:500px;
|
||||
}
|
||||
|
||||
.photobox .hd span {
|
||||
vertical-align:middle;
|
||||
line-height:15px;
|
||||
}
|
||||
|
||||
.photobox .close {
|
||||
top:8px;
|
||||
right:8px;
|
||||
height:15px;
|
||||
width:18px;
|
||||
}
|
||||
|
||||
.photobox .close.nonsecure {
|
||||
background-image:url(../img/ybox-close.gif);
|
||||
}
|
||||
|
||||
.photobox .close.secure {
|
||||
background-image:url(../img/ybox-close.gif);
|
||||
}
|
||||
|
||||
.photobox .bd {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.photobox .bd img {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.mask {
|
||||
background-color:#000;
|
||||
-moz-opacity: 0.75;
|
||||
opacity:.75;
|
||||
filter:alpha(opacity=75);
|
||||
}
|
||||
|
||||
.photobox .ft {
|
||||
height:16px;
|
||||
width:500px;
|
||||
padding:5px 0;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.photobox .ft .back {
|
||||
position:absolute;
|
||||
left:1px;
|
||||
}
|
||||
|
||||
.photobox .ft .back img, .photobox .ft .next img {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.photobox .ft .next {
|
||||
position:absolute;
|
||||
right:1px;
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<!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="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>
|
||||
|
||||
<div class="box">
|
||||
<div class="hd">
|
||||
<h1>Dialog Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>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.</p>
|
||||
|
||||
<p>The URLs for both asynchronous and form-based submission are taken from the form's action property.</p>
|
||||
|
||||
<p><button onclick="YAHOO.example.container.dlg.show()">Enter your information</button>
|
||||
<div class="radioline first"><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></div>
|
||||
<div class="radioline"><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></div>
|
||||
<div class="radioline last"><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></div>
|
||||
<select>
|
||||
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="ft"></div>
|
||||
</div>
|
||||
|
||||
<div class="box" style="margin-top:25px">
|
||||
<div class="hd">
|
||||
<h2>Server Response</h1>
|
||||
</div>
|
||||
|
||||
<div class="bd">
|
||||
<h3>Post Response Text</h2>
|
||||
<p id="resp">[ Server Response will be displayed here ]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dlg">
|
||||
<div class="hd">Please enter your information</div>
|
||||
<div class="bd">
|
||||
<form name="dlgForm" method="POST" action="php/post.php">
|
||||
<p>Please enter your personal contact information:</p>
|
||||
<label for="firstname">First Name:</label><input type="textbox" name="firstname" /><br/>
|
||||
<label for="lastname">Last Name:</label><input type="textbox" name="lastname" /><br/>
|
||||
<label for="email">E-mail:</label><input type="textbox" name="email" /><br/>
|
||||
<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><br/>
|
||||
|
||||
<label for="radiobuttons">Radio buttons:</label>
|
||||
<input type="radio" name="radiobuttons[]" value="1" checked/> 1
|
||||
<input type="radio" name="radiobuttons[]" value="2" /> 2<br/>
|
||||
|
||||
<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1<br/>
|
||||
|
||||
<label for="textarea">Text area:</label><textarea name="textarea"></textarea><br/>
|
||||
|
||||
<label for="cbarray">Multi checkbox:</label>
|
||||
<input type="checkbox" name="cbarray[]" value="1" /> 1
|
||||
<input type="checkbox" name="cbarray[]" value="2" /> 2
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 101 B |
Binary file not shown.
|
Before Width: | Height: | Size: 268 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 338 B |
Binary file not shown.
|
Before Width: | Height: | Size: 340 B |
Binary file not shown.
|
Before Width: | Height: | Size: 360 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 330 B |
Binary file not shown.
|
Before Width: | Height: | Size: 54 B |
Binary file not shown.
|
Before Width: | Height: | Size: 322 B |
Binary file not shown.
|
Before Width: | Height: | Size: 54 B |
Binary file not shown.
|
Before Width: | Height: | Size: 302 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 B |
Binary file not shown.
|
Before Width: | Height: | Size: 193 B |
Binary file not shown.
|
Before Width: | Height: | Size: 598 B |
Binary file not shown.
|
Before Width: | Height: | Size: 598 B |
Binary file not shown.
|
Before Width: | Height: | Size: 145 B |
Binary file not shown.
|
Before Width: | Height: | Size: 177 B |
Binary file not shown.
|
Before Width: | Height: | Size: 145 B |
|
|
@ -1,62 +0,0 @@
|
|||
<!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 Container Package</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css" />
|
||||
|
||||
<style>
|
||||
li {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
li.b {
|
||||
margin-left:10px;
|
||||
}
|
||||
li.c {
|
||||
margin-left:20px;
|
||||
}
|
||||
li.d {
|
||||
margin-left:30px;
|
||||
}
|
||||
li.e {
|
||||
margin-left:40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box">
|
||||
<div class="hd">
|
||||
<h1>Container Functional Examples</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="a"><a href="module.html">YAHOO.widget.Module</a></li>
|
||||
<li class="b"><a href="overlay.html">YAHOO.widget.Overlay</a></li>
|
||||
<li class="c"><a href="tooltip.html">YAHOO.widget.Tooltip</a></li>
|
||||
|
||||
<li class="c"><a href="panel.html">YAHOO.widget.Panel</a></li>
|
||||
<li class="d"><a href="panel-resize.html">Panel example: Resizable Panel</a></li>
|
||||
<li class="d"><a href="panel-wait.html">Panel example: Wait Panel</a></li>
|
||||
<li class="d"><a href="panel-xp.html">Panel example: XP Panel</a></li>
|
||||
<li class="d"><a href="panel-aqua.html">Panel example: Aqua Panel</a></li>
|
||||
<li class="d"><a href="panel-photo.html">Panel example: PhotoBox</a></li>
|
||||
|
||||
<li class="d"><a href="dialog.html">YAHOO.widget.Dialog</a></li>
|
||||
<li class="e"><a href="simpledialog.html">YAHOO.widget.SimpleDialog</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="a"><a href="keylistener.html">YAHOO.util.KeyListener</a></li>
|
||||
<li class="a"><a href="overlay-manager.html">YAHOO.widget.OverlayManager</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ft"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
202
www/extras/yui/examples/container/js/PanelEffect.js
vendored
202
www/extras/yui/examples/container/js/PanelEffect.js
vendored
|
|
@ -1,202 +0,0 @@
|
|||
/**
|
||||
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
* @class
|
||||
* A collection of ContainerEffect classes specifically used for animating Panels.
|
||||
*/
|
||||
YAHOO.widget.PanelEffect = function() { }
|
||||
|
||||
/**
|
||||
* A pre-configured ContainerEffect instance that can be used for expanding the Panel body vertically
|
||||
* @param {Panel} The Panel object to animate
|
||||
* @param {float} The duration of the animation
|
||||
* @type ContainerEffect
|
||||
*/
|
||||
YAHOO.widget.PanelEffect.BODY_EXPAND_V = function(overlay, dur) {
|
||||
var offsetHeight = overlay.body.offsetHeight;
|
||||
|
||||
var padTop = YAHOO.util.Dom.getStyle(overlay.body, "paddingTop");
|
||||
var padBottom = YAHOO.util.Dom.getStyle(overlay.body, "paddingBottom");
|
||||
|
||||
|
||||
var expand = new YAHOO.widget.ContainerEffect(overlay, { attributes:{height: {from:0, to:(offsetHeight-parseInt(padTop)-parseInt(padBottom))}}, duration:dur, method:YAHOO.util.Easing.easeIn }, { attributes:{height: {to:0}}, duration:dur, method:YAHOO.util.Easing.easeOut}, overlay.body );
|
||||
|
||||
expand.handleTweenAnimateIn = function(type, args, obj) {
|
||||
obj.overlay.cfg.refireEvent("underlay");
|
||||
obj.overlay.cfg.refireEvent("iframe");
|
||||
if (YAHOO.util.Dom.getStyle(obj.overlay.element, "visibility") == "hidden") {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "visible");
|
||||
}
|
||||
}
|
||||
|
||||
expand.handleCompleteAnimateOut = function(type, args, obj) {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "hidden");
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.body, "height", "auto");
|
||||
};
|
||||
|
||||
expand.handleTweenAnimateOut = function(type, args, obj) {
|
||||
obj.overlay.cfg.refireEvent("underlay");
|
||||
obj.overlay.cfg.refireEvent("iframe");
|
||||
}
|
||||
|
||||
expand.init();
|
||||
return expand;
|
||||
};
|
||||
|
||||
/**
|
||||
* A pre-configured ContainerEffect instance that can be used for expanding the Panel horizontally
|
||||
* @param {Panel} The Panel object to animate
|
||||
* @param {float} The duration of the animation
|
||||
* @type ContainerEffect
|
||||
*/
|
||||
YAHOO.widget.PanelEffect.EXPAND_H = function(overlay, dur) {
|
||||
var initialWidth = YAHOO.util.Dom.getStyle(overlay.innerElement, "width");
|
||||
|
||||
var offsetWidth = overlay.innerElement.offsetWidth;
|
||||
var offsetHeight = overlay.innerElement.offsetHeight;
|
||||
|
||||
var expand = new YAHOO.widget.ContainerEffect(overlay, { attributes:{width: {from:0, to:parseInt(initialWidth), unit:"em" }}, duration:dur, method:YAHOO.util.Easing.easeIn }, { attributes:{width: {to:0, unit:"em"}}, duration:dur, method:YAHOO.util.Easing.easeOut}, overlay.innerElement );
|
||||
|
||||
expand.handleStartAnimateIn = function(type,args,obj) {
|
||||
var w = obj.cachedOffsetWidth || obj.overlay.innerElement.offsetWidth;
|
||||
|
||||
if (obj.overlay.header) {
|
||||
var padLeft = YAHOO.util.Dom.getStyle(obj.overlay.header, "paddingLeft");
|
||||
var padRight = YAHOO.util.Dom.getStyle(obj.overlay.header, "paddingRight");
|
||||
obj.overlay.header.style.width = (w-parseInt(padLeft)-parseInt(padRight)) + "px";
|
||||
}
|
||||
if (obj.overlay.body) {
|
||||
var padLeft = YAHOO.util.Dom.getStyle(obj.overlay.body, "paddingLeft");
|
||||
var padRight = YAHOO.util.Dom.getStyle(obj.overlay.body, "paddingRight");
|
||||
obj.overlay.body.style.width = (w-parseInt(padLeft)-parseInt(padRight)) + "px";
|
||||
}
|
||||
if (obj.overlay.footer) {
|
||||
var padLeft = YAHOO.util.Dom.getStyle(obj.overlay.footer, "paddingLeft");
|
||||
var padRight = YAHOO.util.Dom.getStyle(obj.overlay.footer, "paddingRight");
|
||||
obj.overlay.footer.style.width = (w-parseInt(padLeft)-parseInt(padRight)) + "px";
|
||||
}
|
||||
}
|
||||
|
||||
expand.handleTweenAnimateIn = function(type, args, obj) {
|
||||
obj.overlay.cfg.refireEvent("underlay");
|
||||
obj.overlay.cfg.refireEvent("iframe");
|
||||
if (YAHOO.util.Dom.getStyle(obj.overlay.element, "visibility") == "hidden") {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "visible");
|
||||
}
|
||||
}
|
||||
|
||||
expand.handleCompleteAnimateIn = function(type,args,obj) {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.innerElement, "height", "auto");
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.innerElement, "width", initialWidth);
|
||||
|
||||
if (obj.overlay.header) {
|
||||
obj.overlay.header.style.width = "auto";
|
||||
}
|
||||
if (obj.overlay.body) {
|
||||
obj.overlay.body.style.width = "auto";
|
||||
}
|
||||
if (obj.overlay.footer) {
|
||||
obj.overlay.footer.style.width = "auto";
|
||||
}
|
||||
}
|
||||
|
||||
expand.handleStartAnimateOut = function(type,args,obj) {
|
||||
var w = obj.overlay.innerElement.offsetWidth;
|
||||
obj.cachedOffsetWidth = w;
|
||||
|
||||
if (obj.overlay.header) {
|
||||
var padLeft = YAHOO.util.Dom.getStyle(obj.overlay.header, "paddingLeft");
|
||||
var padRight = YAHOO.util.Dom.getStyle(obj.overlay.header, "paddingRight");
|
||||
obj.overlay.header.style.width = (w-parseInt(padLeft)-parseInt(padRight)) + "px";
|
||||
}
|
||||
if (obj.overlay.body) {
|
||||
var padLeft = YAHOO.util.Dom.getStyle(obj.overlay.body, "paddingLeft");
|
||||
var padRight = YAHOO.util.Dom.getStyle(obj.overlay.body, "paddingRight");
|
||||
obj.overlay.body.style.width = (w-parseInt(padLeft)-parseInt(padRight)) + "px";
|
||||
}
|
||||
if (obj.overlay.footer) {
|
||||
var padLeft = YAHOO.util.Dom.getStyle(obj.overlay.footer, "paddingLeft");
|
||||
var padRight = YAHOO.util.Dom.getStyle(obj.overlay.footer, "paddingRight");
|
||||
obj.overlay.footer.style.width = (w-parseInt(padLeft)-parseInt(padRight)) + "px";
|
||||
}
|
||||
}
|
||||
|
||||
expand.handleTweenAnimateOut = function(type, args, obj) {
|
||||
obj.overlay.cfg.refireEvent("underlay");
|
||||
obj.overlay.cfg.refireEvent("iframe");
|
||||
}
|
||||
|
||||
expand.handleCompleteAnimateOut = function(type, args, obj) {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "hidden");
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.innerElement, "height", "auto");
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.innerElement, "width", initialWidth);
|
||||
|
||||
if (obj.overlay.header) {
|
||||
obj.overlay.header.style.width = "auto";
|
||||
}
|
||||
if (obj.overlay.body) {
|
||||
obj.overlay.body.style.width = "auto";
|
||||
}
|
||||
if (obj.overlay.footer) {
|
||||
obj.overlay.footer.style.width = "auto";
|
||||
}
|
||||
};
|
||||
|
||||
expand.init();
|
||||
return expand;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* A pre-configured ContainerEffect instance that can be used for expanding the Panel vertically
|
||||
* @param {Panel} The Panel object to animate
|
||||
* @param {float} The duration of the animation
|
||||
* @type ContainerEffect
|
||||
*/
|
||||
YAHOO.widget.PanelEffect.EXPAND_V = function(overlay, dur) {
|
||||
var offsetWidth = overlay.innerElement.offsetWidth;
|
||||
var offsetHeight = overlay.innerElement.offsetHeight;
|
||||
|
||||
var expand = new YAHOO.widget.ContainerEffect(overlay, { attributes:{height: {from:0, to:offsetHeight}}, duration:dur, method:YAHOO.util.Easing.easeIn }, { attributes:{height: {to:0}}, duration:dur, method:YAHOO.util.Easing.easeOut}, overlay.innerElement );
|
||||
|
||||
expand.handleTweenAnimateIn = function(type, args, obj) {
|
||||
obj.overlay.cfg.refireEvent("underlay");
|
||||
obj.overlay.cfg.refireEvent("iframe");
|
||||
if (YAHOO.util.Dom.getStyle(obj.overlay.element, "visibility") == "hidden") {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "visible");
|
||||
}
|
||||
}
|
||||
|
||||
expand.handleCompleteAnimateIn = function(type,args,obj) {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.innerElement, "height", "auto");
|
||||
}
|
||||
|
||||
expand.handleStartAnimateOut = function(type,args,obj) {
|
||||
var w = obj.overlay.innerElement.offsetWidth;
|
||||
obj.cachedOffsetWidth = w;
|
||||
}
|
||||
|
||||
expand.handleTweenAnimateOut = function(type, args, obj) {
|
||||
obj.overlay.cfg.refireEvent("underlay");
|
||||
obj.overlay.cfg.refireEvent("iframe");
|
||||
}
|
||||
|
||||
expand.handleCompleteAnimateOut = function(type, args, obj) {
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "hidden");
|
||||
YAHOO.util.Dom.setStyle(obj.overlay.innerElement, "height", "auto");
|
||||
|
||||
if (obj.overlay.header) {
|
||||
obj.overlay.header.style.width = "auto";
|
||||
}
|
||||
if (obj.overlay.body) {
|
||||
obj.overlay.body.style.width = "auto";
|
||||
}
|
||||
if (obj.overlay.footer) {
|
||||
obj.overlay.footer.style.width = "auto";
|
||||
}
|
||||
};
|
||||
|
||||
expand.init();
|
||||
return expand;
|
||||
};
|
||||
246
www/extras/yui/examples/container/js/PhotoBox.js
vendored
246
www/extras/yui/examples/container/js/PhotoBox.js
vendored
|
|
@ -1,246 +0,0 @@
|
|||
/**
|
||||
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
* @class
|
||||
* Panel is an implementation of Overlay that behaves like an OS window, with a draggable header and an optional close icon at the top right.
|
||||
* @param {string} el The element ID representing the Panel <em>OR</em>
|
||||
* @param {Element} el The element representing the Panel
|
||||
* @param {object} userConfig The configuration object literal containing the configuration that should be set for this Panel. See configuration documentation for more details.
|
||||
* @constructor
|
||||
*/
|
||||
YAHOO.widget.PhotoBox = function(el, userConfig) {
|
||||
if (arguments.length > 0) {
|
||||
YAHOO.widget.PhotoBox.superclass.constructor.call(this, el, userConfig);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype = new YAHOO.widget.Panel();
|
||||
YAHOO.widget.PhotoBox.prototype.constructor = YAHOO.widget.PhotoBox;
|
||||
|
||||
/**
|
||||
* Reference to the Panel's superclass, Overlay
|
||||
* @type class
|
||||
* @final
|
||||
*/
|
||||
YAHOO.widget.PhotoBox.superclass = YAHOO.widget.Panel.prototype;
|
||||
|
||||
/**
|
||||
* Constant representing the default CSS class used for a Panel
|
||||
* @type string
|
||||
* @final
|
||||
*/
|
||||
YAHOO.widget.PhotoBox.CSS_PHOTOBOX = "photobox";
|
||||
|
||||
YAHOO.widget.PhotoBox.NAV_FOOTER_HTML = "<a id=\"$back.id\" href=\"javascript:void(null)\" class=\"back\"><img src=\"img/ybox-back.gif\" /></a><a id=\"$next.id\" href=\"javascript:void(null)\" class=\"next\"><img src=\"img/ybox-next.gif\" /></a>";
|
||||
/*
|
||||
* The Overlay initialization method, which is executed for Overlay and all of its subclasses. This method is automatically called by the constructor, and sets up all DOM references for pre-existing markup, and creates required markup if it is not already present.
|
||||
* @param {string} el The element ID representing the Overlay <em>OR</em>
|
||||
* @param {Element} el The element representing the Overlay
|
||||
* @param {object} userConfig The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.
|
||||
*/
|
||||
YAHOO.widget.PhotoBox.prototype.init = function(el, userConfig) {
|
||||
YAHOO.widget.PhotoBox.superclass.init.call(this, el/*, userConfig*/); // Note that we don't pass the user config in here yet because we only want it executed once, at the lowest subclass level
|
||||
|
||||
this.beforeInitEvent.fire(YAHOO.widget.PhotoBox);
|
||||
|
||||
YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.PhotoBox.CSS_PHOTOBOX);
|
||||
|
||||
if (userConfig) {
|
||||
this.cfg.applyConfig(userConfig, true);
|
||||
}
|
||||
|
||||
this.setFooter(YAHOO.widget.PhotoBox.NAV_FOOTER_HTML.replace("$back.id",this.id+"_back").replace("$next.id",this.id+"_next"));
|
||||
|
||||
this.renderEvent.subscribe(function() {
|
||||
var back = document.getElementById(this.id + "_back");
|
||||
var next = document.getElementById(this.id + "_next");
|
||||
|
||||
YAHOO.util.Event.addListener(back, "click", this.back, this, true);
|
||||
YAHOO.util.Event.addListener(next, "click", this.next, this, true);
|
||||
|
||||
}, this, true);
|
||||
|
||||
this.initEvent.fire(YAHOO.widget.PhotoBox);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the custom events for Module which are fired automatically at appropriate times by the Module class.
|
||||
*/
|
||||
YAHOO.widget.PhotoBox.prototype.initEvents = function() {
|
||||
YAHOO.widget.PhotoBox.superclass.initEvents.call(this);
|
||||
|
||||
this.showMaskEvent = new YAHOO.util.CustomEvent("showMask");
|
||||
this.hideMaskEvent = new YAHOO.util.CustomEvent("hideMask");
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the class's configurable properties which can be changed using the Panel's Config object (cfg).
|
||||
*/
|
||||
YAHOO.widget.PhotoBox.prototype.initDefaultConfig = function() {
|
||||
YAHOO.widget.PhotoBox.superclass.initDefaultConfig.call(this);
|
||||
|
||||
this.cfg.addProperty("photos", { handler:this.configPhotos, suppressEvent:true });
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.images = new Array();
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
|
||||
var photos = args[0];
|
||||
|
||||
if (photos) {
|
||||
this.images = new Array();
|
||||
|
||||
if (! (photos instanceof Array)) {
|
||||
photos = [photos];
|
||||
}
|
||||
|
||||
this.currentImage = 0;
|
||||
|
||||
if (photos.length == 1) {
|
||||
this.footer.style.display = "none";
|
||||
}
|
||||
|
||||
for (var p=0;p<photos.length;p++) {
|
||||
var photo = photos[p];
|
||||
var img = new Image();
|
||||
img.src = photo.src;
|
||||
img.title = photo.caption;
|
||||
img.id = this.id + "_img";
|
||||
img.width = 500
|
||||
this.images[this.images.length] = img;
|
||||
}
|
||||
|
||||
this.setImage(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.setImage = function(index) {
|
||||
var photos = this.cfg.getProperty("photos");
|
||||
|
||||
if (photos) {
|
||||
if (! (photos instanceof Array)) {
|
||||
photos = [photos];
|
||||
}
|
||||
|
||||
var back = document.getElementById(this.id + "_back");
|
||||
var next = document.getElementById(this.id + "_next");
|
||||
var img = document.getElementById(this.id + "_img");
|
||||
var title = document.getElementById(this.id + "_title");
|
||||
|
||||
this.currentImage = index;
|
||||
|
||||
var current = this.images[index];
|
||||
|
||||
var imgNode = document.createElement("IMG");
|
||||
imgNode.setAttribute("src",current.src);
|
||||
imgNode.setAttribute("title",current.title);
|
||||
imgNode.setAttribute("width",500);
|
||||
imgNode.setAttribute("id",current.id);
|
||||
|
||||
|
||||
img.parentNode.replaceChild((this.browser == "safari"?imgNode:current), img);
|
||||
|
||||
this.body.style.height = "auto";
|
||||
|
||||
//alert(this.body.style.height);
|
||||
//img.src = current.src;
|
||||
//img.title = current.caption;
|
||||
|
||||
title.innerHTML = current.title;
|
||||
|
||||
if (this.currentImage == 0) {
|
||||
back.style.display = "none";
|
||||
} else {
|
||||
back.style.display = "block";
|
||||
}
|
||||
|
||||
if (this.currentImage == (photos.length-1)) {
|
||||
next.style.display = "none";
|
||||
} else {
|
||||
next.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.next = function() {
|
||||
if (typeof this.currentImage == 'undefined') {
|
||||
this.currentImage = 0;
|
||||
}
|
||||
|
||||
this.setImage(this.currentImage+1);
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.back = function() {
|
||||
if (typeof this.currentImage == 'undefined') {
|
||||
this.currentImage = 0;
|
||||
}
|
||||
|
||||
this.setImage(this.currentImage-1);
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.configModal = function(type, args, obj) {
|
||||
var modal = args[0];
|
||||
|
||||
if (modal) {
|
||||
this.buildMask();
|
||||
|
||||
if (typeof this.maskOpacity == 'undefined') {
|
||||
this.mask.style.visibility = "hidden";
|
||||
this.mask.style.display = "block";
|
||||
this.maskOpacity = YAHOO.util.Dom.getStyle(this.mask,"opacity");
|
||||
this.mask.style.display = "none";
|
||||
this.mask.style.visibility = "visible";
|
||||
}
|
||||
|
||||
if (! YAHOO.util.Config.alreadySubscribed( this.beforeShowEvent, this.showMask, this ) ) {
|
||||
this.beforeShowEvent.subscribe(this.showMask, this, true);
|
||||
}
|
||||
if (! YAHOO.util.Config.alreadySubscribed( this.beforeHideEvent, this.hideMask, this) ) {
|
||||
this.beforeHideEvent.subscribe(this.hideMask, this, true);
|
||||
}
|
||||
if (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, this.sizeMask, this ) ) {
|
||||
YAHOO.widget.Overlay.windowResizeEvent.subscribe(this.sizeMask, this, true);
|
||||
}
|
||||
} else {
|
||||
this.beforeShowEvent.unsubscribe(this.showMask, this);
|
||||
this.beforeHideEvent.unsubscribe(this.hideMask, this);
|
||||
YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(this.sizeMask);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.showMask = function() {
|
||||
if (this.cfg.getProperty("modal") && this.mask) {
|
||||
YAHOO.util.Dom.addClass(document.body, "masked");
|
||||
this.sizeMask();
|
||||
|
||||
var o = this.maskOpacity;
|
||||
|
||||
if (! this.maskAnimIn) {
|
||||
this.maskAnimIn = new YAHOO.util.Anim(this.mask, {opacity: {to:o}}, 0.25)
|
||||
YAHOO.util.Dom.setStyle(this.mask, "opacity", 0);
|
||||
}
|
||||
|
||||
if (! this.maskAnimOut) {
|
||||
this.maskAnimOut = new YAHOO.util.Anim(this.mask, {opacity: {to:0}}, 0.25)
|
||||
this.maskAnimOut.onComplete.subscribe(function() {
|
||||
this.mask.tabIndex = -1;
|
||||
this.mask.style.display = "none";
|
||||
this.hideMaskEvent.fire();
|
||||
YAHOO.util.Dom.removeClass(document.body, "masked");
|
||||
}, this, true);
|
||||
|
||||
}
|
||||
this.mask.style.display = "block";
|
||||
this.maskAnimIn.animate();
|
||||
this.mask.tabIndex = 0;
|
||||
this.showMaskEvent.fire();
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.widget.PhotoBox.prototype.hideMask = function() {
|
||||
if (this.cfg.getProperty("modal") && this.mask) {
|
||||
this.maskAnimOut.animate();
|
||||
}
|
||||
}
|
||||
105
www/extras/yui/examples/container/js/ResizePanel.js
vendored
105
www/extras/yui/examples/container/js/ResizePanel.js
vendored
|
|
@ -1,105 +0,0 @@
|
|||
YAHOO.widget.ResizePanel = function(el, userConfig) {
|
||||
if (arguments.length > 0) {
|
||||
YAHOO.widget.ResizePanel.superclass.constructor.call(this, el, userConfig);
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.extend(YAHOO.widget.ResizePanel, YAHOO.widget.Panel);
|
||||
|
||||
YAHOO.widget.ResizePanel.prototype.init = function(el, userConfig) {
|
||||
YAHOO.widget.ResizePanel.superclass.init.call(this, el/*, userConfig*/); // Note that we don't pass the user config in here yet because we only want it executed once, at the lowest subclass level
|
||||
|
||||
this.beforeInitEvent.fire(YAHOO.widget.ResizePanel);
|
||||
|
||||
this.resizeHandle = document.createElement("DIV");
|
||||
this.resizeHandle.id = this.id + "_r";
|
||||
|
||||
this.resizeHandle.style.position = "absolute";
|
||||
this.resizeHandle.style.width = "25px";
|
||||
this.resizeHandle.style.height = "4px";
|
||||
this.resizeHandle.style.right = "0";
|
||||
this.resizeHandle.style.bottom = "0";
|
||||
this.resizeHandle.style.padding = "0";
|
||||
this.resizeHandle.style.margin = "0";
|
||||
this.resizeHandle.style.zIndex = "1";
|
||||
|
||||
this.resizeHandle.style.backgroundColor = "#666";
|
||||
this.resizeHandle.style.cursor = "se-resize";
|
||||
this.resizeHandle.style.fontSize = "2px";
|
||||
|
||||
this.beforeRenderEvent.subscribe(function() {
|
||||
if (! this.footer) {
|
||||
this.setFooter("");
|
||||
}
|
||||
},
|
||||
this, true
|
||||
);
|
||||
this.renderEvent.subscribe(function() {
|
||||
var me = this;
|
||||
|
||||
me.innerElement.appendChild(me.resizeHandle);
|
||||
|
||||
this.ddResize = new YAHOO.util.DragDrop(this.resizeHandle.id, this.id);
|
||||
this.ddResize.setHandleElId(this.resizeHandle.id);
|
||||
|
||||
var headerHeight = me.header.offsetHeight;
|
||||
|
||||
this.ddResize.onMouseDown = function(e) {
|
||||
|
||||
this.startWidth = me.innerElement.offsetWidth;
|
||||
this.startHeight = me.innerElement.offsetHeight;
|
||||
|
||||
me.cfg.setProperty("width", this.startWidth + "px");
|
||||
me.cfg.setProperty("height", this.startHeight + "px");
|
||||
|
||||
this.startPos = [YAHOO.util.Event.getPageX(e),
|
||||
YAHOO.util.Event.getPageY(e)];
|
||||
|
||||
me.innerElement.style.overflow = "hidden";
|
||||
me.body.style.overflow = "auto";
|
||||
}
|
||||
|
||||
this.ddResize.onDrag = function(e) {
|
||||
var newPos = [YAHOO.util.Event.getPageX(e),
|
||||
YAHOO.util.Event.getPageY(e)];
|
||||
|
||||
var offsetX = newPos[0] - this.startPos[0];
|
||||
var offsetY = newPos[1] - this.startPos[1];
|
||||
|
||||
var newWidth = Math.max(this.startWidth + offsetX, 10);
|
||||
var newHeight = Math.max(this.startHeight + offsetY, 10);
|
||||
|
||||
me.cfg.setProperty("width", newWidth + "px");
|
||||
me.cfg.setProperty("height", newHeight + "px");
|
||||
|
||||
var bodyHeight = (newHeight - 5 - me.footer.offsetHeight - me.header.offsetHeight - 3);
|
||||
if (bodyHeight < 0) {
|
||||
bodyHeight = 0;
|
||||
}
|
||||
|
||||
me.body.style.height = bodyHeight + "px";
|
||||
|
||||
var innerHeight = me.innerElement.offsetHeight;
|
||||
var innerWidth = me.innerElement.offsetWidth;
|
||||
|
||||
if (innerHeight < headerHeight) {
|
||||
me.innerElement.style.height = headerHeight + "px";
|
||||
}
|
||||
|
||||
if (innerWidth < 20) {
|
||||
me.innerElement.style.width = "20px";
|
||||
}
|
||||
}
|
||||
|
||||
}, this, true);
|
||||
|
||||
if (userConfig) {
|
||||
this.cfg.applyConfig(userConfig, true);
|
||||
}
|
||||
|
||||
this.initEvent.fire(YAHOO.widget.ResizePanel);
|
||||
}
|
||||
|
||||
YAHOO.widget.ResizePanel.prototype.toString = function() {
|
||||
return "ResizePanel " + this.id;
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!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.util.KeyListener</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>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css" />
|
||||
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
YAHOO.namespace("example.keylistener");
|
||||
|
||||
function init() {
|
||||
var debug = document.getElementById("debug");
|
||||
|
||||
document.documentElement.focus();
|
||||
document.body.focus();
|
||||
|
||||
var handler = function(type, args, obj) {
|
||||
debug.appendChild(document.createTextNode("key press handled: " + args[0]));
|
||||
debug.appendChild(document.createElement("BR"));
|
||||
}
|
||||
|
||||
YAHOO.example.keylistener.kpl1 = new YAHOO.util.KeyListener(document, { keys:[49,50,51] }, { fn:handler } );
|
||||
YAHOO.example.keylistener.kpl1.enable();
|
||||
|
||||
YAHOO.example.keylistener.kpl2 = new YAHOO.util.KeyListener(document, { shift:true, alt:true, keys:[52,53,54,55] }, handler );
|
||||
YAHOO.example.keylistener.kpl2.enable();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="hd">
|
||||
<h1>KeyListener Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>KeyListener takes three arguments: the element reference or id to attach the listener to, an object literal that contains the details about the key(s) to listen for, and the handler (represented either as a function, or a literal containing arguments for the handler function, the scope, and a scope correction flag).</p>
|
||||
<p>KeyListeners are enabled and disabled by calling the enable() and disable() functions on a listener. The DOM events for keys are dynamically attached and detached upon enable and disable.
|
||||
</p>
|
||||
<p>Press 1, 2, 3 to trigger KeyListener1.<button onclick="YAHOO.example.keylistener.kpl1.disable()">disable kpl1</button><button onclick="YAHOO.example.keylistener.kpl1.enable()">enable kpl1</button></p>
|
||||
<p>Press Alt+Shift+(4, 5, 6, or 7) to trigger KeyListener2.<button onclick="YAHOO.example.keylistener.kpl2.disable()">disable kpl2</button><button onclick="YAHOO.example.keylistener.kpl2.enable()">enable kpl2</button></p>
|
||||
</div>
|
||||
<div id="debug">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
<!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.Module</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>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/module.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css" />
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
YAHOO.namespace("example.module");
|
||||
|
||||
YAHOO.example.module.modules = [];
|
||||
|
||||
function init() {
|
||||
|
||||
// *****************************************************************
|
||||
// This represents a Overlay already on the page
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.module.mPredefined = new YAHOO.widget.Module("mPredefined", {visible:true} );
|
||||
YAHOO.example.module.mPredefined.render();
|
||||
|
||||
// *****************************************************************
|
||||
// This represents an Overlay completely pre-constructed from code
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.module.mDynamic = new YAHOO.widget.Module("mDynamic", {visible:true} );
|
||||
|
||||
YAHOO.example.module.mDynamic.setHeader("Completely dynamic overlay");
|
||||
YAHOO.example.module.mDynamic.setBody("I was created completely at runtime!");
|
||||
|
||||
YAHOO.example.module.mDynamic.render(document.getElementById("mainBody"));
|
||||
|
||||
// *****************************************************************
|
||||
// This represents a overlay with a container, but no body content defined
|
||||
// *****************************************************************
|
||||
YAHOO.example.module.mChangedAtRuntime = new YAHOO.widget.Module("mChangedAtRuntime", {visible:true} );
|
||||
|
||||
YAHOO.example.module.mChangedAtRuntime.setHeader("I was changed at runtime!");
|
||||
YAHOO.example.module.mChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
|
||||
YAHOO.example.module.mChangedAtRuntime.setFooter("The footer was changed too!");
|
||||
|
||||
YAHOO.example.module.mChangedAtRuntime.render();
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.module.modules["mPredefined"] = YAHOO.example.module.mPredefined;
|
||||
YAHOO.example.module.modules["mDynamic"] = YAHOO.example.module.mDynamic;
|
||||
YAHOO.example.module.modules["mChangedAtRuntime"] = YAHOO.example.module.mChangedAtRuntime;
|
||||
|
||||
|
||||
var btnShow = document.getElementById("btnShow");
|
||||
btnShow.onclick = showAll;
|
||||
|
||||
var btnHide = document.getElementById("btnHide");
|
||||
btnHide.onclick = hideAll;
|
||||
}
|
||||
|
||||
function hideAll() {
|
||||
for (var i in YAHOO.example.module.modules) {
|
||||
var m = YAHOO.example.module.modules[i];
|
||||
m.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function showAll() {
|
||||
for (var i in YAHOO.example.module.modules) {
|
||||
var m = YAHOO.example.module.modules[i];
|
||||
m.show();
|
||||
}
|
||||
}
|
||||
function create() {
|
||||
var form = document.forms["overlayform"];
|
||||
|
||||
// get form values
|
||||
var id = form["id"].value;
|
||||
|
||||
var header = form["header"].value;
|
||||
var body = form["body"].value;
|
||||
var footer = form["footer"].value;
|
||||
|
||||
var visible = form["visible"].checked;
|
||||
|
||||
var args = {};
|
||||
args.visible = visible;
|
||||
|
||||
var newMod;
|
||||
var isNew = true;
|
||||
|
||||
if (YAHOO.example.module.modules[id]) {
|
||||
newMod = YAHOO.example.module.modules[id];
|
||||
newMod.cfg.applyConfig(args);
|
||||
isNew = false;
|
||||
} else {
|
||||
newMod = new YAHOO.widget.Module(id, args);
|
||||
YAHOO.example.module.modules[id] = newMod;
|
||||
}
|
||||
|
||||
if (header) {
|
||||
newMod.setHeader(header);
|
||||
}
|
||||
if (body) {
|
||||
newMod.setBody(body);
|
||||
}
|
||||
if (footer) {
|
||||
newMod.setFooter(footer);
|
||||
}
|
||||
|
||||
if (isNew) {
|
||||
newMod.render(document.getElementById("mainBody"));
|
||||
} else {
|
||||
newMod.render();
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box">
|
||||
<div class="hd">
|
||||
<h1>Module Example</h1>
|
||||
</div>
|
||||
<div class="bd" id="mainBody">
|
||||
|
||||
<button id="btnHide">Hide All</button>
|
||||
<button id="btnShow">Show All</button>
|
||||
|
||||
<div id="content">
|
||||
<p>A Module is an object representation of Yahoo!'s Standard Module Format. A Module can optionally contain three elements (but must include at least one): a header, a body, and a footer, each which are denoted by CSS classes: "hd", "bd", and "ft" respectively. An empty module would look like this:</p>
|
||||
<xmp><div id="myModule">
|
||||
<div class="hd"></div>
|
||||
<div class="bd"></div>
|
||||
<div class="ft"></div>
|
||||
</div></xmp>
|
||||
<p>Modules can be constructed by attaching the Module object to pre-existing markup, or dynamically creating them from scratch and appending them to the DOM. The code to create a Module around that markup would look as simple as this:
|
||||
<code>myModule = new YAHOO.widget.Module("myModule");</code>
|
||||
</p>
|
||||
<p>A Module can be dynamically created by passing the arbitrary ID of the Module to create into the constructor, setting some content, and rendering the Module using the render method, passing in the node that the Module should be appended to, as in this example:
|
||||
<code>
|
||||
myDynamicModule = new YAHOO.widget.Module("myDynamicModule");<br/>
|
||||
myDynamicModule.setBody("Here's some body content.");<br/>
|
||||
myDynamicModule.render(document.getElementById("dynamic"));<br/>
|
||||
</code>
|
||||
</p>
|
||||
<p>Here are some example modules, including the one from above:</p>
|
||||
</div>
|
||||
|
||||
<div id="mPredefined" class="module">
|
||||
<div class="hd">Predefined Module Header</div>
|
||||
<div class="bd">I was created using simple predefined markup.</div>
|
||||
<div class="ft">Predefined Module Footer</div>
|
||||
</div>
|
||||
|
||||
<div id="mChangedAtRuntime" class="module">
|
||||
<div class="hd">Placeholder Header</div>
|
||||
<div class="bd">This is only placeholder text in the markup.</div>
|
||||
<div class="ft">Placeholder Footer</div>
|
||||
</div>
|
||||
<div id="dynamic"></div>
|
||||
|
||||
</div>
|
||||
<div class="ft"></div>
|
||||
</div>
|
||||
|
||||
<form onsubmit="return false" id="overlayform">
|
||||
<div class="overlayform">
|
||||
|
||||
<div class="formheader">
|
||||
Create / Modify a Dynamic Module
|
||||
</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">
|
||||
<div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></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 last">
|
||||
<div class="label"></div><div class="formw"><button onclick="create()">create/modify my Module</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,374 +0,0 @@
|
|||
<!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.OverlayManager</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="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>
|
||||
|
||||
.overlay {
|
||||
visibility:hidden;
|
||||
border:1px solid black;
|
||||
background-color:#FFFFFF;
|
||||
z-index:10;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
.overlay.focused {
|
||||
border:3px solid red;
|
||||
background-color:yellow;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
YAHOO.namespace("example.overlaymanager");
|
||||
|
||||
function init() {
|
||||
|
||||
// *****************************************************************
|
||||
// This represents a Overlay already on the page
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.overlaymanager.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
|
||||
YAHOO.example.overlaymanager.oPredefined.render();
|
||||
|
||||
// *****************************************************************
|
||||
// This represents an Overlay completely pre-constructed from code
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.overlaymanager.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
|
||||
|
||||
YAHOO.example.overlaymanager.oDynamic.setHeader("Completely dynamic overlay");
|
||||
YAHOO.example.overlaymanager.oDynamic.setBody("I was created completely at runtime!");
|
||||
|
||||
YAHOO.example.overlaymanager.oDynamic.render(document.body);
|
||||
|
||||
// *****************************************************************
|
||||
// This represents a overlay with a container, but no body content defined
|
||||
// *****************************************************************
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
|
||||
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime.setHeader("I was changed at runtime!");
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime.setFooter("The footer was changed too!");
|
||||
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime.render();
|
||||
// *****************************************************************
|
||||
|
||||
|
||||
YAHOO.example.overlaymanager.mgr = new YAHOO.widget.OverlayManager( { overlays:[YAHOO.example.overlaymanager.oPredefined,YAHOO.example.overlaymanager.oDynamic,YAHOO.example.overlaymanager.oChangedAtRuntime] } );
|
||||
|
||||
var button2 = document.getElementById("btnHide");
|
||||
button2.onclick = hideAll;
|
||||
|
||||
var button3 = document.getElementById("btnShow");
|
||||
button3.onclick = showAll;
|
||||
|
||||
var dd1 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oDynamic.element.id, "module");
|
||||
dd1.onDrag = function() {
|
||||
YAHOO.example.overlaymanager.oDynamic.cfg.refireEvent("iframe");
|
||||
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oDynamic.element);
|
||||
YAHOO.example.overlaymanager.oDynamic.cfg.setProperty("xy", pos);
|
||||
}
|
||||
|
||||
var dd2 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oPredefined.element.id, "module");
|
||||
dd2.onDrag = function() {
|
||||
YAHOO.example.overlaymanager.oPredefined.cfg.refireEvent("iframe");
|
||||
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oPredefined.element);
|
||||
YAHOO.example.overlaymanager.oPredefined.cfg.setProperty("xy", pos);
|
||||
}
|
||||
|
||||
var dd3 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oChangedAtRuntime.element.id, "module");
|
||||
dd3.onDrag = function() {
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.refireEvent("iframe");
|
||||
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oChangedAtRuntime.element);
|
||||
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.setProperty("xy", pos);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function hideAll() {
|
||||
YAHOO.example.overlaymanager.mgr.hideAll();
|
||||
}
|
||||
|
||||
function showAll() {
|
||||
YAHOO.example.overlaymanager.mgr.showAll();
|
||||
}
|
||||
|
||||
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 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 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;
|
||||
}
|
||||
|
||||
if (constrain) {
|
||||
args.constraintoviewport = true;
|
||||
}
|
||||
|
||||
if (useIframe) {
|
||||
args.iframe = true;
|
||||
}
|
||||
|
||||
if (fixedcenter) {
|
||||
args.fixedcenter = true;
|
||||
}
|
||||
|
||||
if (contextArg.length > 0) {
|
||||
args.context = contextArg;
|
||||
}
|
||||
|
||||
var newMod;
|
||||
var isNew = true;
|
||||
|
||||
if (YAHOO.example.overlaymanager.mgr.find(id)) {
|
||||
newMod = YAHOO.example.overlaymanager.mgr.find(id);
|
||||
newMod.cfg.applyConfig(args);
|
||||
isNew = false;
|
||||
} else {
|
||||
newMod = new YAHOO.widget.Overlay(id, args);
|
||||
YAHOO.example.overlaymanager.mgr.register(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">
|
||||
<div class="hd">
|
||||
<h1>OverlayManager Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>OverlayManager is used to manage the focused state of a collection of Overlay objects. Creating an OverlayManager and registering an Overlay is simple:
|
||||
<code>mgr = new YAHOO.widget.OverlayManager();<br/>
|
||||
mgr.register(myOverlay);
|
||||
</code>
|
||||
</p>
|
||||
<p>Note that when you click on an Overlay, the Overlay is highlighted, indicating that it currently has the focus. This is because the OverlayManager keeps track of which of the registered Overlays currently is focused, and ensures that the z-index of that Overlay is the highest.</p>
|
||||
<button id="btnHide">Hide All</button>
|
||||
<button id="btnShow">Show All</button>
|
||||
</div>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<select style="display:block">
|
||||
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
|
||||
</select>
|
||||
|
||||
<div id="oPredefined" style="visibility:hidden;position:absolute">
|
||||
<div class="hd">Predefined Overlay Header</div>
|
||||
<div class="bd">I was created using simple predefined markup.</div>
|
||||
<div class="ft">Predefined Overlay Footer</div>
|
||||
</div>
|
||||
|
||||
<div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
|
||||
<div class="hd">Placeholder Header</div>
|
||||
<div class="bd">This is only placeholder text in the markup.</div>
|
||||
<div class="ft">Placeholder Footer</div>
|
||||
</div>
|
||||
|
||||
|
||||
<img id="ctx1" src="img/ctx.gif" />
|
||||
|
||||
<form onsubmit="return false" id="overlayform">
|
||||
<div class="overlayform">
|
||||
|
||||
<div class="formheader">
|
||||
Create / Modify a Dynamic Overlay
|
||||
</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" /></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">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 overlay</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,373 +0,0 @@
|
|||
<!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.Overlay</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="css/example.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/module.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css" />
|
||||
<script type="text/javascript" src="../../build/container/container.js"></script>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
visibility:hidden;
|
||||
border:1px solid black;
|
||||
background-color:#FFFFFF;
|
||||
z-index:10;
|
||||
padding:5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
YAHOO.namespace("example.overlay");
|
||||
|
||||
YAHOO.example.overlay.overlays = [];
|
||||
|
||||
function init() {
|
||||
|
||||
// *****************************************************************
|
||||
// This represents a Overlay already on the page
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.overlay.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
|
||||
YAHOO.example.overlay.oPredefined.render();
|
||||
|
||||
// *****************************************************************
|
||||
// This represents an Overlay completely pre-constructed from code
|
||||
// *****************************************************************
|
||||
|
||||
YAHOO.example.overlay.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
|
||||
|
||||
YAHOO.example.overlay.oDynamic.setHeader("Completely dynamic overlay");
|
||||
YAHOO.example.overlay.oDynamic.setBody("I was created completely at runtime!");
|
||||
|
||||
YAHOO.example.overlay.oDynamic.render(document.body);
|
||||
|
||||
// *****************************************************************
|
||||
// This represents a overlay with a container, but no body content defined
|
||||
// *****************************************************************
|
||||
YAHOO.example.overlay.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
|
||||
|
||||
YAHOO.example.overlay.oChangedAtRuntime.setHeader("I was changed at runtime!");
|
||||
YAHOO.example.overlay.oChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
|
||||
YAHOO.example.overlay.oChangedAtRuntime.setFooter("The footer was changed too!");
|
||||
|
||||
YAHOO.example.overlay.oChangedAtRuntime.render();
|
||||
// *****************************************************************
|
||||
|
||||
|
||||
var button2 = document.getElementById("btnHide");
|
||||
button2.onclick = hideAll;
|
||||
|
||||
var button3 = document.getElementById("btnShow");
|
||||
button3.onclick = showAll;
|
||||
|
||||
var dd1 = new YAHOO.util.DD(YAHOO.example.overlay.oDynamic.element.id, "module");
|
||||
dd1.onDrag = function() {
|
||||
YAHOO.example.overlay.oDynamic.cfg.refireEvent("iframe");
|
||||
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oDynamic.element);
|
||||
YAHOO.example.overlay.oDynamic.cfg.setProperty("xy", pos);
|
||||
}
|
||||
|
||||
var dd2 = new YAHOO.util.DD(YAHOO.example.overlay.oPredefined.element.id, "module");
|
||||
dd2.onDrag = function() {
|
||||
YAHOO.example.overlay.oPredefined.cfg.refireEvent("iframe");
|
||||
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oPredefined.element);
|
||||
YAHOO.example.overlay.oPredefined.cfg.setProperty("xy", pos);
|
||||
}
|
||||
|
||||
var dd3 = new YAHOO.util.DD(YAHOO.example.overlay.oChangedAtRuntime.element.id, "module");
|
||||
dd3.onDrag = function() {
|
||||
YAHOO.example.overlay.oChangedAtRuntime.cfg.refireEvent("iframe");
|
||||
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oChangedAtRuntime.element);
|
||||
YAHOO.example.overlay.oChangedAtRuntime.cfg.setProperty("xy", pos);
|
||||
}
|
||||
|
||||
YAHOO.example.overlay.overlays["oPredefined"] = YAHOO.example.overlay.oPredefined;
|
||||
YAHOO.example.overlay.overlays["oDynamic"] = YAHOO.example.overlay.oDynamic;
|
||||
YAHOO.example.overlay.overlays["oChangedAtRuntime"] = YAHOO.example.overlay.oChangedAtRuntime;
|
||||
|
||||
}
|
||||
|
||||
function hideAll() {
|
||||
for (var i in YAHOO.example.overlay.overlays) {
|
||||
var m = YAHOO.example.overlay.overlays[i];
|
||||
m.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function showAll() {
|
||||
for (var i in YAHOO.example.overlay.overlays) {
|
||||
var m = YAHOO.example.overlay.overlays[i];
|
||||
m.show();
|
||||
}
|
||||
}
|
||||
|
||||
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 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 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;
|
||||
}
|
||||
|
||||
if (zIndex) {
|
||||
args.zIndex = zIndex;
|
||||
}
|
||||
|
||||
args.constraintoviewport = constrain;
|
||||
|
||||
args.iframe = useIframe;
|
||||
|
||||
args.fixedcenter = fixedcenter;
|
||||
|
||||
if (contextArg.length > 0) {
|
||||
args.context = contextArg;
|
||||
} else {
|
||||
args.context = null;
|
||||
}
|
||||
|
||||
var newMod;
|
||||
var isNew = true;
|
||||
|
||||
if (YAHOO.example.overlay.overlays[id]) {
|
||||
newMod = YAHOO.example.overlay.overlays[id];
|
||||
newMod.cfg.applyConfig(args);
|
||||
isNew = false;
|
||||
} else {
|
||||
newMod = new YAHOO.widget.Overlay(id, args);
|
||||
YAHOO.example.overlay.overlays[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">
|
||||
<div class="hd">
|
||||
<h1>Overlay Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<button id="btnHide">Hide All</button>
|
||||
<button id="btnShow">Show All</button>
|
||||
</div>
|
||||
<p>An Overlay is a <a href="module.html">Module</a> that is positioned to float above document content. It contains no default behavior or styling, but has several properties for manipulating its size and position. Overlay is extended to create subclasses like <a href="tooltip.html">Tooltip</a>, <a href="panel.html">Panel</a>, and <a href="dialog.html">Dialog</a>.</p>
|
||||
<p>In this example, there are three draggable overlays that are displayed, two of which are already completely or partially marked up, and one which is dynamically created using JavaScript alone.</p>
|
||||
<p>Each overlay automatically has a hidden IFRAME element wired underneath it when the browser is Internet Explorer, so that the overlays can be positioned above SELECT elements without the SELECT bleeding through. The IFRAME also ensures that the overlay can be positioned above Flash elements easily.</p>
|
||||
</div>
|
||||
|
||||
<select style="display:block">
|
||||
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
|
||||
</select>
|
||||
|
||||
<div id="oPredefined" style="visibility:hidden;position:absolute">
|
||||
<div class="hd">Predefined Overlay Header</div>
|
||||
<div class="bd">I was created using simple predefined markup.</div>
|
||||
<div class="ft">Predefined Overlay Footer</div>
|
||||
</div>
|
||||
|
||||
<div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
|
||||
<div class="hd">Placeholder Header</div>
|
||||
<div class="bd">This is only placeholder text in the markup.</div>
|
||||
<div class="ft">Placeholder Footer</div>
|
||||
</div>
|
||||
|
||||
|
||||
<img id="ctx1" src="img/ctx.gif" />
|
||||
|
||||
<form onsubmit="return false" id="overlayform">
|
||||
<div class="overlayform">
|
||||
|
||||
<div class="formheader">
|
||||
Create / Modify a Dynamic Overlay
|
||||
</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" /></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">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 overlay</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<!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="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="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>
|
||||
<div class="box" id="bodyMain">
|
||||
<div class="hd">
|
||||
<h1>Aqua Panel Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>Some custom CSS allows Panel to be rendered with a familiar skin.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="win">
|
||||
<div class="hd"><div class="lt"></div><span>Sprockets!</span><div class="rt"></div></div>
|
||||
<div class="bd">
|
||||
<img src="http://static.flickr.com/7/6301565_7123909f10_t.jpg" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
|
||||
<p>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.</p>
|
||||
|
||||
<p style="margin-bottom:0px">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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<!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="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="js/PanelEffect.js"></script>
|
||||
<script type="text/javascript" src="js/PhotoBox.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="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://static.flickr.com/51/129586913_e78683c466.jpg",caption:"Linus"},
|
||||
{src:"http://static.flickr.com/50/129590195_0642f2d96a.jpg",caption:"Linus 2"},
|
||||
{src:"http://static.flickr.com/8/12669712_be928a0d97.jpg",caption:"Dobb's Ferry, NY"}
|
||||
], width:"500px"}
|
||||
);
|
||||
YAHOO.example.photobox.box.render();
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box" id="bodyMain">
|
||||
<div class="hd">
|
||||
<h1>PhotoBox Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="win">
|
||||
<div class="hd"><div class="lt"></div><span id="win_title">Linus</span><div class="rt"></div></div>
|
||||
<div class="bd">
|
||||
<img id="win_img" src="#" width="500"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<!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="css/example.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/ResizePanel.css" />
|
||||
|
||||
<script type="text/javascript" src="../../build/container/container.js"></script>
|
||||
<script type="text/javascript" src="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>
|
||||
|
||||
<div class="box" id="bodyMain">
|
||||
<div class="hd">
|
||||
<h1>Resize Panel Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>This subclass of Panel (ResizePanel) utilizes the footer of the Panel as a resize handle for dynamic drag and resize of a Panel.</p>
|
||||
|
||||
<button onclick="YAHOO.example.resize.panel.show()">Show the ResizePanel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="win" style="visibility:hidden">
|
||||
<div class="hd"><div class="tl"></div><span>Sprockets!</span><div class="tr"></div></div>
|
||||
<div class="bd">
|
||||
<img src="http://static.flickr.com/7/6301565_7123909f10_t.jpg" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
|
||||
<p>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.</p>
|
||||
|
||||
<p style="margin-bottom:0px">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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<!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>
|
||||
<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="../../build/reset/reset.css" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="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>
|
||||
|
||||
#wait .bd {
|
||||
padding:10px 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-top:50px;
|
||||
border:1px solid #CCC;
|
||||
background-color:white;
|
||||
width:400px;
|
||||
height:250px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding:10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
YAHOO.namespace("example.panel");
|
||||
|
||||
|
||||
function init() {
|
||||
YAHOO.example.panel.wait =
|
||||
new YAHOO.widget.Panel("wait",
|
||||
{ width:"240px",
|
||||
fixedcenter:true,
|
||||
underlay:"shadow",
|
||||
close:false,
|
||||
draggable:false,
|
||||
modal:true,
|
||||
effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5}
|
||||
}
|
||||
);
|
||||
|
||||
YAHOO.example.panel.wait.setHeader("Loading, please wait...");
|
||||
YAHOO.example.panel.wait.setBody("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
|
||||
|
||||
YAHOO.example.panel.wait.render(document.body);
|
||||
|
||||
var callback = {
|
||||
success : function(o) {
|
||||
document.getElementById("content").innerHTML = o.responseText;
|
||||
YAHOO.example.panel.wait.hide();
|
||||
},
|
||||
failure : function(o) {
|
||||
document.getElementById("content").innerHTML = "CONNECTION FAILED!";
|
||||
YAHOO.example.panel.wait.hide();
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.example.panel.wait.show();
|
||||
|
||||
var conn = YAHOO.util.Connect.asyncRequest("GET", "php/somedata.php?r=" + new Date().getTime(), callback);
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!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="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="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>
|
||||
|
||||
<div class="box" id="bodyMain">
|
||||
<div class="hd">
|
||||
<h1>XP Panel Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>Some custom CSS allows Panel to be rendered with a familiar skin.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="win">
|
||||
<div class="hd"><div class="tl"></div><span>Sprockets!</span><div class="tr"></div></div>
|
||||
<div class="bd">
|
||||
<img src="http://static.flickr.com/7/6301565_7123909f10_t.jpg" alt="sprockets!" style="float:left;margin:0 5px 5px"/>
|
||||
<p>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.</p>
|
||||
|
||||
<p style="margin-bottom:0px">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.</p>
|
||||
</div>
|
||||
<div class="ft">
|
||||
<div class="bl"></div><span>Some footer text</span><div class="br"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,321 +0,0 @@
|
|||
<!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="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://static.flickr.com/7/6301565_7123909f10_t.jpg" 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>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<?php
|
||||
print "data = {";
|
||||
|
||||
$index = 0;
|
||||
|
||||
foreach($_POST as $key => $value) {
|
||||
|
||||
print "$key:";
|
||||
|
||||
if (gettype($value) == "array") {
|
||||
print "[";
|
||||
for ($i = 0;$i < count($_POST["$key"]);$i++) {
|
||||
$v = $_POST["$key"][$i];
|
||||
print "\"$v\"";
|
||||
if ($i < count($_POST["$key"])-1) {
|
||||
print ",";
|
||||
}
|
||||
}
|
||||
print "]";
|
||||
} else {
|
||||
print "\"$value\"";
|
||||
}
|
||||
|
||||
$index++;
|
||||
|
||||
if ( ($index) < count($_POST) ) {
|
||||
print ",";
|
||||
}
|
||||
}
|
||||
|
||||
print "}";
|
||||
?>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<?php
|
||||
|
||||
print "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis faucibus laoreet lectus. Aliquam erat volutpat. Nulla faucibus ultrices justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi pulvinar pharetra ante. Duis gravida nisi id ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum fermentum odio. In hac habitasse platea dictumst. Mauris semper. Aliquam vitae urna. Duis metus. Phasellus pede nisi, vulputate et, volutpat at, suscipit nec, arcu.";
|
||||
|
||||
print "Nam non est a diam faucibus porta. Donec velit nisl, nonummy et, auctor vel, sollicitudin nec, justo. Nulla elementum convallis leo. Vivamus diam ligula, elementum in, consequat eget, luctus nec, tortor. Curabitur sollicitudin nibh sed augue. Aliquam nulla est, tempus eget, vulputate non, consectetuer feugiat, lorem. Quisque in leo. Donec dolor leo, blandit sit amet, cursus et, vehicula nec, diam. Proin massa leo, cursus eget, blandit eget, nonummy in, dolor. Aliquam erat volutpat. Nunc fermentum. Morbi consectetuer.";
|
||||
|
||||
sleep(3);
|
||||
?>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<!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="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>
|
||||
<div class="box">
|
||||
<div class="hd">
|
||||
<h1>SimpleDialog Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>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.</p>
|
||||
|
||||
<p>The code to instantiate this SimpleDialog example looks like this:
|
||||
<code>dlg = new YAHOO.widget.SimpleDialog("dlg", { width: "20em", effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, fixedcenter:true, modal:true, draggable:false });<br/><br/>
|
||||
YAHOO.example.simpledialog.dlg.setHeader("Warning!");<br/>
|
||||
YAHOO.example.simpledialog.dlg.setBody("Are you sure you want to do this?");<br/>
|
||||
YAHOO.example.simpledialog.dlg.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
|
||||
</code>
|
||||
Next, we wire up the buttons using a simple JSON structure that points to local handlers for each button:
|
||||
<code>
|
||||
dlg.cfg.setProperty("buttons", [
|
||||
{ text:"OK", handler:handleOK, isDefault:true },
|
||||
{ text:"Cancel",handler:handleCancel }
|
||||
]
|
||||
);
|
||||
</code>
|
||||
</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<!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.Tooltip</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>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="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">
|
||||
|
||||
var tooltip1;
|
||||
var tooltip2;
|
||||
var tooltip3;
|
||||
|
||||
function init() {
|
||||
|
||||
tooltip2 = new YAHOO.widget.Tooltip("tt2", { context:"link" } );
|
||||
tooltip3 = new YAHOO.widget.Tooltip("tt3", { context:"img", showdelay: 1000 });
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", init);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box" id="bodyMain">
|
||||
<div class="hd">
|
||||
<h1>Tooltip Example</h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<p>The creation of a Tooltip is very straight-forward. To instantiate a Tooltip, the code looks like this:</p>
|
||||
<code>tooltip1 = new YAHOO.widget.Tooltip("tt1", { context:"btn1", text:"I'm a button. You can click me!" } );</code>
|
||||
<p>Tooltips are generally always created dynamically, and never need to be marked up in advance. The first argument is the DOM id that you want to associate with the Tooltip. The second argument is the user configuration object literal used for configuring the Tooltip. If no text is specified, the Tooltip will attempt to use the object's title attribute to set the text.</p>
|
||||
<p>The first example, tooltip1, is included in an inline script tag to demonstrate that Tooltip classes can be included inline during document rendering.</p>
|
||||
<p>By default, are shown after 200ms, displayed for 5 seconds and dismissed, or hidden 250ms after moving the mouse away from the context element. You can configure these timings, as shown in the code for tooltip3 (the one associated with the image), where we cause the Tooltip to display after 1 second, instead of the default:</p>
|
||||
<code>tooltip3 = new YAHOO.widget.Tooltip("tt3", { context:"img", showdelay: 1000 });</code>
|
||||
<p style="margin-top:25px;padding-top:25px;border-top:1px dotted black"><button id="btn1">Hover over me</button></p>
|
||||
<script>tooltip1 = new YAHOO.widget.Tooltip("tt1", { container:"bodyMain", context:"btn1", text:"I'm a button. You can click me!"} ); // This code is placed inline in a script tag to show that tooltips can be instantiated inline as well.</script>
|
||||
<p><a id="link" href="http://www.yahoo.com" title="I'm a link! I go to another page!" alt="">Hover over me too!</a></p>
|
||||
<p><img id="img" src="http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/alt3/close12_1.gif" title="I'm an image and this is my title text!"/></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue