oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded yui to 2.2.2 and yui-ext to 1.0.1a

Browse source
This commit is contained in:
JT Smith 2007-07-05 04:23:55 +00:00
parent 4d9af2c691
commit 547ced6500
1992 changed files with 645731 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

30
www/extras/yui/examples/animation/anim_basic.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Basic</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Anim('demo', { width: {to: 500} });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-basic">
<div id="doc">
<h1>Animation Example - Basic</h1>
<p>This example demonstrates how to animate an element's width to a given value.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

29
www/extras/yui/examples/animation/anim_from.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Using From</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Anim('demo', { width: {from: 600, to: 300} });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-from">
<div id="doc">
<h1>Animation Example - Using From</h1>
<p>This example demonstrates how to use the &quot;from&quot; property of an animation attribute.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

35
www/extras/yui/examples/animation/anim_size.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Size</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
width: { to: 300 },
height: { to: 300 }
};
var anim = new YAHOO.util.Anim('demo', attributes, 0.5, YAHOO.util.Easing.backOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-size">
<div id="doc">
<h1>Animation Example - Size</h1>
<p>This example demonstrates how to animate an element's size to a given value. The backOut Easing method is used to give it some flair.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

36
www/extras/yui/examples/animation/anim_size_plus.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Size Plus Other Attributes</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
width: {to: 100},
height: {to: 100},
fontSize: {from: 100, to: 50, unit: '%'},
opacity: { to: 0.5 }
};
var anim = new YAHOO.util.Anim('demo', attributes, 0.5, YAHOO.util.Easing.backOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-size-plus">
<div id="doc">
<h1>Animation Example - Size Plus Other Attributes</h1>
<p>This example demonstrates how to animate an element's size, fontSize, and opacity to given values.</p>
<p>Click anywhere to start animation.</p>
<div id="demo">Lorem ipsum dolor </div>
</div>
</body>
</html>

38
www/extras/yui/examples/animation/anim_size_plus_alt.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Adding Attributes to an Existing Animation</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
width: {to: 100},
height: {to: 100}
};
var anim = new YAHOO.util.Anim('demo', attributes);
anim.attributes.fontSize = { from: 100, to: 60, unit: '%' };
anim.attributes.opacity = { to: 0.5 };
anim.method = YAHOO.util.Easing.elasticOut;
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-size-plus">
<div id="doc">
<h1>Animation Example - Adding Attributes to an Existing Animation</h1>
<p>This example demonstrates how to animate an element's size to a given value. Other attributes are added after the instance is created in this example.</p>
<p>Click anywhere to start animation.</p>
<div id="demo">Lorem ipsum dolor </div>
</div>
</body>
</html>

29
www/extras/yui/examples/animation/anim_units.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Unit</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Anim('demo', { width: { from: 30, to: 10, unit: 'em'} } );
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-units">
<div id="doc">
<h1>Animation Example - Unit</h1>
<p>This example demonstrates how to animate an element's width using &quot;em&quot; as the unit.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

39
www/extras/yui/examples/animation/colors.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Colors</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
color: { to: '#f00' },
backgroundColor: { to: 'rgb(0, 255, 0)' },
borderTopColor: { to: '#dcdcdc' },
borderRightColor: { to: 'dcdcdc' },
borderBottomColor: { to: 'dcdcdc' },
borderLeftColor: { to: 'dcdcdc' }
};
var anim = new YAHOO.util.ColorAnim('demo', attributes);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-colors">
<div id="doc">
<h1>Animation Example - Colors</h1>
<p>This example demonstrates how to animate an element's font, border, and background color.</p>
<p>Click anywhere to start animation.</p>
<div id="demo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </div>
</div>
</body>
</html>

95
www/extras/yui/examples/animation/css/demo.css Normal file
View file

@ -0,0 +1,95 @@
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
body {
margin:0;
font:small arial;
}
h1 {
color:#666;
margin:0;
font:bold 150% palatino, georgia;
}
#hd img {
vertical-align:middle;
}
#hd h1 {
display:inline;
margin:0 0 0 20px;
vertical-align:middle;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#doc {
margin:10px;
}
#examples {
margin:60px 40px;
}
#examples li {
margin-bottom:1em;
}
#examples li a {
color:#666;
font:85% verdana;
}
#demo {
background:#ccc;
font:100%/1.2em arial;
width:10px;
height:10px;
}
#animation-demo-scroll #demo p {
width:600px;
}
#animation-demo-motion #demo {
color:yellow;
font-size:0;
}
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
background:#ccc;
font:100%/1.2em arial;
width:200px;
height:200px;
}
#animation-demo-colors #demo {
border:3px solid #c3c;
}
#animation-demo-scroll #demo {
width:400px;
height:200px;
overflow:auto;
}
#animation-demo-colors #demo {
}
#target {
background:red;
font-size:0;
position:absolute;
left:300px;top:300px;
width:10px;
height:10px;
}

30
www/extras/yui/examples/animation/easing.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Easing</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1, YAHOO.util.Easing.bounceOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-easing">
<div id="doc">
<h1>Animation Example - Easing</h1>
<p>This example demonstrates how to animate an element&apos;s width to a given value with a &quot;bounceOut&quot; easing.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

29
www/extras/yui/examples/animation/fade.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Animation Example - Fade</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Anim('demo', { opacity: { to: 0 } }, 1, YAHOO.util.Easing.easeOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-fade">
<div id="doc">
<h1>Animation Example - Fade</h1>
<p>This example demonstrates how to animate an element's opacity to a given value.</p>
<p>Click anywhere to start animation.</p>
<div id="demo">Lorem ipsum dolor </div>
</div>
</body>
</html>

BIN
www/extras/yui/examples/animation/img/logo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

38
www/extras/yui/examples/animation/index.html Normal file
View file

@ -0,0 +1,38 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Animation</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
</head>
<body>
<div id="doc">
<div id="hd">
<img src="img/logo.gif">
<h1>YUI Library - Animation</h1>
</div>
<div id="bd">
<ul id="examples">
<li><a href="anim_basic.html">Basic Animation</a></li>
<li><a href="easing.html">Using Easing</a></li>
<li><a href="anim_from.html">Using From</a></li>
<li><a href="anim_units.html">From in EM units</a></li>
<li><a href="anim_size.html">Size</a></li>
<li><a href="anim_size_plus.html">Size and other Attributes</a></li>
<li><a href="anim_size_plus_alt.html">Adding Attributes to Existing Animation</a></li>
<li><a href="fade.html">Fade</a></li>
<li><a href="colors.html">Animating Colors</a></li>
<li><a href="motion_basic.html">Simple Movement</a></li>
<li><a href="motion_by.html">Relative Movement</a></li>
<li><a href="motion_control.html">Motion Using a Control Point</a></li>
<li><a href="motion_controls.html">Motion Using Multiple Control Points</a></li>
<li><a href="motion_plus.html">Motion and Animation</a></li>
<li><a href="scroll_horiz.html">Horizontal Scrolling</a></li>
<li><a href="scroll_vert.html">Vertical Scrolling</a></li>
<li><a href="scroll_by.html">Relative Scrolling</a></li>
</ul>
</div>
</div>
</body>
</html>

31
www/extras/yui/examples/animation/motion_basic.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Motion Example - Basic</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Motion('demo', { points: { to: YAHOO.util.Dom.getXY('target') } });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - Basic</h1>
<p>This example demonstrates how to animate an element's position using the Motion subclass.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
<div id="target"></div>
</div>
</body>
</html>

30
www/extras/yui/examples/animation/motion_by.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Motion Example - Relative Motion</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Motion('demo', { points: { by: [300, 0] } });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - Relative Motion</h1>
<p>This example demonstrates how to animate an element's position from its current position by a given value.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

38
www/extras/yui/examples/animation/motion_control.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Motion Example - Using a Control Point</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
points: {
to: YAHOO.util.Dom.getXY('target'),
control: [100, 800]
}
};
var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.bounceOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - Using a Control Point</h1>
<p>This example demonstrates how to animate an element's position with a control point to create a curved path.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
<div id="target"></div>
</div>
</body>
</html>

39
www/extras/yui/examples/animation/motion_controls.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Motion Example - Using Multiple Control Points</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
points: {
to: YAHOO.util.Dom.getXY('target'),
control: [ [100, 800], [0, 200], [500, 500] ]
}
};
var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.easeOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - Using Multiple Control Points</h1>
<p>This example demonstrates how to animate an element's position with multiple control points to create a curved path.</p>
<p> Any number of control points may be used, but keep in mind that the more control points, the more work the animation has to do, so performance may suffer.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
<div id="target"></div>
</div>
</body>
</html>

40
www/extras/yui/examples/animation/motion_plus.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Motion Example - With Additional Attributes</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
points: {
to: YAHOO.util.Dom.getXY('target'),
control: [ [400, 800], [-100, 200] ]
},
width: {by: 100},
height: {by: 100}
};
var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.easeOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-motion">
<div id="doc">
<h1>Motion Example - With Additional Attributes</h1>
<p>This example demonstrates how to animate an element's position and size together.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
<div id="target"></div>
</div>
</body>
</html>

30
www/extras/yui/examples/animation/scroll_by.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scroll Example - Scroll By</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var anim = new YAHOO.util.Scroll('demo', { scroll: { by: [100, 0] } });
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-scroll">
<div id="doc">
<h1>Scroll Example - Scroll By</h1>
<p>This example demonstrates how to animate an element's horizontal scroll position using the Scroll subclass, using the <strong><em>by</em></strong> property of the scroll attribute.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto </p></div>
</div>
</body>
</html>

34
www/extras/yui/examples/animation/scroll_horiz.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scroll Example - Horizontal</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
scroll: { to: [200, YAHOO.util.Dom.get('demo').scrollTop] }
};
var anim = new YAHOO.util.Scroll('demo', attributes, 1, YAHOO.util.Easing.easeOut);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-scroll">
<div id="doc">
<h1>Scroll Example - Horizontal</h1>
<p>This example demonstrates how to animate an element's horizontal scroll position using the Scroll subclass.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto </p></div>
</div>
</body>
</html>

34
www/extras/yui/examples/animation/scroll_vert.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scroll Example - Vertical</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<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/animation/animation.js"></script>
<script type="text/javascript">
YAHOO.example.init = function() {
var attributes = {
scroll: { to: [YAHOO.util.Dom.get('demo').scrollLeft, 200] }
};
var anim = new YAHOO.util.Scroll('demo', attributes);
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
</script>
</head>
<body id="animation-demo-scroll">
<div id="doc">
<h1>Scroll Example - Vertical</h1>
<p>This example demonstrates how to animate an element's vertical scroll position using the Scroll subclass.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto </p></div>
</div>
</body>
</html>

180
www/extras/yui/examples/assets/dpSyntaxHighlighter.css Normal file
View file

@ -0,0 +1,180 @@
/* Give syntax-highlighting textareas some height for unsupported browsers */
textarea.JScript, textarea.HTML, textarea.XML {height:10em;}
/* Main style for the table */
#bd .dp-highlighter {
width: 96%;
overflow: auto;
line-height: 100% !important;
margin: 10px 0px 10px 17px;
}
.dp-highlighter table {
width:99% !important;
margin: 2px 0px 2px 0px !important;
border-collapse: collapse;
border-bottom: 2px solid #eee;
background-color: #fff;
}
.dp-highlighter tbody.hide { display: none; }
.dp-highlighter tbody.show { display: table-row-group; _display: block; }
.dp-highlighter td
{
font-family: Courier New;
font-size: 11px;
}
/* Styles for the tools */
.dp-highlighter .tools-corner {
background-color: #eee;
font-size: 9px;
}
.dp-highlighter .tools {
background-color: #eee;
padding: 3px 8px 3px 10px;
border-bottom: 1px solid gray;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
}
.dp-highlighter .tools-corner {
background-color: #eee;
}
.dp-highlighter .tools a {
font-size: 9px;
color: gray;
text-decoration: none;
}
.dp-highlighter .tools a:hover {
color: red;
text-decoration: underline;
}
/* Gutter with line number */
.dp-highlighter .gutter {
padding-right: 5px;
padding-left: 10px;
width: 5px;
background-color: #eee;
border-right: 1px solid gray;
color: gray;
text-align: right;
vertical-align: top;
}
/* Single line style */
.dp-highlighter .line1, .line2 {
padding-left: 10px;
/*border-bottom: 1px solid #F7F7F7;*/
white-space:nowrap;
}
.dp-highlighter .line2 {
/*background-color: #F7F7F7;*/
}
/* About dialog styles */
.dp-about {
background-color: #fff;
margin: 0px;
}
.dp-about table {
width: 100%;
height: 100%;
font-size: 11px;
font-family: Tahoma, Verdana, Arial, sans-serif !important;
}
.dp-about td {
padding: 10px;
vertical-align: top;
}
.dp-about .copy {
border-bottom: 1px solid #ACA899;
height: 95%;
}
.dp-about .title {
color: red;
font-weight: bold;
}
.dp-about .para {
margin-bottom: 4px;
}
.dp-about .footer {
background-color: #ECEADB;
border-top: 1px solid #fff;
text-align: right;
}
.dp-about .close {
font-size: 11px;
font-family: Tahoma, Verdana, Arial, sans-serif !important;
background-color: #ECEADB;
width: 60px;
height: 22px;
}
/* Language specific styles */
.dp-c {}
.dp-c .comment { color: green; }
.dp-c .string { color: blue; }
.dp-c .preprocessor { color: gray; }
.dp-c .keyword { color: blue; }
.dp-c .vars { color: #d00; }
.dp-vb {}
.dp-vb .comment { color: green; }
.dp-vb .string { color: blue; }
.dp-vb .preprocessor { color: gray; }
.dp-vb .keyword { color: blue; }
.dp-sql {}
.dp-sql .comment { color: green; }
.dp-sql .string { color: red; }
.dp-sql .keyword { color: blue; }
.dp-sql .func { color: #ff1493; }
.dp-sql .op { color: #808080; }
.dp-xml {}
.dp-xml .cdata { color: #ff1493; }
.dp-xml .comments { color: green; }
.dp-xml .tag { color: blue; }
.dp-xml .tag-name { color: black; font-weight: bold; }
.dp-xml .attribute { color: red; }
.dp-xml .attribute-value { color: blue; }
.dp-delphi {}
.dp-delphi .comment { color: #008200; font-style: italic; }
.dp-delphi .string { color: blue; }
.dp-delphi .number { color: blue; }
.dp-delphi .directive { color: #008284; }
.dp-delphi .keyword { font-weight: bold; color: navy; }
.dp-delphi .vars { color: #000; }
.dp-py {}
.dp-py .comment { color: green; }
.dp-py .string { color: red; }
.dp-py .docstring { color: brown; }
.dp-py .keyword { color: blue; font-weight: bold;}
.dp-py .builtins { color: #ff1493; }
.dp-py .magicmethods { color: #808080; }
.dp-py .exceptions { color: brown; }
.dp-py .types { color: brown; font-style: italic; }
.dp-py .commonlibs { color: #8A2BE2; font-style: italic; }

735
www/extras/yui/examples/assets/dpSyntaxHighlighter.js vendored Normal file
View file

@ -0,0 +1,735 @@
/**
* Code Syntax Highlighter.
* Version 1.3.0
* Copyright (C) 2004 Alex Gorbatchev.
* http://www.dreamprojections.com/syntaxhighlighter/
*
* This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General
* Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*
* You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to
* the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
//
// create namespaces
//
var dp = {
sh : // dp.sh
{
Utils : {}, // dp.sh.Utils
Brushes : {}, // dp.sh.Brushes
Strings : {},
Version : '1.3.0'
}
};
dp.sh.Strings = {
AboutDialog : '<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><p class="title">dp.SyntaxHighlighter</div><div class="para">Version: {V}</p><p><a href="http://www.dreamprojections.com/syntaxhighlighter/?ref=about" target="_blank">http://www.dreamprojections.com/SyntaxHighlighter</a></p>&copy;2004-2005 Alex Gorbatchev. All right reserved.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>',
// tools
ExpandCode : '+ expand code',
ViewPlain : 'view plain',
Print : 'print',
CopyToClipboard : 'copy to clipboard',
About : '?',
CopiedToClipboard : 'The code is in your clipboard now.'
};
dp.SyntaxHighlighter = dp.sh;
//
// Dialog and toolbar functions
//
dp.sh.Utils.Expand = function(sender)
{
var table = sender;
var span = sender;
// find the span in which the text label and pipe contained so we can hide it
while(span != null && span.tagName != 'SPAN')
span = span.parentNode;
// find the table
while(table != null && table.tagName != 'TABLE')
table = table.parentNode;
// remove the 'expand code' button
span.parentNode.removeChild(span);
table.tBodies[0].className = 'show';
table.parentNode.style.height = '100%'; // containing div isn't getting updated properly when the TBODY is shown
}
// opens a new windows and puts the original unformatted source code inside.
dp.sh.Utils.ViewSource = function(sender)
{
var code = sender.parentNode.originalCode;
var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=1');
code = code.replace(/</g, '&lt;');
wnd.document.write('<pre>' + code + '</pre>');
wnd.document.close();
}
// copies the original source code in to the clipboard (IE only)
dp.sh.Utils.ToClipboard = function(sender)
{
var code = sender.parentNode.originalCode;
// This works only for IE. There's a way to make it work with Mozilla as well,
// but it requires security settings changed on the client, which isn't by
// default, so 99% of users won't have it working anyways.
if(window.clipboardData)
{
window.clipboardData.setData('text', code);
alert(dp.sh.Strings.CopiedToClipboard);
}
}
// creates an invisible iframe, puts the original source code inside and prints it
dp.sh.Utils.PrintSource = function(sender)
{
var td = sender.parentNode;
var code = td.processedCode;
var iframe = document.createElement('IFRAME');
var doc = null;
var wnd =
// this hides the iframe
iframe.style.cssText = 'position:absolute; width:0px; height:0px; left:-5px; top:-5px;';
td.appendChild(iframe);
doc = iframe.contentWindow.document;
code = code.replace(/</g, '&lt;');
doc.open();
doc.write('<pre>' + code + '</pre>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
td.removeChild(iframe);
}
dp.sh.Utils.About = function()
{
var wnd = window.open('', '_blank', 'dialog,width=320,height=150,scrollbars=0');
var doc = wnd.document;
var styles = document.getElementsByTagName('style');
var links = document.getElementsByTagName('link');
doc.write(dp.sh.Strings.AboutDialog.replace('{V}', dp.sh.Version));
// copy over ALL the styles from the parent page
for(var i = 0; i < styles.length; i++)
doc.write('<style>' + styles[i].innerHTML + '</style>');
for(var i = 0; i < links.length; i++)
if(links[i].rel.toLowerCase() == 'stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
doc.close();
wnd.focus();
}
//
// Match object
//
dp.sh.Match = function(value, index, css)
{
this.value = value;
this.index = index;
this.length = value.length;
this.css = css;
}
//
// Highlighter object
//
dp.sh.Highlighter = function()
{
this.addGutter = true;
this.addControls = true;
this.collapse = false;
this.tabsToSpaces = true;
}
// static callback for the match sorting
dp.sh.Highlighter.SortCallback = function(m1, m2)
{
// sort matches by index first
if(m1.index < m2.index)
return -1;
else if(m1.index > m2.index)
return 1;
else
{
// if index is the same, sort by length
if(m1.length < m2.length)
return -1;
else if(m1.length > m2.length)
return 1;
}
return 0;
}
// gets a list of all matches for a given regular expression
dp.sh.Highlighter.prototype.GetMatches = function(regex, css)
{
var index = 0;
var match = null;
while((match = regex.exec(this.code)) != null)
{
this.matches[this.matches.length] = new dp.sh.Match(match[0], match.index, css);
}
}
dp.sh.Highlighter.prototype.AddBit = function(str, css)
{
var span = document.createElement('span');
str = str.replace(/&/g, '&amp;');
str = str.replace(/ /g, '&nbsp;');
str = str.replace(/</g, '&lt;');
str = str.replace(/\n/gm, '&nbsp;<br>');
// when adding a piece of code, check to see if it has line breaks in it
// and if it does, wrap individual line breaks with span tags
if(css != null)
{
var regex = new RegExp('<br>', 'gi');
if(regex.test(str))
{
var lines = str.split('&nbsp;<br>');
str = '';
for(var i = 0; i < lines.length; i++)
{
span = document.createElement('SPAN');
span.className = css;
span.innerHTML = lines[i];
this.div.appendChild(span);
// don't add a <BR> for the last line
if(i + 1 < lines.length)
this.div.appendChild(document.createElement('BR'));
}
}
else
{
span.className = css;
span.innerHTML = str;
this.div.appendChild(span);
}
}
else
{
span.innerHTML = str;
this.div.appendChild(span);
}
}
// checks if one match is inside any other match
dp.sh.Highlighter.prototype.IsInside = function(match)
{
if(match == null || match.length == 0)
return;
for(var i = 0; i < this.matches.length; i++)
{
var c = this.matches[i];
if(c == null)
continue;
if((match.index > c.index) && (match.index <= c.index + c.length))
return true;
}
return false;
}
dp.sh.Highlighter.prototype.ProcessRegexList = function()
{
for(var i = 0; i < this.regexList.length; i++)
this.GetMatches(this.regexList[i].regex, this.regexList[i].css);
}
dp.sh.Highlighter.prototype.ProcessSmartTabs = function(code)
{
var lines = code.split('\n');
var result = '';
var tabSize = 4;
var tab = '\t';
// This function inserts specified amount of spaces in the string
// where a tab is while removing that given tab.
function InsertSpaces(line, pos, count)
{
var left = line.substr(0, pos);
var right = line.substr(pos + 1, line.length); // pos + 1 will get rid of the tab
var spaces = '';
for(var i = 0; i < count; i++)
spaces += ' ';
return left + spaces + right;
}
// This function process one line for 'smart tabs'
function ProcessLine(line, tabSize)
{
if(line.indexOf(tab) == -1)
return line;
var pos = 0;
while((pos = line.indexOf(tab)) != -1)
{
// This is pretty much all there is to the 'smart tabs' logic.
// Based on the position within the line and size of a tab,
// calculate the amount of spaces we need to insert.
var spaces = tabSize - pos % tabSize;
line = InsertSpaces(line, pos, spaces);
}
return line;
}
// Go through all the lines and do the 'smart tabs' magic.
for(var i = 0; i < lines.length; i++)
result += ProcessLine(lines[i], tabSize) + '\n';
return result;
}
dp.sh.Highlighter.prototype.SwitchToTable = function()
{
// thanks to Lachlan Donald from SitePoint.com for this <br/> tag fix.
var html = this.div.innerHTML.replace(/<(br)\/?>/gi, '\n');
var lines = html.split('\n');
var row = null;
var cell = null;
var tBody = null;
var html = '';
var pipe = ' | ';
// creates an anchor to a utility
function UtilHref(util, text)
{
return '<a href="#" onclick="dp.sh.Utils.' + util + '(this); return false;">' + text + '</a>';
}
tBody = document.createElement('TBODY'); // can be created and all others go to tBodies collection.
this.table.appendChild(tBody);
if(this.addGutter == true)
{
row = tBody.insertRow(-1);
cell = row.insertCell(-1);
cell.className = 'tools-corner';
}
if(this.addControls == true)
{
var tHead = document.createElement('THEAD'); // controls will be placed in here
this.table.appendChild(tHead);
row = tHead.insertRow(-1);
// add corner if there's a gutter
if(this.addGutter == true)
{
cell = row.insertCell(-1);
cell.className = 'tools-corner';
}
cell = row.insertCell(-1);
// preserve some variables for the controls
cell.originalCode = this.originalCode;
cell.processedCode = this.code;
cell.className = 'tools';
if(this.collapse == true)
{
tBody.className = 'hide';
cell.innerHTML += '<span><b>' + UtilHref('Expand', dp.sh.Strings.ExpandCode) + '</b>' + pipe + '</span>';
}
cell.innerHTML += UtilHref('ViewSource', dp.sh.Strings.ViewPlain) + pipe + UtilHref('PrintSource', dp.sh.Strings.Print);
// IE has this clipboard object which is easy enough to use
if(window.clipboardData)
cell.innerHTML += pipe + UtilHref('ToClipboard', dp.sh.Strings.CopyToClipboard);
cell.innerHTML += pipe + UtilHref('About', dp.sh.Strings.About);
}
for(var i = 0, lineIndex = this.firstLine; i < lines.length - 1; i++, lineIndex++)
{
row = tBody.insertRow(-1);
if(this.addGutter == true)
{
cell = row.insertCell(-1);
cell.className = 'gutter';
cell.innerHTML = lineIndex;
}
cell = row.insertCell(-1);
cell.className = 'line' + (i % 2 + 1); // uses .line1 and .line2 css styles for alternating lines
cell.innerHTML = lines[i];
}
this.div.innerHTML = '';
}
dp.sh.Highlighter.prototype.Highlight = function(code)
{
function Trim(str)
{
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
}
function Chop(str)
{
return str.replace(/\n*$/, '').replace(/^\n*/, '');
}
function Unindent(str)
{
var lines = str.split('\n');
var indents = new Array();
var regex = new RegExp('^\\s*', 'g');
var min = 1000;
// go through every line and check for common number of indents
for(var i = 0; i < lines.length && min > 0; i++)
{
if(Trim(lines[i]).length == 0)
continue;
var matches = regex.exec(lines[i]);
if(matches != null && matches.length > 0)
min = Math.min(matches[0].length, min);
}
// trim minimum common number of white space from the begining of every line
if(min > 0)
for(var i = 0; i < lines.length; i++)
lines[i] = lines[i].substr(min);
return lines.join('\n');
}
// This function returns a portions of the string from pos1 to pos2 inclusive
function Copy(string, pos1, pos2)
{
return string.substr(pos1, pos2 - pos1);
}
var pos = 0;
this.originalCode = code;
this.code = Chop(Unindent(code));
this.div = document.createElement('DIV');
this.table = document.createElement('TABLE');
this.matches = new Array();
if(this.CssClass != null)
this.table.className = this.CssClass;
// replace tabs with spaces
if(this.tabsToSpaces == true)
this.code = this.ProcessSmartTabs(this.code);
this.table.border = 0;
this.table.cellSpacing = 0;
this.table.cellPadding = 0;
this.ProcessRegexList();
// if no matches found, add entire code as plain text
if(this.matches.length == 0)
{
this.AddBit(this.code, null);
this.SwitchToTable();
return;
}
// sort the matches
this.matches = this.matches.sort(dp.sh.Highlighter.SortCallback);
// The following loop checks to see if any of the matches are inside
// of other matches. This process would get rid of highligting strings
// inside comments, keywords inside strings and so on.
for(var i = 0; i < this.matches.length; i++)
if(this.IsInside(this.matches[i]))
this.matches[i] = null;
// Finally, go through the final list of matches and pull the all
// together adding everything in between that isn't a match.
for(var i = 0; i < this.matches.length; i++)
{
var match = this.matches[i];
if(match == null || match.length == 0)
continue;
this.AddBit(Copy(this.code, pos, match.index), null);
this.AddBit(match.value, match.css);
pos = match.index + match.length;
}
this.AddBit(this.code.substr(pos), null);
this.SwitchToTable();
}
dp.sh.Highlighter.prototype.GetKeywords = function(str)
{
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
}
// highlightes all elements identified by name and gets source code from specified property
dp.sh.HighlightAll = function(name, showGutter /* optional */, showControls /* optional */, collapseAll /* optional */, firstLine /* optional */)
{
function FindValue()
{
var a = arguments;
for(var i = 0; i < a.length; i++)
{
if(a[i] == null)
continue;
if(typeof(a[i]) == 'string' && a[i] != '')
return a[i] + '';
if(typeof(a[i]) == 'object' && a[i].value != '')
return a[i].value + '';
}
return null;
}
function IsOptionSet(value, list)
{
for(var i = 0; i < list.length; i++)
if(list[i] == value)
return true;
return false;
}
function GetOptionValue(name, list, defaultValue)
{
var regex = new RegExp('^' + name + '\\[(\\w+)\\]$', 'gi');
var matches = null;
for(var i = 0; i < list.length; i++)
if((matches = regex.exec(list[i])) != null)
return matches[1];
return defaultValue;
}
var elements = document.getElementsByName(name);
var highlighter = null;
var registered = new Object();
var propertyName = 'value';
// if no code blocks found, leave
if(elements == null)
return;
// register all brushes
for(var brush in dp.sh.Brushes)
{
var aliases = dp.sh.Brushes[brush].Aliases;
if(aliases == null)
continue;
for(var i = 0; i < aliases.length; i++)
registered[aliases[i]] = brush;
}
for(var i = 0; i < elements.length; i++)
{
var element = elements[i];
var options = FindValue(
element.attributes['class'], element.className,
element.attributes['language'], element.language
);
var language = '';
if(options == null)
continue;
options = options.split(':');
language = options[0].toLowerCase();
if(registered[language] == null)
continue;
// instantiate a brush
highlighter = new dp.sh.Brushes[registered[language]]();
// hide the original element
element.style.display = 'none';
highlighter.addGutter = (showGutter == null) ? !IsOptionSet('nogutter', options) : showGutter;
highlighter.addControls = (showControls == null) ? !IsOptionSet('nocontrols', options) : showControls;
highlighter.collapse = (collapseAll == null) ? IsOptionSet('collapse', options) : collapseAll;
// first line idea comes from Andrew Collington, thanks!
highlighter.firstLine = (firstLine == null) ? parseInt(GetOptionValue('firstline', options, 1)) : firstLine;
highlighter.Highlight(element[propertyName]);
// place the result table inside a div
var div = document.createElement('DIV');
div.className = 'dp-highlighter';
div.appendChild(highlighter.table);
element.parentNode.insertBefore(div, element);
}
}
dp.sh.Brushes.Xml = function()
{
this.CssClass = 'dp-xml';
}
dp.sh.Brushes.Xml.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Xml.Aliases = ['xml', 'xhtml', 'xslt', 'html', 'xhtml'];
dp.sh.Brushes.Xml.prototype.ProcessRegexList = function()
{
function push(array, value)
{
array[array.length] = value;
}
/* If only there was a way to get index of a group within a match, the whole XML
could be matched with the expression looking something like that:
(<!\[CDATA\[\s*.*\s*\]\]>)
| (<!--\s*.*\s*?-->)
| (<)*(\w+)*\s*(\w+)\s*=\s*(".*?"|'.*?'|\w+)(/*>)*
| (</?)(.*?)(/?>)
*/
var index = 0;
var match = null;
var regex = null;
// Match CDATA in the following format <![ ... [ ... ]]>
// <\!\[[\w\s]*?\[(.|\s)*?\]\]>
this.GetMatches(new RegExp('<\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\]>', 'gm'), 'cdata');
// Match comments
// <!--\s*.*\s*?-->
this.GetMatches(new RegExp('<!--\\s*.*\\s*?-->', 'gm'), 'comments');
// Match attributes and their values
// (\w+)\s*=\s*(".*?"|\'.*?\'|\w+)*
regex = new RegExp('([\\w-\.]+)\\s*=\\s*(".*?"|\'.*?\'|\\w+)*', 'gm');
while((match = regex.exec(this.code)) != null)
{
push(this.matches, new dp.sh.Match(match[1], match.index, 'attribute'));
// if xml is invalid and attribute has no property value, ignore it
if(match[2] != undefined)
{
push(this.matches, new dp.sh.Match(match[2], match.index + match[0].indexOf(match[2]), 'attribute-value'));
}
}
// Match opening and closing tag brackets
// </*\?*(?!\!)|/*\?*>
this.GetMatches(new RegExp('</*\\?*(?!\\!)|/*\\?*>', 'gm'), 'tag');
// Match tag names
// </*\?*\s*(\w+)
regex = new RegExp('</*\\?*\\s*([\\w-\.]+)', 'gm');
while((match = regex.exec(this.code)) != null)
{
push(this.matches, new dp.sh.Match(match[1], match.index + match[0].indexOf(match[1]), 'tag-name'));
}
}
dp.sh.Brushes.Php = function()
{
var keywords = 'and or xor __FILE__ __LINE__ array as break case ' +
'cfunction class const continue declare default die do echo else ' +
'elseif empty enddeclare endfor endforeach endif endswitch endwhile eval exit ' +
'extends for foreach function global if include include_once isset list ' +
'new old_function print require require_once return static switch unset use ' +
'var while __FUNCTION__ __CLASS__';
this.regexList = [
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*?"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*?'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('\\$\\w+', 'g'), css: 'vars' }, // variables
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keyword
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.Php.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Php.Aliases = ['php'];
dp.sh.Brushes.JScript = function()
{
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';
this.regexList = [
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*?"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*?'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.JScript.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.JScript.Aliases = ['js', 'jscript', 'javascript'];

24
www/extras/yui/examples/autocomplete/css/examples.css Normal file
View file

@ -0,0 +1,24 @@
h1 {font-size:144%;}
h2 {font-size:129%;}
h3 {font-size:114%;}
h4 {font-size:100%;}
h1,h2,h3,h4 {font-weight:bold;}
body {margin:1em;font-family:verdana,arial,sans-serif;}
ul {width:80%;}
dl {padding:1em;}
#hd {position:relative;}
#hd .logo {width:65px;height:38px;vertical-align:middle;padding-right:10px;}
#bd h1,h2,h3,p{padding:.5em;}
#code {clear:both;}
#code .code {padding:1em;background:#DEDEDE;border:1px solid black;font-size:92%;}
#logger {position:relative;float:right;clear:both;margin:1em;width:30em;padding:.5em;}
#panel {width:40%;background:#DEDEDE;border:1px solid #000;margin:2em;padding:1em;}
#panel div {margin-top:1em;padding-bottom:.5em;border-bottom:1px solid #404040;}
#coder {position:absolute;background:#DEDEDE;border:1px solid #000;margin:1em;padding:.5em;bottom:10px;right:10px;}
#output {position:relative;width:30em;height:15em;margin-top:1em;}

350
www/extras/yui/examples/autocomplete/customize.html Normal file
View file

@ -0,0 +1,350 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - Configurations Dashboard (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<style type="text/css">
#custommod {position:relative;padding:1em;}
#customautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#custominput {position:absolute;width:100%;height:1.4em;}
#customcontainer {position:absolute;top:1.7em;width:100%;}
#customcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#customcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#customcontainer ul {padding:5px 0;width:100%;}
#customcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#customcontainer li.yui-ac-highlight {background:#ff0;}
#customcontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Configurations Dashboard</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Code generator begins
<div id="coder">
<h3>Sample code</h3>
<textarea id="output"></textarea>
</div>
Code generator ends -->
<!-- Content begins -->
<p>In this example, an AutoComplete instance is created that points to the
same DataSource as the <a href="./ysearch_flat.html">Flat-file Data</a>
example. However, by changing the values below, you can easily customize the
configuration properties of the implementation.
</p>
<!-- AutoComplete begins -->
<div id="custommod">
<form onsubmit="return YAHOO.example.ACCustomizable.validateForm();">
<h2>Customize your own AutoComplete widget:</h2>
<div id="customautocomplete">
<input id="custominput" type="text" name="query">
<div id="customcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Panel begins -->
<form id="panel">
<!-- The following is in a select to demonstrate the useIFrame feature -->
<select><option>Customize configurations for AutoComplete</option></select>
<div>
<input id="animhoriz" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimHoriz(this);">
<label for="animhoriz">Animate Horizontally</label>
</div>
<div>
<input id="animvert" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimVert(this);" checked>
<label for="animvert">Animate Vertically</label>
</div>
<div>
<label for="animspeed">Animation Speed: </label>
<input id="animspeed" type="text" size="2" value="0.3">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateAnimSpeed();">
</div>
<div>
<input id="useshadow" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleShadow(this);">
<label for="useshadow">Use Shadow</label>
</div>
<div>
<input id="useiframe" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleIFrame(this);">
<label for="useiframe">Use IFrame</label>
</div>
<div>
<input id="typeahead" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleTypeAhead(this);">
<label for="typeahead">Type Ahead</label>
</div>
<div>
<input id="forceselection" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleForceSelection(this);">
<label for="forceselection">Force a Selection</label>
</div>
<div>
<label for="maxresults">Maximum Results: </label>
<input id="maxresults" type="text" size="2" value="10">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMaxResults();">
</div>
<div>
<label for="minquerylength">Minimum Query Length: </label>
<input id="minquerylength" type="text" size="2" value="1">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMinQueryLength();"
</div>
<div>
<label for="querydelay">Query Delay: </label>
<input id="querydelay" type="text" size="2" value="0.5">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateQueryDelay();">
</div>
<div>
<label for="delimchar">Array of Delimiter Character(s)</label><br>
<input id="delimchar" type="text" size="30" value="">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateDelimChar();">
</div>
<div>
<label for="highlightclass">Highlight Classname</label><br>
<input id="highlightclass" type="text" size="30" value="yui-ac-highlight" maxlength="30">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHighlight();">
</div>
<div>
<label for="prehighlightclass">Pre-highlight Classname</label><br>
<input id="prehighlightclass" type="text" size="30" value="" maxlength="30">
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updatePrehighlight();">
</div>
<div>
<input id="allowbrowserautocomplete" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAllowBrowserAutocomplete(this);" checked>
<label for="allowbrowserautocomplete">Allow Browser Autocomplete</label>
</div>
<div>
<input id="alwaysshowcontainer" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAlwaysShowContainer(this);">
<label for="alwaysshowcontainer">Always Show Container</label>
</div>
<div>
<label for="header">Set Header</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHeader();"><br>
<textarea id="header" cols="25" rows="5"></textarea>
</div>
<div>
<label for="body">Set Body</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateBody();"><br>
<textarea id="body" cols="25" rows="5"></textarea>
</div>
<div>
<label for="footer">Set Footer</label>
<input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateFooter();"><br>
<textarea id="footer" cols="25" rows="5"></textarea>
</div>
</form>
<!-- Panel ends -->
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.ACCustomizable = function(){
var mylogreader, mylogwriter;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogreader = new YAHOO.widget.LogReader("logger");
mylogwriter = new YAHOO.widget.LogWriter("Custom configs");
// DataSource 1
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
// This is the one non-default value other than constructor params
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
// AutoComplete 1
oAutoComp = new YAHOO.widget.AutoComplete('custominput','customcontainer', oACDS);
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
oAutoComp.useIFrame = true;
YAHOO.util.Dom.get("useiframe").checked = true;
}
},
toggleAnimHoriz: function(animHoriz) {
oAutoComp.animHoriz = animHoriz.checked;
mylogwriter.log("Updated animHoriz to " + oAutoComp.animHoriz + ".");
},
toggleAnimVert: function(animVert) {
oAutoComp.animVert = animVert.checked;
mylogwriter.log("Updated animVert to " + oAutoComp.animVert + ".");
},
updateAnimSpeed: function() {
var animSpeed = document.getElementById("animspeed").value;
if (isNaN(animSpeed) || (animSpeed < 1)) {
document.getElementById("animspeed").value = oAutoComp.animSpeed;
mylogwriter.log("Could not update animSpeed.", "warn");
return;
}
else {
oAutoComp.animSpeed = animSpeed;
mylogwriter.log("Updated animSpeed to " + oAutoComp.animSpeed + ".");
}
},
toggleShadow: function(useShadow) {
oAutoComp.useShadow = useShadow.checked;
mylogwriter.log("Updated useShadow to " + oAutoComp.useShadow + ".");
},
toggleIFrame: function(useIFrame) {
oAutoComp.useIFrame = useIFrame.checked;
mylogwriter.log("Updated useIFrame to " + oAutoComp.useIFrame + ".");
},
toggleTypeAhead: function(typeAhead) {
oAutoComp.typeAhead = typeAhead.checked;
mylogwriter.log("Updated typeAhead to " + oAutoComp.typeAhead + ".");
},
toggleForceSelection: function(forceSelection) {
oAutoComp.forceSelection = forceSelection.checked;
oAutoComp.forceSelection = forceSelection.checked;
mylogwriter.log("Updated forceSelection to " + oAutoComp.forceSelection + ".");
},
updateMaxResults: function() {
var maxResults = document.getElementById("maxresults").value;
if (isNaN(maxResults) || (maxResults < 1)) {
document.getElementById("maxresults").value = oAutoComp.maxResultsDisplayed;
mylogwriter.log("Could not update maxResultsDisplayed.", "warn");
return;
}
else {
oAutoComp.maxResultsDisplayed = maxResults;
mylogwriter.log("Updated maxResultsDisplayed to " + oAutoComp.maxResultsDisplayed + ".");
}
},
updateMinQueryLength: function() {
var minQueryLength = document.getElementById("minquerylength").value;
if (isNaN(minQueryLength)) {
document.getElementById("minquerylength").value = oAutoComp.minQueryLength;
mylogwriter.log("Could not update minQueryLength.", "warn");
return;
}
else {
oAutoComp.minQueryLength = minQueryLength;
mylogwriter.log("Updated minQueryLength to " + oAutoComp.minQueryLength + ".");
}
},
updateQueryDelay: function() {
var queryDelay = document.getElementById("querydelay").value;
if (isNaN(queryDelay) || (queryDelay < 0)) {
document.getElementById("querydelay").value = oAutoComp.queryDelay;
mylogwriter.log("Could not update queryDelay.", "warn");
return;
}
else {
oAutoComp.queryDelay = queryDelay;
mylogwriter.log("Updated query delay to " + oAutoComp.queryDelay + ".");
}
},
updateDelimChar: function() {
var sValue = document.getElementById("delimchar").value;
if((sValue.indexOf("[") == 0) && (sValue.indexOf("]") == sValue.length-1)) {
oAutoComp.delimChar = eval(sValue);
}
else if(sValue.length < 2){
oAutoComp.delimChar = sValue;
}
else {
document.getElementById("delimchar").value = oAutoComp.delimChar;
mylogwriter.log("Could not update delimChar.", "warn");
return;
}
mylogwriter.log("Updated delimChar to " + oAutoComp.delimChar + ".");
},
updateHighlight: function() {
oAutoComp.highlightClassName = document.getElementById("highlightclass").value;
mylogwriter.log("Updated highlightClassName to " + oAutoComp.highlightClassName + ".");
},
updatePrehighlight: function() {
oAutoComp.prehighlightClassName = document.getElementById("prehighlightclass").value;
mylogwriter.log("Updated prehighlightClassName to " + oAutoComp.prehighlightClassName + ".");
},
toggleAllowBrowserAutocomplete: function(allowBrowserAutocomplete) {
oAutoComp.allowBrowserAutocomplete = allowBrowserAutocomplete.checked;
mylogwriter.log("Updated allowBrowserAutocomplete to " + oAutoComp.allowBrowserAutocomplete + ".");
},
toggleAlwaysShowContainer: function(alwaysShowContainer) {
var container = YAHOO.util.Dom.getElementsByClassName("yui-ac-content","div","customcontainer")[0];
if(container) {
oAutoComp.alwaysShowContainer = alwaysShowContainer.checked;
if(oAutoComp.alwaysShowContainer) {
oAutoComp.setBody("alwaysShowContainer enabled");
}
else {
container.style.height = "0";
oAutoComp.setBody();
}
mylogwriter.log("Updated alwaysShowContainer to " + oAutoComp.alwaysShowContainer + ".");
}
else {
mylogwriter.log("Could not update alwaysShowContainer.","warn");
}
},
updateHeader: function() {
var header = document.getElementById("header").value;
oAutoComp.setHeader(header);
mylogwriter.log("Header updated.");
},
updateBody: function() {
var body = document.getElementById("body").value;
oAutoComp.setBody(body);
mylogwriter.log("Body updated.");
},
updateFooter: function() {
var footer = document.getElementById("footer").value;
oAutoComp.setFooter(footer);
mylogwriter.log("Footer updated.");
},
validateForm: function() {
// Validate form inputs here
return true;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACCustomizable.init);
</script>
</div>
</body>
</html>

210
www/extras/yui/examples/autocomplete/flickr_xml.html Normal file
View file

@ -0,0 +1,210 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - Flickr XML (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
#flickrmod {position:relative;padding:1em;}
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#flickrinput {position:absolute;width:100%;height:1.4em;}
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
#flickrcontainer ul {padding:5px 0;width:100%;}
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flickr XML</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<p>This example uses a DataSource that points to Flickr Web
Services, which returns XML data via a simple PHP proxy. In order to return
valid data from the Flickr application, <code>scriptQueryParameter</code>
has been customized to be <code>"tags"</code>, and <code>scriptQueryAppend</code> is used
to pass in additional required arguments. The cache has been disabled so
that each query is forced to make a trip to the live application.</p>
<p>This instance of AutoComplete defines a robust custom
<code>formatResult</code> function that parses result data into custom HTML
markup that displays an actual image from the Flickr server. Automatic
highlighting of the first result item in the container has been disabled by
setting <code>autoHighlight</code> to <code>false</code>.</p>
<!-- AutoComplete begins -->
<div id="flickrmod">
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
<div id="flickrautocomplete">
<input id="flickrinput">
<div id="flickrcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#flickrmod {position:relative;padding:1em;}
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#flickrinput {position:absolute;width:100%;height:1.4em;}
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
#flickrcontainer ul {padding:5px 0;width:100%;}
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="flickrmod">
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
<div id="flickrautocomplete">
<input id="flickrinput">
<div id="flickrcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate an XHR DataSource and define schema as an array:
// ["ResultNodeName",
// "QueryKeyAttributeOrNodeName",
// "AdditionalParamAttributeOrNodeName1",
// ...
// "AdditionalParamAttributeOrNodeNameN"]
oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
["photo", "title", "id", "owner", "secret", "server"]);
oACDS.scriptQueryParam = "tags";
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
oACDS.maxCacheEntries = 0;
oACDS.scriptQueryAppend = "method=flickr.photos.search";
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
oAutoComp.autoHighlight = false;
oAutoComp.formatResult = function(oResultItem, sQuery) {
// This was defined by the schema array of the data source
var sTitle = oResultItem[0];
var sId = oResultItem[1];
var sOwner = oResultItem[2];
var sSecret = oResultItem[3];
var sServer = oResultItem[4];
var sUrl = "http://static.flickr.com/" +
sServer +
"/" +
sId +
"_" +
sSecret +
"_s.jpg";
var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;
return (sMarkup);
};
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.ACFlickr = function() {
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate an XHR DataSource and define schema as an array:
// ["ResultNodeName",
// "QueryKeyAttributeOrNodeName",
// "AdditionalParamAttributeOrNodeName1",
// ...
// "AdditionalParamAttributeOrNodeNameN"]
oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
["photo", "title", "id", "owner", "secret", "server"]);
oACDS.scriptQueryParam = "tags";
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
oACDS.maxCacheEntries = 0;
oACDS.scriptQueryAppend = "method=flickr.photos.search";
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
oAutoComp.autoHighlight = false;
oAutoComp.formatResult = function(oResultItem, sQuery) {
// This was defined by the schema array of the data source
var sTitle = oResultItem[0];
var sId = oResultItem[1];
var sOwner = oResultItem[2];
var sSecret = oResultItem[3];
var sServer = oResultItem[4];
var sUrl = "http://static.flickr.com/" +
sServer +
"/" +
sId +
"_" +
sSecret +
"_s.jpg";
var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;
return (sMarkup);
};
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlickr.init);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

BIN
www/extras/yui/examples/autocomplete/img/logo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

32
www/extras/yui/examples/autocomplete/index.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Examples: AutoComplete (YUI Library)</title>
<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
<link rel="stylesheet" href="./css/examples.css" type="text/css" />
<style type="text/css">
ul {margin:1em;}
li {margin:1em;list-style-type:none;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/>AutoComplete Widget Implementation Examples</h1>
</div>
<div id="bd">
<ul>
<li><a href="./ysearch_json.html">Query Yahoo! Search web services for JSON data</a></li>
<li><a href="./ysearch_xml.html">Query Yahoo! Search web wervices for XML data</a></li>
<li><a href="./states_jsarray.html">Query a JS array for in-memory data</a></li>
<li><a href="./states_jsfunction.html">Query a JS function for in-memory data</a></li>
<li><a href="./flickr_xml.html">Query Flickr web services for XML data</a></li>
<li><a href="./ysearch_flat.html">Query a custom PHP script for flat-file data</a></li>
<li><a href="./customize.html">Configure your own AutoComplete component</a></li>
</ul>
</div>
</body>
</html>

150
www/extras/yui/examples/autocomplete/js/json.js vendored Normal file
View file

@ -0,0 +1,150 @@
/*
Copyright (c) 2005 JSON.org
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The Software shall be used for Good, not Evil.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/*
The global object JSON contains two methods.
JSON.stringify(value) takes a JavaScript value and produces a JSON text.
The value must not be cyclical.
JSON.parse(text) takes a JSON text and produces a JavaScript value. It will
throw a 'JSONError' exception if there is an error.
*/
var JSON = {
copyright: '(c)2005 JSON.org',
license: 'http://www.crockford.com/JSON/license.html',
/*
Stringify a JavaScript value, producing a JSON text.
*/
stringify: function (v) {
var a = [];
/*
Emit a string.
*/
function e(s) {
a[a.length] = s;
}
/*
Convert a value.
*/
function g(x) {
var c, i, l, v;
switch (typeof x) {
case 'object':
if (x) {
if (x instanceof Array) {
e('[');
l = a.length;
for (i = 0; i < x.length; i += 1) {
v = x[i];
if (typeof v != 'undefined' &&
typeof v != 'function') {
if (l < a.length) {
e(',');
}
g(v);
}
}
e(']');
return;
} else if (typeof x.valueOf == 'function') {
e('{');
l = a.length;
for (i in x) {
v = x[i];
if (typeof v != 'undefined' &&
typeof v != 'function' &&
(!v || typeof v != 'object' ||
typeof v.valueOf == 'function')) {
if (l < a.length) {
e(',');
}
g(i);
e(':');
g(v);
}
}
return e('}');
}
}
e('null');
return;
case 'number':
e(isFinite(x) ? +x : 'null');
return;
case 'string':
l = x.length;
e('"');
for (i = 0; i < l; i += 1) {
c = x.charAt(i);
if (c >= ' ') {
if (c == '\\' || c == '"') {
e('\\');
}
e(c);
} else {
switch (c) {
case '\b':
e('\\b');
break;
case '\f':
e('\\f');
break;
case '\n':
e('\\n');
break;
case '\r':
e('\\r');
break;
case '\t':
e('\\t');
break;
default:
c = c.charCodeAt();
e('\\u00' + Math.floor(c / 16).toString(16) +
(c % 16).toString(16));
}
}
}
e('"');
return;
case 'boolean':
e(String(x));
return;
default:
e('null');
return;
}
}
g(v);
return a.join('');
},
/*
Parse a JSON text, producing a JavaScript value.
*/
parse: function (text) {
return (/^(\s+|[,:{}\[\]]|"(\\["\\\/bfnrtu]|[^\x00-\x1f"\\]+)*"|-?\d+(\.\d*)?([eE][+-]?\d+)?|true|false|null)+$/.test(text)) &&
eval('(' + text + ')');
}
};

116
www/extras/yui/examples/autocomplete/js/states_jsfunction.js vendored Normal file
View file

@ -0,0 +1,116 @@
function getStates(sQuery) {
aResults = [];
if(sQuery && sQuery.length > 0) {
var charKey = sQuery.substring(0,1).toLowerCase();
var oResponse = dataset[charKey];
if(oResponse) {
for(var i = oResponse.length-1; i >= 0; i--) {
var sKey = oResponse[i].STATE;
var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
// Query found at the beginning of the key string for STARTSWITH
// returns an array of arrays where STATE is index=0, ABBR is index=1
if(sKeyIndex === 0) {
aResults.unshift([sKey, oResponse[i].ABBR]);
}
}
return aResults;
}
}
// Empty queries return all states
else {
for(var letter in dataset) {
var oResponse = dataset[letter];
for(var i = oResponse.length-1; i >= 0; i--) {
aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
}
}
return aResults;
}
}
//{"STATE" : "", "ABBR" : ""}
var dataset =
{'a': [{"STATE" : "Alabama", "ABBR" : "AL"},
{"STATE" : "Alaska", "ABBR" : "AK"},
{"STATE" : "Arizona", "ABBR" : "AZ"},
{"STATE" : "Arkansas", "ABBR" : "AR"}],
'b' : [
],
'c' : [
{"STATE" : "California", "ABBR" : "CA"},
{"STATE" : "Colorado", "ABBR" : "CO"},
{"STATE" : "Connecticut", "ABBR" : "CT"}],
'd' : [
{"STATE" : "Delaware", "ABBR" : "DE"}],
'e' : [
],
'f' : [
{"STATE" : "Florida", "ABBR" : "FL"}],
'g' : [
{"STATE" : "Georgia", "ABBR" : "GA"}],
'h' : [
{"STATE" : "Hawaii", "ABBR" : "HI"}],
'i' : [
{"STATE" : "Idaho", "ABBR" : "ID"},
{"STATE" : "Illinois", "ABBR" : "IL"},
{"STATE" : "Indiana", "ABBR" : "IN"},
{"STATE" : "Iowa", "ABBR" : "IA"}],
'j' : [
],
'k' : [
{"STATE" : "Kansas", "ABBR" : "KS"},
{"STATE" : "Kentucky", "ABBR" : "KY"}],
'l' : [
{"STATE" : "Louisiana", "ABBR" : "LA"}],
'm' : [
{"STATE" : "Maine", "ABBR" : "ME"},
{"STATE" : "Maryland", "ABBR" : "MD"},
{"STATE" : "Massachusetts", "ABBR" : "MA"},
{"STATE" : "Michigan", "ABBR" : "MI"},
{"STATE" : "Minnesota", "ABBR" : "MN"},
{"STATE" : "Mississippi", "ABBR" : "MS"},
{"STATE" : "Missouri", "ABBR" : "MO"},
{"STATE" : "Montana", "ABBR" : "MT"}],
'n' : [
{"STATE" : "Nebraska", "ABBR" : "NE"},
{"STATE" : "Nevada", "ABBR" : "NV"},
{"STATE" : "New Hampshire", "ABBR" : "NH"},
{"STATE" : "New Jersey", "ABBR" : "NJ"},
{"STATE" : "New Mexico", "ABBR" : "NM"},
{"STATE" : "New York", "ABBR" : "NY"},
{"STATE" : "North Dakota", "ABBR" : "ND"},
{"STATE" : "North Carolina", "ABBR" : "NC"}],
'o' : [
{"STATE" : "Ohio", "ABBR" : "OH"},
{"STATE" : "Oklahoma", "ABBR" : "OK"},
{"STATE" : "Oregon", "ABBR" : "OR"}],
'p' : [
{"STATE" : "Pennsylvania", "ABBR" : "PA"}],
'q' : [
],
'r' : [
{"STATE" : "Rhode Island", "ABBR" : "RI"}],
's' : [
{"STATE" : "South Carolina", "ABBR" : "SC"},
{"STATE" : "South Dakota", "ABBR" : "SD"}],
't' : [
{"STATE" : "Tennessee", "ABBR" : "TN"},
{"STATE" : "Texas", "ABBR" : "TX"}],
'u' : [
{"STATE" : "Utah", "ABBR" : "UT"}],
'v' : [
{"STATE" : "Vermont", "ABBR" : "VT"},
{"STATE" : "Virginia", "ABBR" : "VA"}],
'w' : [
{"STATE" : "Washington", "ABBR" : "WA"},
{"STATE" : "West Virginia", "ABBR" : "WV"},
{"STATE" : "Wisconsin", "ABBR" : "WI"},
{"STATE" : "Wyoming", "ABBR" : "WY"}],
'x' : [
],
'y' : [
],
'z' : [
]
};

33
www/extras/yui/examples/autocomplete/php/flickr_proxy.php Normal file
View file

@ -0,0 +1,33 @@
<?php
// Yahoo! proxy
// Hard-code hostname and path:
define ('PATH', 'http://www.flickr.com/services/rest/');
// Get all query params
$query = "?";
foreach ($_GET as $key => $value) {
$query .= urlencode($key)."=".urlencode($value)."&";
}
foreach ($_POST as $key => $value) {
$query .= $key."=".$value."&";
}
$query .= "&api_key=30cc0cf363608a1ffa3fc1631854c8b8";
$url = PATH.$query;
// Open the Curl session
$session = curl_init($url);
// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
// Make the call
$response = curl_exec($session);
header("Content-Type: text/xml");
echo $response;
curl_close($session);
?>

44109
www/extras/yui/examples/autocomplete/php/ysearch_flat.php Normal file
View file

File diff suppressed because it is too large Load diff

45
www/extras/yui/examples/autocomplete/php/ysearch_proxy.php Normal file
View file

@ -0,0 +1,45 @@
<?php
// Yahoo! proxy
// Hard-code hostname and path:
// search = http://api.search.yahoo.com/WebSearchService/V1/webSearch
// api.local
// api.travel
define ('PATH', 'http://api.search.yahoo.com/WebSearchService/V1/webSearch');
$type = "text/xml";
// Get all query params
$query = "?";
foreach ($_GET as $key => $value) {
if(($key == "output") && ($value == "json")) {
$type = "application/json";
}
$query .= urlencode($key)."=".urlencode($value)."&";
}
foreach ($_POST as $key => $value) {
if(($key == "output") && ($value == "json")) {
$type = "application/json";
}
$query .= $key."=".$value."&";
}
$query .= "appid=jennyhan_ac";
$url = PATH.$query;
// Open the Curl session
$session = curl_init($url);
// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
// Make the call
$response = curl_exec($session);
header("Content-Type: ".$type);
echo $response;
curl_close($session);
?>

672
www/extras/yui/examples/autocomplete/states_jsarray.html Normal file
View file

@ -0,0 +1,672 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - JavaScript Array (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
#statesmod {position:relative;}
#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */
#statesinput, #statesinput2 {_position:absolute;width:100%;height:1.4em;z-index:0;} /* abs for ie quirks */
#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2">
<div id="statescontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Content begins -->
<p>There are two AutoComplete widgets on this page that each point to a
different DS_JSArray DataSource instance. Driving each DataSource is a local
JavaScript array of strings: <code>statesArray</code> and <code>areaCodesArray</code>.
By pointing to arrays that are already loaded into memory the widget is
very fast to return data. Therefore, both AutoComplete instances are
configured to have a query delay of zero
seconds.</p>
<p>Enabling the
<code>prehighlightClassName</code> feature provides supplemental visual
feedback for mouse events on results in the container.</p>
<p>The <code>formatResult</code> method of the second AutoComplete instance
has been enhanced to display two data fields in the container, and the
<code>forceSelection</code> property has been enabled to prevent the user from
typing in a free-form selection.</p>
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#statesmod {position:relative;}
#statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesautocomplete {z-index:9000} /* for IE z-index of absolute divs inside relative divs issue */
#statesinput, #statesinput2 {_position:absolute;width:100%;height:1.4em;z-index:0;} /* abs for ie quirks */
#statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
#statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2">
<div id="statescontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida" // Entire array not shown
];
var areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"] // Entire array not shown
];
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp.useShadow = true;
oAutoComp.minQueryLength = 0;
oAutoComp.textboxFocusEvent.subscribe(function(){oAutoComp.sendQuery("");});
// Instantiate second JS Array DataSource
oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
// Instantiate second AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
oAutoComp2.useShadow = true;
oAutoComp2.forceSelection = true;
oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Dakota",
"North Carolina",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
var areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"],
["208", "Idaho"],
["209", "California"],
["210", "Texas"],
["212", "New York"],
["213", "California"],
["214", "Texas"],
["215", "Pennsylvania"],
["216", "Ohio"],
["217", "Illinois"],
["218", "Minnesota"],
["219", "Indiana"],
["224", "Illinois"],
["225", "Louisiana"],
["227", "Maryland"],
["228", "Mississippi"],
["229", "Georgia"],
["231", "Michigan"],
["234", "Ohio"],
["239", "Florida"],
["240", "Maryland"],
["242", "Bahamas"],
["246", "Barbados"],
["248", "Michigan"],
["250", "British Columbia"],
["251", "Alabama"],
["252", "North Carolina"],
["253", "Washington"],
["254", "Texas"],
["256", "Alabama"],
["260", "Indiana"],
["262", "Wisconsin"],
["264", "Anguilla"],
["267", "Pennsylvania"],
["268", "Antigua and Barbuda"],
["269", "Michigan"],
["270", "Kentucky"],
["276", "Virginia"],
["281", "Texas"],
["283", "Ohio"],
["284", "British Virgin Islands"],
["289", "Ontario"],
["301", "Maryland"],
["302", "Delaware"],
["303", "Colorado"],
["304", "West Virginia"],
["305", "Florida"],
["306", "Saskatchewan, Canada"],
["307", "Wyoming"],
["308", "Nebraska"],
["309", "Illinois"],
["310", "California"],
["312", "Illinois"],
["313", "Michigan"],
["314", "Missouri"],
["315", "New York"],
["316", "Kansas"],
["317", "Indiana"],
["318", "Louisiana"],
["319", "Iowa"],
["320", "Minnesota"],
["321", "Florida"],
["323", "California"],
["330", "Ohio"],
["331", "Illinois"],
["334", "Alabama"],
["336", "North Carolina"],
["337", "Louisiana"],
["339", "Massachusetts"],
["340", "US Virgin Islands"],
["345", "Cayman Islands"],
["347", "New York"],
["351", "Massachusetts"],
["352", "Florida"],
["360", "Washington"],
["361", "Texas"],
["386", "Florida"],
["401", "Rhode Island"],
["402", "Nebraska"],
["403", "Alberta, Canada"],
["404", "Georgia"],
["405", "Oklahoma"],
["406", "Montana"],
["407", "Florida"],
["408", "California"],
["409", "Texas"],
["410", "Maryland"],
["412", "Pennsylvania"],
["413", "Massachusetts"],
["414", "Wisconsin"],
["415", "California"],
["416", "Ontario, Canada"],
["417", "Missouri"],
["418", "Quebec, Canada"],
["419", "Ohio"],
["423", "Tennessee"],
["424", "California"],
["425", "Washington"],
["434", "Virginia"],
["435", "Utah"],
["440", "Ohio"],
["441", "Bermuda"],
["443", "Maryland"],
["445", "Pennsylvania"],
["450", "Quebec, Canada"],
["464", "Illinois"],
["469", "Texas"],
["470", "Georgia"],
["473", "Grenada"],
["475", "Connecticut"],
["478", "Georgia"],
["479", "Arkansas"],
["480", "Arizona"],
["484", "Pennsylvania"],
["501", "Arkansas"],
["502", "Kentucky"],
["503", "Oregon"],
["504", "Louisiana"],
["505", "New Mexico"],
["506", "New Brunswick, Canada"],
["507", "Minnesota"],
["508", "Massachusetts"],
["509", "Washington"],
["510", "California"],
["512", "Texas"],
["513", "Ohio"],
["514", "Quebec, Canada"],
["515", "Iowa"],
["516", "New York"],
["517", "Michigan"],
["518", "New York"],
["519", "Ontario, Canada"],
["520", "Arizona"],
["530", "California"],
["540", "Virginia"],
["541", "Oregon"],
["551", "New Jersey"],
["557", "Missouri"],
["559", "California"],
["561", "Florida"],
["562", "California"],
["563", "Iowa"],
["564", "Washington"],
["567", "Ohio"],
["570", "Pennsylvania"],
["571", "Virginia"],
["573", "Missouri"],
["574", "Indiana"],
["580", "Oklahoma"],
["585", "New York"],
["586", "Michigan"],
["601", "Mississippi"],
["602", "Arizona"],
["603", "New Hampshire"],
["604", "British Columbia, Canada"],
["605", "South Dakota"],
["606", "Kentucky"],
["607", "New York"],
["608", "Wisconsin"],
["609", "New Jersey"],
["610", "Pennsylvania"],
["612", "Minnesota"],
["613", "Ontario, Canada"],
["614", "Ohio"],
["615", "Tennessee"],
["616", "Michigan"],
["617", "Massachusetts"],
["618", "Illinois"],
["619", "California"],
["620", "Kansas"],
["623", "Arizona"],
["626", "California"],
["630", "Illinois"],
["631", "New York"],
["636", "Missouri"],
["641", "Iowa"],
["646", "New York"],
["647", "Ontario, Canada"],
["649", "Turks and Caicos Islands"],
["650", "California"],
["651", "Minnesota"],
["660", "Missouri"],
["661", "California"],
["662", "Mississippi"],
["664", "Montserrat"],
["667", "Maryland"],
["670", "CNMI"],
["671", "Guam"],
["678", "Georgia"],
["682", "Texas"],
["701", "North Dakota"],
["702", "Nevada"],
["703", "Virginia"],
["704", "North Carolina"],
["705", "Ontario, Canada"],
["706", "Georgia"],
["707", "California"],
["708", "Illinois"],
["709", "Newfoundland, Canada"],
["712", "Iowa"],
["713", "Texas"],
["714", "California"],
["715", "Wisconsin"],
["716", "New York"],
["717", "Pennsylvania"],
["718", "New York"],
["719", "Colorado"],
["720", "Colorado"],
["724", "Pennsylvania"],
["727", "Florida"],
["731", "Tennessee"],
["732", "New Jersey"],
["734", "Michigan"],
["737", "Texas"],
["740", "Ohio"],
["754", "Florida"],
["757", "Viriginia"],
["758", "St. Lucia"],
["760", "California"],
["763", "Minnesota"],
["765", "Indiana"],
["767", "Dominica"],
["770", "Georgia"],
["772", "Florida"],
["773", "Illinois"],
["774", "Massachusetts"],
["775", "Nevada"],
["778", "British Columbia, Canada"],
["780", "Alberta, Canada"],
["781", "Massachusetts"],
["784", "St. Vincent &amp; Gren."],
["785", "Kansas"],
["786", "Florida"],
["787", "Puerto Rico"],
["801", "Utah"],
["802", "Vermont"],
["803", "South Carolina"],
["804", "Virginia"],
["805", "California"],
["806", "Texas"],
["807", "Ontario, Canada"],
["808", "Hawaii"],
["809", "Dominican Republic"],
["810", "Michigan"],
["812", "Indiana"],
["813", "Florida"],
["814", "Pennsylvania"],
["815", "Illinois"],
["816", "Missouri"],
["817", "Texas"],
["818", "California"],
["819", "Quebec, Canada"],
["828", "North Carolina"],
["830", "Texas"],
["831", "California"],
["832", "Texas"],
["835", "Pennsylvania"],
["843", "South Carolina"],
["845", "New York"],
["847", "Illinois"],
["848", "New Jersey"],
["850", "Florida"],
["856", "New Jersey"],
["857", "Massachusetts"],
["858", "California"],
["859", "Kentucky"],
["860", "Connecticut"],
["862", "New Jersey"],
["863", "Florida"],
["864", "South Carolina"],
["865", "Tennessee"],
["867", "Yukon, NW Territories, Canada"],
["868", "Trinidad and Tobago"],
["869", "St. Kitts &amp; Nevis"],
["870", "Arkansas"],
["872", "Illinois"],
["876", "Jamaica"],
["878", "Pennsylvania"],
["901", "Tennessee"],
["902", "Nova Scotia, Canada"],
["903", "Texas"],
["904", "Florida"],
["905", "Ontario, Canada"],
["906", "Michigan"],
["907", "Alaska"],
["908", "New Jersey"],
["909", "California"],
["910", "North Carolina"],
["912", "Georgia"],
["913", "Kansas"],
["914", "New York"],
["915", "Texas"],
["916", "California"],
["917", "New York"],
["918", "Oklahoma"],
["919", "North Carolina"],
["920", "Wisconsin"],
["925", "California"],
["928", "Arizona"],
["931", "Tennessee"],
["936", "Texas"],
["937", "Ohio"],
["939", "Puerto Rico"],
["940", "Texas"],
["941", "Florida"],
["947", "Michigan"],
["949", "California"],
["952", "Minnesota"],
["954", "Florida"],
["956", "Texas"],
["959", "Connecticut"],
["970", "Colorado"],
["971", "Oregon"],
["972", "Texas"],
["973", "New Jersey"],
["975", "Missouri"],
["978", "Massachusetts"],
["979", "Texas"],
["980", "North Carolina"],
["984", "North Carolina"],
["985", "Louisiana"],
["989", "Michigan"]
];
</script>
<!-- In-memory JS array ends-->
<script type="text/javascript">
YAHOO.example.ACJSArray = function() {
var mylogger;
var oACDS,oACDS2;
var oAutoComp,oAutoComp2;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
//oAutoComp.typeAhead = true;
oAutoComp.useShadow = true;
oAutoComp.minQueryLength = 0;
oAutoComp.textboxFocusEvent.subscribe(function(){oAutoComp.sendQuery("");});
// Instantiate second JS Array DataSource
oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
// Instantiate second AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
//oAutoComp2.typeAhead = true;
oAutoComp2.useShadow = true;
oAutoComp2.forceSelection = true;
oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

274
www/extras/yui/examples/autocomplete/states_jsfunction.html Normal file
View file

@ -0,0 +1,274 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - JavaScript Function (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
#statesmod {position:relative;padding:1em;}
#statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/
#statesinput {position:absolute;width:100%;height:1.4em;}
#statescontainer {position:absolute;top:1.7em;width:100%;}
#statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JavaScript Function</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<p>This example uses a DS_JSFunction DataSource with a JavaScript function
that returns data as an array of strings. Since the data for this example is
already loaded into memory, queries should be very fast to return data.
Therefore, the AutoComplete instance is configured to have a query delay of
zero seconds.</p>
<p>In this example, the AutoComplete instance is able to keep its container
always open by customizing the appropriate CSS styles and enabling the
<code>alwaysShowContainer</code> property. Hooking into the custom events
<code>containerExpandEvent</code> and <code>containerCollapseEvent</code>
and calling the <code>setHeader</code>, <code>setBody</code>, and
<code>setFooter</code> methods dynamically updates the contents of the open
container.</p>
<p>The container can be customized to display multiple data fields by
customizing the AutoComplete's <code>formatResults</code> method.</p>
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
<h2>Filter the US states:</h2>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code" style="margin-top:15em;">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#statesmod {position:relative;padding:1em;}
#statesautocomplete {position:relative;margin:1em;width:15em;}/* set width of widget here*/
#statesinput {position:absolute;width:100%;height:1.4em;}
#statescontainer {position:absolute;top:1.7em;width:100%;}
#statescontainer .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
<h2>Filter the US states:</h2>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function getStates(sQuery) {
aResults = [];
if(sQuery && sQuery.length > 0) {
var charKey = sQuery.substring(0,1).toLowerCase();
var oResponse = dataset[charKey];
if(oResponse) {
for(var i = oResponse.length-1; i >= 0; i--) {
var sKey = oResponse[i].STATE;
var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
// Query found at the beginning of the key string for STARTSWITH
// returns an array of arrays where STATE is index=0, ABBR is index=1
if(sKeyIndex === 0) {
aResults.unshift([sKey, oResponse[i].ABBR]);
}
}
return aResults;
}
}
// Empty queries return all states
else {
for(var letter in dataset) {
var oResponse = dataset[letter];
for(var i = oResponse.length-1; i >= 0; i--) {
aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
}
}
return aResults;
}
}
var dataset =
{'a': [{"STATE" : "Alabama", "ABBR" : "AL"},
{"STATE" : "Alaska", "ABBR" : "AK"},
{"STATE" : "Arizona", "ABBR" : "AZ"},
{"STATE" : "Arkansas", "ABBR" : "AR"}],
'b' : [
],
'c' : [
{"STATE" : "California", "ABBR" : "CA"},
{"STATE" : "Colorado", "ABBR" : "CO"},
{"STATE" : "Connecticut", "ABBR" : "CT"}] // Entire dataset not shown
};
YAHOO.example.ACJSFunction = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate JS Function DataSource
oACDS = new YAHOO.widget.DS_JSFunction(getStates);
oACDS.maxCacheEntries = 0;
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.alwaysShowContainer = true;
oAutoComp.queryDelay = 0;
oAutoComp.minQueryLength = 0;
oAutoComp.maxResultsDisplayed = 50;
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Subscribe to Custom Events
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
// Set initial content in the container
oAutoComp.sendQuery("");
},
// Define Custom Event handlers
myOnDataReturn: function(sType, aArgs) {
var oAutoComp = aArgs[0];
var sQuery = aArgs[1];
var aResults = aArgs[2];
if(aResults.length == 0) {
oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
}
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<!-- In-memory JS dataset begins-->
<script type="text/javascript" src="./js/states_jsfunction.js"></script>
<!-- In-memory JS dataset ends-->
<script type="text/javascript">
YAHOO.example.ACJSFunction = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate JS Function DataSource
oACDS = new YAHOO.widget.DS_JSFunction(getStates);
oACDS.maxCacheEntries = 0;
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.alwaysShowContainer = true;
oAutoComp.queryDelay = 0;
oAutoComp.minQueryLength = 0;
oAutoComp.maxResultsDisplayed = 50;
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Subscribe to Custom Events
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
// Set initial content in the container
oAutoComp.sendQuery("");
},
// Define Custom Event handlers
myOnDataReturn: function(sType, aArgs) {
var oAutoComp = aArgs[0];
var sQuery = aArgs[1];
var aResults = aArgs[2];
if(aResults.length == 0) {
oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
}
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

279
www/extras/yui/examples/autocomplete/ysearch_flat.html Normal file
View file

@ -0,0 +1,279 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - Flat-file Data (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchinput0, #ysearchinput1, #ysearchinput2 {_position:absolute;width:100%;height:1.4em;} /* abs for ie quirks */
#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}
#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flat-file Data</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<p>This example's XHR DataSource instance points to a custom PHP script that
returns flat-file data. The DataSource schema is used to parse the tab- and
linebreak-delimited data. For maximum cache performance, the
<code>queryMatchSubset</code> property has been enabled, and the cache
itself has been turned up to 60 entries for fewer round trips to the server.
</p>
<p>On this page there are three separate AutoComplete instances that all
point to a single DataSource, which further maximizes cache efficiency.
Queries can be delimited using the semi-colon (;) character. For
demonstration purposes, each instance decreases the query delay slightly,
and each instance presents the return data in the container using slightly
different markup.</p>
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
<h2>Yahoo! Search (1 sec query delay):</h2>
<div id="ysearchautocomplete0">
<input id="ysearchinput0">
<div id="ysearchcontainer0"></div>
</div>
<h2>Yahoo! Search (0.5 sec query delay):</h2>
<div id="ysearchautocomplete1">
<input id="ysearchinput1">
<div id="ysearchcontainer1"></div>
</div>
<h2>Yahoo! Search (0 sec query delay):</h2>
<div id="ysearchautocomplete2">
<input id="ysearchinput2">
<div id="ysearchcontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */
#ysearchinput0, #ysearchinput1, #ysearchinput2 {_position:absolute;width:100%;height:1.4em;} /* abs for ie quirks */
#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}
#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
<h2>Yahoo! Search (1 sec query delay):</h2>
<div id="ysearchautocomplete0">
<input id="ysearchinput0">
<div id="ysearchcontainer0"></div>
</div>
<h2>Yahoo! Search (0.5 sec query delay):</h2>
<div id="ysearchautocomplete1">
<input id="ysearchinput1">
<div id="ysearchcontainer1"></div>
</div>
<h2>Yahoo! Search (0 sec query delay):</h2>
<div id="ysearchautocomplete2">
<input id="ysearchinput2">
<div id="ysearchcontainer2"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate one XHR DataSource and define schema as an array:
// ["Record Delimiter",
// "Field Delimiter"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
oACDS.maxCacheEntries = 60;
oACDS.queryMatchSubset = true;
// Instantiate first AutoComplete
var myInput = document.getElementById('ysearchinput0');
var myContainer = document.getElementById('ysearchcontainer0');
oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
oAutoComp0.delimChar = ";";
oAutoComp0.queryDelay = 1;
oAutoComp0.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div id='ysearchresult'><div class='ysearchquery'>",
nQuantity,
"</div><span style='font-weight:bold'>",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate second AutoComplete
oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);
oAutoComp1.delimChar = ";";
oAutoComp1.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div class='ysearchresult'><div class='ysearchquery'>",
nQuantity,
"</div><span style='color:red'>",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate third AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);
oAutoComp2.delimChar = ";";
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.ACFlatData = function(){
var mylogger;
var oACDS;
var oAutoComp0,oAutoComp1,oAutoComp2;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate one XHR DataSource and define schema as an array:
// ["Record Delimiter",
// "Field Delimiter"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
oACDS.maxCacheEntries = 60;
oACDS.queryMatchSubset = true;
// Instantiate first AutoComplete
var myInput = document.getElementById('ysearchinput0');
var myContainer = document.getElementById('ysearchcontainer0');
oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
oAutoComp0.delimChar = ";";
oAutoComp0.queryDelay = 1;
oAutoComp0.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div id='ysearchresult'><div class='ysearchquery'>",
nQuantity,
"</div><span style='font-weight:bold'>",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate second AutoComplete
oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);
oAutoComp1.delimChar = ";";
oAutoComp1.formatResult = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div class='ysearchresult'><div class='ysearchquery'>",
nQuantity,
"</div><span style='color:red'>",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate third AutoComplete
oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);
oAutoComp2.delimChar = ";";
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlatData.init);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

180
www/extras/yui/examples/autocomplete/ysearch_json.html Normal file
View file

@ -0,0 +1,180 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - Basic JSON Data (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {text-align:center;}
#ysearchinput {width:20em;height:1.4em;}
#ysearchcontainer {position:absolute;z-index:9050;}
#ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Basic JSON Data</h1>
</div>
<div id="bd">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
<label>Yahoo! Search</label>
<input id="ysearchinput">
<input id="ysearchsubmit" type="submit" value="Submit Query">
<div id="ysearchcontainer"></div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<p>This example's DataSource instance points to Yahoo! Search Web Services,
which returns JSON data via a simple PHP proxy. The DataSource schema will
parse the data found in the object literal for fields named "Title",
"Summary", and "Cache". In order for the Yahoo! Search application to return
valid data, the DataSource property <code>scriptQueryAppend</code> is used
to pass along all the required query parameters, and the property
<code>queryMatchContains</code> has been enabled.</p>
<p>To achieve the shrink-wrapped centered search module, not only have custom CSS
been applied, but the the <code>doBeforeExpandContainer</code> method has also been
customized to position the container directly below the input field.
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#ysearchmod {text-align:center;}
#ysearchinput {width:20em;height:1.4em;}
#ysearchcontainer {position:absolute;z-index:9050;}
#ysearchcontainer .yui-ac-content {position:absolute;left:0;top:0;width:20em;border:1px solid #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
<label>Yahoo! Search</label>
<input id="ysearchinput">
<input id="ysearchsubmit" type="submit" value="Submit Query">
<div id="ysearchcontainer"></div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["ResultSet.Result","Title"]);
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
oAutoComp.useShadow = true;
oAutoComp.formatResult = function(oResultItem, sQuery) {
return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
};
oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
var pos = YAHOO.util.Dom.getXY(oTextbox);
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
YAHOO.util.Dom.setXY(oContainer,pos);
return true;
};
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="./js/json.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.ACJson = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
// Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["ResultSet.Result","Title"]);
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
oAutoComp.useShadow = true;
oAutoComp.formatResult = function(oResultItem, sQuery) {
return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
};
oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
var pos = YAHOO.util.Dom.getXY(oTextbox);
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
YAHOO.util.Dom.setXY(oContainer,pos);
return true;
};
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

164
www/extras/yui/examples/autocomplete/ysearch_xml.html Normal file
View file

@ -0,0 +1,164 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: AutoComplete - Basic XML Data (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#ysearchinput {position:absolute;width:100%;height:1.4em;}
#ysearchcontainer {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Basic XML Data</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to Yahoo! Search Web Services, via a
simple PHP proxy. The DataSource schema is defined for XML data. In order
to be compatible with the Yahoo! Search application, the DataSource's
queryMatchContains is set to true, and the scriptQueryAppend has been
defined to pass in additional arguments.</p>
<h3>AutoComplete</h3>
<p>This AutoComplete instance uses only default configuration values.</p>
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
<h2>Yahoo! Search</h2>
<div id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<p>CSS:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
#ysearchmod {position:relative;padding:1em;}
#ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
#ysearchinput {position:absolute;width:100%;height:1.4em;}
#ysearchcontainer {position:absolute;top:1.7em;width:100%;}
#ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#ysearchcontainer ul {padding:5px 0;width:100%;}
#ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#ysearchcontainer li.yui-ac-highlight {background:#ff0;}
</textarea>
<p>Markup:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACXml.validateForm();">
<h2>Yahoo! Search</h2>
<div id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</textarea>
<p>JavaScript:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result", "Title"]);
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
</textarea>
</div>
<!-- Code sample ends -->
</div>
<!-- Content ends -->
<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event-debug.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.ACXml = function(){
var mylogger;
var oACDS;
var oAutoComp;
return {
init: function() {
//Logger
mylogger = new YAHOO.widget.LogReader("logger");
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result", "Title"]);
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
},
validateForm: function() {
// Validate form inputs here
return false;
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACXml.init);
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

180
www/extras/yui/examples/button/example01.html Normal file
View file

@ -0,0 +1,180 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Push Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- Logger CSS -->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset,
fieldset div {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
.yuibutton#pushbutton2 button,
.yuibutton#pushbutton5 button,
.yuibutton#pushbutton8 button {
background:url(img/add.gif) center center no-repeat;
text-indent:-4em;
overflow:hidden;
padding:.25em .75em;
width:2em;
*margin-left:4em; /* IE only */
*padding:.25em 1.75em; /* IE only */
}
.yuibutton#pushbutton3 button,
.yuibutton#pushbutton6 button,
.yuibutton#pushbutton9 button {
padding-left:2em;
background:url(img/add.gif) 10% 50% no-repeat;
}
div#logs {
margin-top:1em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Logger source file -->
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "click" event handler for each Button instance
function onButtonClick(p_oEvent) {
YAHOO.log("You clicked button: " + this.get("id"), "info", "example1");
}
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset>
function onPushButtonsMarkupReady() {
// Create Buttons using existing <input> elements as a data source
var oPushButton1 = new YAHOO.widget.Button("pushbutton1src", { id:"pushbutton1" });
oPushButton1.on("click", onButtonClick);
var oPushButton2 = new YAHOO.widget.Button("pushbutton2src", { id:"pushbutton2", onclick: { fn: onButtonClick } });
var oPushButton3 = new YAHOO.widget.Button("pushbutton3src", { id:"pushbutton3", onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup
var oPushButton4 = new YAHOO.widget.Button("pushbutton4");
oPushButton4.on("click", onButtonClick);
var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } });
var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } });
}
YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", onPushButtonsMarkupReady);
// Create Buttons without using existing markup
var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" });
oPushButton7.on("click", onButtonClick);
var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
// "available" event handler for the "logs" <div>
function onLogsAvailable() {
var oLogReader = new YAHOO.widget.LogReader("logs");
}
YAHOO.util.Event.onAvailable("logs", onLogsAvailable);
} ();
</script>
</head>
<body>
<h1>Example: Push Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example01.html">
<fieldset id="pushbuttons">
<legend>Push Buttons</legend>
<fieldset id="pushbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<input type="button" id="pushbutton1src" name="button1" value="Add">
<input type="button" id="pushbutton2src" name="button2" value="Add">
<input type="button" id="pushbutton3src" name="button3" value="Add">
</div>
<div>
<span id="pushbutton4" class="yuibutton"><span class="first-child"><button type="button" name="button4">Add</button></span></span>
<span id="pushbutton5" class="yuibutton"><span class="first-child"><button type="button" name="button5">Add</button></span></span>
<span id="pushbutton6" class="yuibutton"><span class="first-child"><button type="button" name="button6">Add</button></span></span>
</div>
</fieldset>
<fieldset id="pushbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<div id="logs"></div>
</body>
</html>

116
www/extras/yui/examples/button/example02.html Normal file
View file

@ -0,0 +1,116 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Link Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
h2 { margin:.5em 0; }
div {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
#linkbutton2 a,
#linkbutton5 a {
background:url(img/yahoo.gif) center center no-repeat;
text-indent:-5em;
overflow:hidden;
padding:.25em 1em;
*margin-left:5em; /* IE only */
_padding:.25em 2em; /* IE < 7 only */
}
#linkbutton3 a,
#linkbutton6 a {
padding-left:2em;
background:url(img/yahoo.gif) 10% 50% no-repeat;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "linkbuttonsfrommarkup" <div>
function onLinkButtonsMarkupReady() {
// Create Buttons from existing markup
var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");
}
YAHOO.util.Event.onContentReady("linkbuttonsfrommarkup", onLinkButtonsMarkupReady);
// Create Buttons without using existing markup
var oLinkButton4 = new YAHOO.widget.Button({ type:"link", id:"linkbutton4", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
var oLinkButton5 = new YAHOO.widget.Button({ type:"link", id:"linkbutton5", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
var oLinkButton6 = new YAHOO.widget.Button({ type:"link", id:"linkbutton6", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
} ();
</script>
</head>
<body>
<h1>Example: Link Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<div id="example">
<div id="linkbuttonsfrommarkup">
<h2>From Markup</h2>
<span id="linkbutton1"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
<span id="linkbutton2"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
<span id="linkbutton3"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
</div>
<div id="linkbuttonsfromjavascript">
<h2>From JavaScript</h2>
</div>
</div>
</body>
</html>

122
www/extras/yui/examples/button/example03.html Normal file
View file

@ -0,0 +1,122 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Checkbox Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset,
fieldset div {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
function onCheckboxButtonsMarkupReady() {
// Create Buttons using existing <input> elements as a data source
var oCheckButton1 = new YAHOO.widget.Button("checkbutton1src", { id:"checkbutton1", label:"One" });
var oCheckButton2 = new YAHOO.widget.Button("checkbutton2src", { id:"checkbutton2", label:"Two" });
var oCheckButton3 = new YAHOO.widget.Button("checkbutton3src", { id:"checkbutton3", label:"Three" });
var oCheckButton4 = new YAHOO.widget.Button("checkbutton4src", { id:"checkbutton4", label:"Four" });
// Create Buttons using the YUI Button markup
var oCheckButton5 = new YAHOO.widget.Button("checkbutton5", { type:"checkbox", value:"1", checked:true });
var oCheckButton6 = new YAHOO.widget.Button("checkbutton6", { type:"checkbox", value:"2"});
var oCheckButton7 = new YAHOO.widget.Button("checkbutton7", { type:"checkbox", value:"3" });
var oCheckButton8 = new YAHOO.widget.Button("checkbutton8", { type:"checkbox", value:"4" });
}
YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", onCheckboxButtonsMarkupReady);
// Create Buttons without using existing markup
var oCheckButton9 = new YAHOO.widget.Button({ type:"checkbox", label:"One", id:"checkbutton9", name:"checkboxfield3", value:"1", container:"checkboxbuttonsfromjavascript", checked:true });
var oCheckButton10 = new YAHOO.widget.Button({ type:"checkbox", label:"Two", id:"checkbutton10", name:"checkboxfield3", value:"2", container:"checkboxbuttonsfromjavascript" });
var oCheckButton11 = new YAHOO.widget.Button({ type:"checkbox", label:"Three", id:"checkbutton11", name:"checkboxfield3", value:"3", container:"checkboxbuttonsfromjavascript" });
var oCheckButton12 = new YAHOO.widget.Button({ type:"checkbox", label:"Four", id:"checkbutton12", name:"checkboxfield3", value:"4", container:"checkboxbuttonsfromjavascript" });
} ();
</script>
</head>
<body>
<h1>Example: Checkbox Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example03.html">
<fieldset id="checkboxbuttons">
<legend>Checkbox Buttons</legend>
<fieldset id="checkboxbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<input id="checkbutton1src" type="checkbox" name="checkboxfield1" value="1" checked>
<input id="checkbutton2src" type="checkbox" name="checkboxfield1" value="2">
<input id="checkbutton3src" type="checkbox" name="checkboxfield1" value="3">
<input id="checkbutton4src" type="checkbox" name="checkboxfield1" value="4">
</div>
<div>
<span id="checkbutton5" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">One</button></span></span>
<span id="checkbutton6" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">Two</button></span></span>
<span id="checkbutton7" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">Three</button></span></span>
<span id="checkbutton8" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">Four</button></span></span>
</div>
</fieldset>
<fieldset id="checkboxbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
<div>
<input type="reset" name="resetbutton" value="Reset Form">
<input type="submit" name="submitbutton" value="Submit Form">
</div>
</form>
</body>
</html>

171
www/extras/yui/examples/button/example04.html Normal file
View file

@ -0,0 +1,171 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Radio Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- Logger CSS -->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset,
fieldset div {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
div#logs {
margin-top:1em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Logger source file -->
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "checkedButtonChange" event handler for each ButtonGroup instance
function onCheckedButtonChange(p_oEvent) {
if(p_oEvent.prevValue) {
YAHOO.log(p_oEvent.prevValue.get("name"), "info", "example4");
}
if(p_oEvent.newValue) {
YAHOO.log(p_oEvent.newValue.get("name"), "info", "example4");
}
}
// "contentready" event handler for the "radiobuttonsfrommarkup" <fieldset>
function onRadioButtonMarkupReady() {
var oButtonGroup1 = new YAHOO.widget.ButtonGroup("buttongroup1");
oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);
var oButtonGroup2 = new YAHOO.widget.ButtonGroup("buttongroup2");
oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);
}
YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup", onRadioButtonMarkupReady);
// Create a ButtonGroup without using existing markup
var oButtonGroup3 = new YAHOO.widget.ButtonGroup({ id: "buttongroup3", name: "radiofield3", container:"radiobuttonsfromjavascript" });
oButtonGroup3.addButtons([
{ label:"Radio 9", value:"Radio 9", checked:true },
{ label:"Radio 10", value:"Radio 10" },
{ label:"Radio 11", value:"Radio 11" },
{ label:"Radio 12", value:"Radio 12" }
]);
oButtonGroup3.on("checkedButtonChange", onCheckedButtonChange);
// "available" event handler for the "logs" <div>
function onLogsAvailable() {
var oLogReader = new YAHOO.widget.LogReader("logs");
}
YAHOO.util.Event.onAvailable("logs", onLogsAvailable);
} ();
</script>
</head>
<body>
<h1>Example: Radio Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example04.html">
<fieldset id="radiobuttons">
<legend>Radio Buttons</legend>
<fieldset id="radiobuttonsfrommarkup">
<legend>From Markup</legend>
<div id="buttongroup1">
<input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked>
<input id="radio2" type="radio" name="radiofield1" value="Radio 2">
<input id="radio3" type="radio" name="radiofield1" value="Radio 3">
<input id="radio4" type="radio" name="radiofield1" value="Radio 4">
</div>
<div id="buttongroup2">
<span id="radio5" class="yuibutton checked"><span class="first-child"><button type="button" name="radiofield2" value="Radio 5">Radio 5</button></span></span>
<span id="radio6" class="yuibutton"><span class="first-child"><button type="button" name="radiofield2" value="Radio 6">Radio 6</button></span></span>
<span id="radio7" class="yuibutton"><span class="first-child"><button type="button" name="radiofield2" value="Radio 7">Radio 7</button></span></span>
<span id="radio8" class="yuibutton"><span class="first-child"><button type="button" name="radiofield2" value="Radio 8">Radio 8</button></span></span>
</div>
</fieldset>
<fieldset id="radiobuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
<div>
<input type="reset" name="resetbutton" value="Reset Form">
<input type="submit" name="submitbutton" value="Submit Form">
</div>
</form>
<div id="logs"></div>
</body>
</html>

139
www/extras/yui/examples/button/example05.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Submit Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset,
fieldset div {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "submitbuttonsfrommarkup" <fieldset>
function onSubmitButtonsMarkupReady() {
// Create a Button using an existing <input> element as a data source
var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1src", { id:"submitbutton1" });
// Create a Button using the YUI Button markup
var oSubmitButton2 = new YAHOO.widget.Button("submitbutton2", { type:"submit", value: "submitbutton2value" });
}
YAHOO.util.Event.onContentReady("submitbuttonsfrommarkup", onSubmitButtonsMarkupReady);
// Create a Button without using existing markup
var oSubmitButton3 = new YAHOO.widget.Button({ type:"submit", label:"Submit Form", id:"submitbutton3", name:"submitbutton3", value: "submitbutton3value", container:"submitbuttonsfromjavascript" });
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("example", "submit", onExampleSubmit);
} ();
</script>
</head>
<body>
<h1>Example: Submit Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example05.html">
<fieldset>
<legend>Info</legend>
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
<label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<div>
<label for="male">Gender: </label>
<label for="male">Male </label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="female">Female </label>
<input type="radio" id="female" name="gender" value="female">
</div>
<div>
<label for="month">Birthday: </label>
<select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
<select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
<input type="text" name="year" value="">
</div>
</fieldset>
<fieldset id="submitbuttons">
<legend>Submit Buttons</legend>
<fieldset id="submitbuttonsfrommarkup">
<legend>From Markup</legend>
<input id="submitbutton1src" type="submit" name="submitfield1" value="Submit Form">
<span id="submitbutton2" class="yuibutton"><span class="first-child"><button type="button" name="submitfield2">Submit Form</button></span></span>
</fieldset>
<fieldset id="submitbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
</body>
</html>

125
www/extras/yui/examples/button/example06.html Normal file
View file

@ -0,0 +1,125 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Reset Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset,
fieldset div {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "resetbuttonsfrommarkup" <fieldset>
function onResetButtonsMarkupReady() {
// Create a Button using an existing <input> element as a data source
var oResetButton1 = new YAHOO.widget.Button("resetbutton1src", { id:"resetbutton1" });
// Create a Button using the YUI Button markup
var oResetButton2 = new YAHOO.widget.Button("resetbutton2", { type:"reset" });
}
YAHOO.util.Event.onContentReady("resetbuttonsfrommarkup", onResetButtonsMarkupReady);
// Create a Button without using existing markup
var oResetButton3 = new YAHOO.widget.Button({ type:"reset", label:"Reset Form", id:"resetfield3", container: "resetbuttonsfromjavascript" });
} ();
</script>
</head>
<body>
<h1>Example: Reset Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example06.html">
<fieldset>
<legend>Info</legend>
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
<label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<div>
<label for="male">Gender: </label>
<label for="male">Male </label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="female">Female </label>
<input type="radio" id="female" name="gender" value="female">
</div>
<div>
<label for="month">Birthday: </label>
<select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
<select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
<input type="text" name="year" value="">
</div>
</fieldset>
<fieldset id="resetbuttons">
<legend>Reset Buttons</legend>
<fieldset id="resetbuttonsfrommarkup">
<legend>From Markup</legend>
<input id="resetbutton1src" type="reset" name="resetfield1" value="Reset Form">
<span id="resetbutton2" class="yuibutton"><span class="first-child"><button type="button" name="resetfield2">Reset Form</button></span></span>
</fieldset>
<fieldset id="resetbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
</body>
</html>

150
www/extras/yui/examples/button/example07.html Normal file
View file

@ -0,0 +1,150 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Menu Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- Menu CSS -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Container Core Library -->
<script type="text/javascript" src="../../build/container/container_core.js"></script>
<!-- Menu Library -->
<script type="text/javascript" src="../../build/menu/menu.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
function onMenuButtonsMarkupReady() {
// Create a Button using an existing <input> element as a data source
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menubutton", menu: "menubutton1select" });
// Create a Button using the YUI Button markup
var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menubutton", menu: "menubutton2select" });
}
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", onMenuButtonsMarkupReady)
// "click" event handler for each item in the Button's menu
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
oMenuButton3.set("label", p_oItem.cfg.getProperty("text"));
}
// Create a Button without using existing markup
var aMenuButton3Menu = [
{ text: "one", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "three", value: 3, onclick: { fn: onMenuItemClick } }
];
var oMenuButton3 = new YAHOO.widget.Button({ type: "menubutton", label: "one", name:"mymenubutton", menu: aMenuButton3Menu, container: "menubuttonsfromjavascript" });
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("example", "submit", onExampleSubmit);
} ();
</script>
</head>
<body>
<h1>Example: Menu Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example07.html">
<fieldset id="menubuttons">
<legend>Menu Buttons</legend>
<fieldset id="menubuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="menubutton1" name="menubutton1" value="Menu Button 1">
<select id="menubutton1select" name="menubutton1select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton2" name="menubutton2" value="Menu Button 2">
<select id="menubutton2select" name="menubutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
</fieldset>
<fieldset id="menubuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
</body>
</html>

142
www/extras/yui/examples/button/example08.html Normal file
View file

@ -0,0 +1,142 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Split Buttons (YUI Library)</title>
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- Menu CSS -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
<!-- CSS for Button -->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
<!-- Page-specific styles -->
<style type="text/css">
body { margin:.5em; }
h1 { font-weight:bold; }
fieldset {
border:2px groove #ccc;
margin:.5em;
padding:.5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<!-- Container Core Library -->
<script type="text/javascript" src="../../build/container/container_core.js"></script>
<!-- Menu Library -->
<script type="text/javascript" src="../../build/menu/menu.js"></script>
<!-- Button source file -->
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
<!-- Page-specific JavaScript -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
function onSplitButtonsMarkupReady() {
// Create a Button using an existing <input> element as a data source
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "splitbutton", menu: "splitbutton1select" });
// Create a Button using the YUI Button markup
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "splitbutton", menu: "splitbutton2select" });
}
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", onSplitButtonsMarkupReady);
// Create a Button without using existing markup
var aSplitButton3Menu = [
{ text: "one", value: 1 },
{ text: "two", value: 2 },
{ text: "three", value: 3 }
];
var oSplitButton3 = new YAHOO.widget.Button({ type: "splitbutton", label: "Split Button 3", menu: aSplitButton3Menu, container: "splitbuttonsfromjavascript" });
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("example", "submit", onExampleSubmit);
} ();
</script>
</head>
<body>
<h1>Example: Split Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
<form id="example" name="example" method="post" action="example08.html">
<fieldset id="splitbuttons">
<legend>Split Buttons</legend>
<fieldset id="splitbuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="splitbutton1" name="splitbutton1" value="Split Button 1">
<select id="splitbutton1select" name="splitbutton1select" multiple>
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton2" name="splitbutton2" value="Split Button 2">
<select id="splitbutton2select" name="splitbutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
</fieldset>
<fieldset id="splitbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
</body>
</html>

BIN
www/extras/yui/examples/button/img/add.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 974 B

BIN
www/extras/yui/examples/button/img/yahoo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 175 B

42
www/extras/yui/examples/button/index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Examples: Button (YUI Library)</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../docs/assets/examples.css">
<style type="text/css">
ul {
margin:0 40px;
}
li {
margin-bottom:1em;
}
li a {
font:85% verdana;
}
li a:link {
color:#666;
}
</style>
</head>
<body>
<div id="doc">
<div id="hd">
<img src="../../docs/assets/logo.gif" alt="Yahoo!">
<h1>Examples: Button (YUI Library)</h1>
</div>
<div id="bd">
<ul>
<li><a href="example01.html">Push Buttons</a></li> <li><a href="example02.html">Link Buttons</a></li> <li><a href="example03.html">Checkbox Buttons</a></li> <li><a href="example04.html">Radio Buttons</a></li> <li><a href="example05.html">Submit Buttons</a></li> <li><a href="example06.html">Reset Buttons</a></li> <li><a href="example07.html">Menu Buttons</a></li> <li><a href="example08.html">Split Buttons</a></li> </ul>
</div>
</div>
</body>
</html>

62
www/extras/yui/examples/calendar/assets/style.css Normal file
View file

@ -0,0 +1,62 @@
body { padding:0 }
a {color:#0000de;}
a:visited {color:#639}
a:active {color: #f00;}
p {color:#000; margin-bottom:1em }
strong { font-weight:bold }
em { font-style:italic }
#hd a#logo { display:block;margin:10px;width:378px; }
#hd a#logo div { background:url(yui.gif) no-repeat;height:34px; }
#hd h1 { font-weight:bold;text-indent:15px;background: url(http://us.i1.yimg.com/us.yimg.com/i/ydn/bg_hd.gif) 0 0 repeat-x #B6CDE1; border:1px solid #93B2CC; position:relative;font-size:110%;padding:5px 0;margin:0 auto;}
#hd { margin-bottom:10px }
#toc { background-color:#ecf5fa; padding:0; border:1px solid #89d;overflow:hidden;zoom:1}
#toc ul {list-style:none; margin:0; padding:0; font-size:90%;}
#toc ul li { height:100%;padding:0;margin:0;*margin:0 0 -3px;*zoom:1; }
#toc ul li a { margin:0;display:block;padding:5px 2px 5px 5px; text-decoration:none; }
#toc ul li a:hover { color:#fff; background-color:#3c3cb7; }
#toc ul li.selected { font-weight:bold; color:#fff; background:#666; padding:0; }
#toc ul li.selected a { color:#fff; }
#toc ul li.selected a:hover { font-weight:bold; color:#fff; background:#3c3cb7; }
#toc ul li.child { background-color:#ddd }
#toc ul li.child a { margin:0;display:block; padding:5px 2px 5px 20px; text-decoration:none; }
#toc ul li.active { font-weight:bold; color:#000; }
#toc ul li.active a { color:#000; }
#toc ul li a.printer { padding:0;margin-right:2px;margin-top:-1.5em;display:none;float:right;height:12px;width:12px; }
#toc ul li.selected a.printer { display:block;background:url(http://us.i1.yimg.com/us.yimg.com/i/us/aut/pltfrm/ic/print_12.gif) no-repeat;cursor:pointer; }
#toc ul li.selected a.printer:hover { background:url(http://us.i1.yimg.com/us.yimg.com/i/us/aut/pltfrm/ic/print_12.gif) no-repeat;cursor:pointer; }
#toc ul li em { display:none; }
#toc ul li.sect { font-weight:bold; color:#fff; background:#ccc; }
#toc ul li.sect a { color:#333 }
#toc ul li.sect a:hover { color:#fff }
#bd { margin-left:15px; }
#bd .dp-highlighter { margin:10px 0 15px }
#bd h1 { line-height:1.2em; color:#E76300; font-size:120%; margin:0 0 12px;}
#bd h2 { line-height:1.2em; color:#E76300; font-size:110%; margin:0 0 10px;}
#bd ul.properties { width:85%;margin:20px auto; }
#bd ul.properties li { margin:1em 0; }
#stepnav { font-size:100%; margin:25px 0 0 15px }
#stepnav .back { margin-right:15px }
#solution { margin-left:15px; }
#solution a { display:block;margin-top:7px;margin-bottom:20px }
#solution { zoom:1 }
#ft { height:2px;line-height:2px;text-indent:15px; background:#B6CDE1;margin:10px auto;clear:both}
#landing { margin-left:1em }
#landing h3 { font-size:105%;margin-bottom:.5em }
#landing p { margin-left:1em }
.dp-highlighter { width:96% }

BIN
www/extras/yui/examples/calendar/assets/yui.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

79
www/extras/yui/examples/calendar/dual/1.html Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Dual Calendars (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Dual Calendars</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item selected"><a href="1.html">Dual Calendars</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar can be displayed in a two-page format by using the CalendarGroup class. The dependencies (the <a href="http://developer.yahoo.com/yui/yahoo/">YAHOO Global object</a>, the <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>, and the <a href="http://developer.yahoo.com/yui/dom/">DOM Collection</a>) and markup structure are identical to the basic Calendar (outlined in the <a href="../quickstart/1.html">Quickstart Tutorial</a>).</p>
<p>Having included the necessary script files and placed the requisite markup on the page, we can easily invoke a Dual Calendar display by creating a CalendarGroup instance (see line 5 below); in our previous examples, we've instantiated Calendar to show a single calendar month. CalendarGroup allows us to specify a n-month display. By default, a CalendarGroup instance will show two months at a time.</p>
<p>The only notable difference, illustrated in the code block below, is the use of the CalendarGroup class when instantiating the Calendar:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/dual/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Dual Calendars (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Dual Calendars</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item selected"><a href="1.html">Dual Calendars</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:400px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

32
www/extras/yui/examples/calendar/dual/solution.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

96
www/extras/yui/examples/calendar/events/1.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Handling Events (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Handling Events</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item selected"><a href="1.html">Handling Events</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar provides several events to which an application can subscribe in order to react easily to changes in the state of the Calendar. The events provided are:</p>
<ul class="properties">
<li><strong>beforeRenderEvent</strong> - Fired prior to the rendering of the Calendar</li>
<li><strong>renderEvent</strong> - Fired after the Calendar is rendered</li>
<li><strong>beforeSelectEvent</strong> - Fired before a selection is made</li>
<li><strong>selectEvent</strong> - Fired after a date selection is made. This event receives one argument -- an array of dates fields in the format: [[yyyy,mm,dd],[yyyy,mm,dd]]</li>
<li><strong>beforeDeselectEvent</strong> - Fired before a deselection is made</li>
<li><strong>deselectEvent</strong> - Fired after dates are deselected. This event receives one argument -- an array of dates fields in the format: [[yyyy,mm,dd],[yyyy,mm,dd]]</li>
<li><strong>changePageEvent</strong> - Fired when the active Calendar page is changed</li>
<li><strong>clearEvent</strong> - Fired when the Calendar is cleared. Calling <em>clear</em> on a Calendar removes all of its selections and sets the page to the current month and year.</li>
<li><strong>resetEvent</strong> - Fired when the Calendar is reset. Calling a Calendar's <em>reset</em> method resets the Calendar to its original view and selection state.</li>
</ul>
<p>The events are each defined by YAHOO.util.CustomEvent, and are subscribed to using the <em>subscribe</em> method of CustomEvent. In this example, we will display an alert message each time a date is selected or deselected. The <em>selectEvent</em> and <em>deselectEvent</em> events will fire when selections and deselections are made via user interaction (eg, when a user clicks to select a date) or programatically (eg., if a script on the page executes the <em>select</em> method to select a date).</p>
<textarea name="code" class="HTML" cols="60" rows="1">
var mySelectHandler = function(type,args,obj) {
var selected = args[0];
alert("Selected: " + this._toDate(selected[0]));
};
var myDeselectHandler = function(type,args,obj) {
var selected = args[0];
alert("Deselected: " + this._toDate(selected[0]));
};
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.render();
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/events/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Handling Events (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Handling Events</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item selected"><a href="1.html">Handling Events</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution">
<iframe src="solution.html" style="width:225px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

46
www/extras/yui/examples/calendar/events/solution.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
var mySelectHandler = function(type,args,obj) {
var selected = args[0];
alert("Selected: " + this._toDate(selected[0]));
};
var myDeselectHandler = function(type,args,obj) {
var deselected = args[0];
alert("Deselected: " + this._toDate(deselected[0]));
};
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

150
www/extras/yui/examples/calendar/formsel/1.html Normal file
View file

@ -0,0 +1,150 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Calendar & Select Fields (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Calendar & Select Fields</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item selected"><a href="1.html">Calendar & Select Fields</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>In this example, we will build a Calendar that can accept selections on any date from 1/1/2006 to 12/31/2008, and we will set up a series of select boxes that can be used to change the selected date. First, we will construct the Calendar with the minimum and maximum dates specified:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ mindate:"1/1/2006",
maxdate:"12/31/2008" });
</textarea>
<p>Next, we will place our markup, which includes a standard container for the Calendar, and the select elements needed to change the date:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="cal1Container"></div>
<form name="dates">
<select id="selMonth" name="selMonth">
...
</select>
<select name="selDay" id="selDay">
...
</select>
<select name="selYear" id="selYear">
...
</select>
</form>
</textarea>
<p>Next, we must define a handler that will fire when the user changes the selected date on the Calendar. This function will be named <em>handleSelect</em>, and will be subscribed to the Calendar's <em>selectEvent</em>:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
var selMonth = document.getElementById("selMonth");
var selDay = document.getElementById("selDay");
var selYear = document.getElementById("selYear");
selMonth.selectedIndex = month;
selDay.selectedIndex = day;
for (var y=0;y<selYear.options.length;y++) {
if (selYear.options[y].text == year) {
selYear.selectedIndex = y;
break;
}
}
}
...
YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
</textarea>
<p>The <em>handleSelect</em> function receives an array of selected dates as an argument. Since this Calendar is only single-select, we will only need to retrieve the first (and only) item in the array. The date argument is passed as an easily sorted Integer array in the format: [yyyy, mm, dd]. The <em>handleSelect</em> function uses this array to properly select the corresponding values in each select field. Note that it's also necessary to subscribe the function to the <em>selectEvent</em> on the Calendar so that it will be fired when a selection is made.</p>
<p>Next, we will define a function called <em>updateCal</em>, which will be used to update the Calendar with the field values that are selected in each select field:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function updateCal() {
var selMonth = document.getElementById("selMonth");
var selDay = document.getElementById("selDay");
var selYear = document.getElementById("selYear");
var month = parseInt(selMonth.options[selMonth.selectedIndex].text);
var day = parseInt(selDay.options[selDay.selectedIndex].value);
var year = parseInt(selYear.options[selYear.selectedIndex].value);
if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
var date = month + "/" + day + "/" + year;
YAHOO.example.calendar.cal1.select(date);
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
YAHOO.example.calendar.cal1.render();
}
}
</textarea>
<p>The <em>updateCal</em> function does two key things. First, it grabs the selected values from the select fields and uses them to make a new selection on the Calendar. Next, it changes the visible page of the Calendar to the Calendar's earliest selected date, so that the selection will be clear to the user. We can wire up the select fields to call <em>updateCal</em> when selections are made using the Event utility. In our example, we will do this after initializing the Calendar:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
</textarea>
<p>It's worth noting that this example doesn't cover advanced features like date validation or randomly changing the selectable days based on the day of the month, so you are able to select invalid dates like February 31. Calendar automatically attempts to compensate for the extra invalid dates by moving the selection forward into the next month.</p>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/formsel/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Calendar & Select Fields (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Calendar & Select Fields</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item selected"><a href="1.html">Calendar & Select Fields</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:400px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

134
www/extras/yui/examples/calendar/formsel/solution.html Normal file
View file

@ -0,0 +1,134 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
var selMonth = document.getElementById("selMonth");
var selDay = document.getElementById("selDay");
var selYear = document.getElementById("selYear");
selMonth.selectedIndex = month;
selDay.selectedIndex = day;
for (var y=0;y<selYear.options.length;y++) {
if (selYear.options[y].text == year) {
selYear.selectedIndex = y;
break;
}
}
}
function updateCal() {
var selMonth = document.getElementById("selMonth");
var selDay = document.getElementById("selDay");
var selYear = document.getElementById("selYear");
var month = parseInt(selMonth.options[selMonth.selectedIndex].text);
var day = parseInt(selDay.options[selDay.selectedIndex].value);
var year = parseInt(selYear.options[selYear.selectedIndex].value);
if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
var date = month + "/" + day + "/" + year;
YAHOO.example.calendar.cal1.select(date);
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
YAHOO.example.calendar.cal1.render();
}
}
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ mindate:"1/1/2006",
maxdate:"12/31/2008" });
YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.render();
YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
<form name="dates">
<select id="selMonth" name="selMonth">
<option value="" selected> </option>
<option value="Jan">1</option>
<option value="Feb">2</option>
<option value="Mar">3</option>
<option value="Apr">4</option>
<option value="May">5</option>
<option value="Jun">6</option>
<option value="Jul">7</option>
<option value="Aug">8</option>
<option value="Sep">9</option>
<option value="Oct">10</option>
<option value="Nov">11</option>
<option value="Dec">12</option>
</select>
<select name="selDay" id="selDay">
<option value="" selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="selYear" id="selYear">
<option value="" selected> </option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>
</form>
</body>
</html>

122
www/extras/yui/examples/calendar/formtxt/1.html Normal file
View file

@ -0,0 +1,122 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Calendar & Text Fields (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Calendar & Text Fields</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item selected"><a href="1.html">Calendar & Text Fields</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>In this example, we will build a Calendar that can accept selections on any date from 1/1/2006 to 12/31/2008, and we will set up a text field that will be updated whenever the Calendar's selected date is changed. In addition, we will provide a button that can be used to update the Calendar with whatever date the user types into a text field provided on the page. Note that this example requires the dependencies outlined in the <a href="../quickstart/1.html">Quickstart Tutorial</a>. First, we will construct the Calendar with the minimum and maximum dates specified:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ mindate:"1/1/2006",
maxdate:"12/31/2008" });
</textarea>
<p>Next, we will place our markup, which includes a standard container for the Calendar, and the form with a text field and button:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="cal1Container"></div>
<form name="dates">
<input type="text" name="date1" id="date1" />
<button type="button" id="update">&lt; Update Calendar</button>
</form>
</textarea>
<p>Now, we must define a handler that will fire when the user changes the selected date on the Calendar. This function will be named <em>handleSelect</em>, and will be subscribed to the Calendar's <em>selectEvent</em>:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
var txtDate1 = document.getElementById("date1");
txtDate1.value = month + "/" + day + "/" + year;
}
...
YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
</textarea>
<p>The <em>handleSelect</em> function receives an array of selected dates as an argument. Since this Calendar is only single-select, we will only need to retrieve the first (and only) item in the array. The date argument is passed as an easily sorted Integer array in the format: [yyyy, mm, dd]. The <em>handleSelect</em> function takes these values and prints them into a text field which we will define in a later step. Note that it's also necessary to subscribe the function to the <em>selectEvent</em> on the Calendar so that it will be fired when a selection is made.</p>
<p>Next, we will define a function called <em>updateCal</em>, which will be used to update the Calendar with the value that is typed into the text field. This function will be called via a button that will be created in our markup a little later.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function updateCal() {
var txtDate1 = document.getElementById("date1");
// Select the date typed in the field
YAHOO.example.calendar.cal1.select(txtDate1.value);
var firstDate = YAHOO.example.calendar.cal1.getSelectedDates()[0];
// Set the Calendar's page to the earliest selected date
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
YAHOO.example.calendar.cal1.render();
}
</textarea>
<p>The <em>updateCal</em> function does two key things. First, it grabs the value from the text field and uses it to make a new selection on the Calendar. Next, it changes the visible page of the Calendar to the Calendar's earliest selected date, so that the selection will be clear to the user.</p>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/formtxt/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Calendar & Text Fields (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Calendar & Text Fields</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item selected"><a href="1.html">Calendar & Text Fields</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:400px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

75
www/extras/yui/examples/calendar/formtxt/solution.html Normal file
View file

@ -0,0 +1,75 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<style>
#update { display:block; }
#date1 { width:100px }
</style>
<script>
YAHOO.namespace("example.calendar");
function handleSelect(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
var txtDate1 = document.getElementById("date1");
txtDate1.value = month + "/" + day + "/" + year;
}
function updateCal() {
var txtDate1 = document.getElementById("date1");
if (txtDate1.value != "") {
YAHOO.example.calendar.cal1.select(txtDate1.value);
var firstDate = YAHOO.example.calendar.cal1.getSelectedDates()[0];
YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
YAHOO.example.calendar.cal1.render();
}
}
// For this example page, stop the Form from being submitted, and update the cal instead
function handleSubmit(e) {
updateCal();
YAHOO.util.Event.preventDefault(e);
}
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ mindate:"1/1/2006",
maxdate:"12/31/2008" });
YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.render();
YAHOO.util.Event.addListener("update", "click", updateCal);
YAHOO.util.Event.addListener("dates", "submit", handleSubmit);
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
<form name="dates" id="dates">
<input type="text" name="date1" id="date1" />
<button type="button" id="update">&lt; Update Calendar</button>
</form>
</body>
</html>

132
www/extras/yui/examples/calendar/germany/1.html Normal file
View file

@ -0,0 +1,132 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Localization: Germany (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Localization: Germany</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item selected"><a href="1.html">Localization: Germany</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar provides easy configuration properties that can be used to localize the Calendar's various data labels to be used in international locales. There are several properties that are used to change localization settings:</p>
<ul class="properties">
<li><strong>LOCALE_MONTHS</strong> - The setting that determines which length of month labels should be used. Possible values are "short" and "long".</li>
<li><strong>LOCALE_WEEKDAYS</strong> - The setting that determines which length of weekday labels should be used. Possible values are "1char", "short", "medium", and "long".</li>
<li><strong>MONTHS_SHORT </strong> - The short month labels for the current locale. Default: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</li>
<li><strong>MONTHS_LONG</strong> - The long month labels for the current locale. Default: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</li>
<li><strong>WEEKDAYS_1CHAR</strong> - The 1-character weekday labels for the current locale. Default: ["S", "M", "T", "W", "T", "F", "S"]</li>
<li><strong>WEEKDAYS_SHORT</strong> - The short weekday labels for the current locale. Default: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]</li>
<li><strong>WEEKDAYS_MEDIUM</strong> - The medium weekday labels for the current locale. Default: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]</li>
<li><strong>WEEKDAYS_LONG</strong> - The long weekday labels for the current locale. Default: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]</li>
</ul>
<p>In addition, the Calendar provides special configuration properties for determining how incoming dates and date ranges should be formatted. By default, the date format for input to the Calendar is mm/dd/yyyy. Ranges are separated by a dash ("-") and lists of dates are delimited using a comma (","). Using these properties, the initial formatting of date can be easily modified:</p>
<ul class="properties">
<li><strong>DATE_DELIMITER</strong> - The value used to delimit individual dates in a date string passed to various Calendar functions. Default: ","</li>
<li><strong>DATE_FIELD_DELIMITER</strong> - The value used to delimit date fields in a date string passed to various Calendar functions. Default: "/"</li>
<li><strong>DATE_RANGE_DELIMITER</strong> - The value used to delimit date ranges in a date string passed to various Calendar functions. Default: "-"</li>
<li><strong>MDY_MONTH_POSITION</strong> - The position of the month in a month/day/year date string. Default: 1</li>
<li><strong>MDY_DAY_POSITION</strong> - The position of the day in a month/day/year date string. Default: 2</li>
<li><strong>MDY_YEAR_POSITION</strong> - The position of the year in a month/day/year date string. Default: 3</li>
<li><strong>MD_MONTH_POSITION</strong> - The position of the month in a month/day date string. Default: 1</li>
<li><strong>MD_DAY_POSITION</strong> - The position of the day in a month/day date string. Default: 2</li>
<li><strong>MY_MONTH_POSITION</strong> - The position of the month in a month/year date string. Default: 1</li>
<li><strong>MY_YEAR_POSITION</strong> - The position of the year in a month/year date string. Default: 2</li>
</ul>
<p>In our tutorial, we will create a German Calendar that is set up both to accept dates in the standard German format (dd.mm.yyyy) and present the labels in German. Note that all of our date label values will contain special characters in Unicode notation. Also, we will present the weekday labels in the "medium" format, which will amount to 3 characters in this example.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ LOCALE_WEEKDAYS:"medium",
START_WEEKDAY: 1,
MULTI_SELECT: true
} );
// Correct formats for Germany: dd.mm.yyyy, dd.mm, mm.yyyy
YAHOO.example.calendar.cal1.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 3);
YAHOO.example.calendar.cal1.cfg.setProperty("MD_DAY_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MD_MONTH_POSITION", 2);
// Date labels for German locale
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]);
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "D", "M", "D", "F", "S"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]);
</textarea>
<p>Next, we can set some selected dates using our newly configured date format, and render the Calendar:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1.select("1.10.2006-8.10.2006");
YAHOO.example.calendar.cal1.render();
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/germany/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Localization: Germany (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Localization: Germany</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item selected"><a href="1.html">Localization: Germany</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:225px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

62
www/extras/yui/examples/calendar/germany/solution.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<style>
.calweekdaycell { text-align:center;font-size:70%; }
</style>
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ LOCALE_WEEKDAYS:"medium",
START_WEEKDAY: 1,
MULTI_SELECT: true
} );
// Correct formats for Germany: dd.mm.yyyy, dd.mm, mm.yyyy
YAHOO.example.calendar.cal1.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 3);
YAHOO.example.calendar.cal1.cfg.setProperty("MD_DAY_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MD_MONTH_POSITION", 2);
// Date labels for German locale
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]);
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["S", "M", "D", "M", "D", "F", "S"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]);
YAHOO.example.calendar.cal1.select("1.10.2006-8.10.2006");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
&#160;&#160;&#160;&#160;
</body>
</html>

98
www/extras/yui/examples/calendar/index.html Normal file
View file

@ -0,0 +1,98 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Tutorials (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Tutorials</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="#">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="events/1.html">Handling Events</a></li>
<li class="item"><a href="formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">YUI Calendar Interactive Tutorials</h1>
<p>The YUI Calendar Tutorials provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.</p>
<div id="landing">
<h3><a href="quickstart/1.html">Quickstart Tutorial</a></h3>
<p>Quickly get up and running with the most basic Calendar.</p>
<h3><a href="multi/1.html">Multi-Select Calendar</a></h3>
<p>Set up a Calendar that allows for the selection of one or more dates, rather than the single-select default.</p>
<h3><a href="dual/1.html">Dual Calendars</a></h3>
<p>Learn how to instantiate a Calendar with more than one month shown at a time.</p>
<h3><a href="minmax/1.html">Minimum / Maximum Dates</a></h3>
<p>Configure the Calendar to disallow selection before or beyond specified date limits.</p>
<h3><a href="events/1.html">Handling Events</a></h3>
<p>Use Calendar's events to react to various interesting moments, such as the selection or deselection of dates.</p>
<h3><a href="formtxt/1.html">Calendar & Text Fields</a></h3>
<p>Populate a form text input field using the Calendar's selected date and vice versa.</p>
<h3><a href="formsel/1.html">Calendar & Select Fields</a></h3>
<p>Populate a series of form select input fields using the Calendar's selected date and vice versa.</p>
<h3><a href="render/1.html">Using the Render Stack</a></h3>
<p>Configure custom functions that can be used to perform special rendering for specific dates or ranges of dates.</p>
<h3><a href="germany/1.html">Localization: Germany</a></h3>
<p>Use localization features to customize the Calendar for use in Germany.</p>
<h3><a href="japan/1.html">Localization: Japan</a></h3>
<p>Use localization features to customize the CalendarGroup for use in Japan.</p>
<h3><a href="popup/1.html">Popup Calendar</a></h3>
<p>Configure and Calendar and CalendarGroup for use as a popup layer that is displayed above the document.</p>
</div>
<div id="stepnav">
</div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

127
www/extras/yui/examples/calendar/japan/1.html Normal file
View file

@ -0,0 +1,127 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Localization: Japan (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Localization: Japan</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item selected"><a href="1.html">Localization: Japan</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar provides easy configuration properties that can be used to localize the Calendar's various data labels to be used in international locales. There are several properties that are used to change localization settings:</p>
<ul class="properties">
<li><strong>LOCALE_MONTHS</strong> - The setting that determines which length of month labels should be used. Possible values are "short" and "long".</li>
<li><strong>LOCALE_WEEKDAYS</strong> - The setting that determines which length of weekday labels should be used. Possible values are "1char", "short", "medium", and "long".</li>
<li><strong>MONTHS_SHORT </strong> - The short month labels for the current locale. Default: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</li>
<li><strong>MONTHS_LONG</strong> - The long month labels for the current locale. Default: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</li>
<li><strong>WEEKDAYS_1CHAR</strong> - The 1-character weekday labels for the current locale. Default: ["S", "M", "T", "W", "T", "F", "S"]</li>
<li><strong>WEEKDAYS_SHORT</strong> - The short weekday labels for the current locale. Default: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]</li>
<li><strong>WEEKDAYS_MEDIUM</strong> - The medium weekday labels for the current locale. Default: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]</li>
<li><strong>WEEKDAYS_LONG</strong> - The long weekday labels for the current locale. Default: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]</li>
</ul>
<p>In addition, the Calendar provides special configuration properties for determining how incoming dates and date ranges should be formatted. By default, the date format for input to the Calendar is mm/dd/yyyy. Ranges are separated by a dash ("-") and lists of dates are delimited using a comma (","). Using these properties, the initial formatting of date can be easily modified:</p>
<ul class="properties">
<li><strong>DATE_DELIMITER</strong> - The value used to delimit individual dates in a date string passed to various Calendar functions. Default: ","</li>
<li><strong>DATE_FIELD_DELIMITER</strong> - The value used to delimit date fields in a date string passed to various Calendar functions. Default: "/"</li>
<li><strong>DATE_RANGE_DELIMITER</strong> - The value used to delimit date ranges in a date string passed to various Calendar functions. Default: "-"</li>
<li><strong>MDY_MONTH_POSITION</strong> - The position of the month in a month/day/year date string. Default: 1</li>
<li><strong>MDY_DAY_POSITION</strong> - The position of the day in a month/day/year date string. Default: 2</li>
<li><strong>MDY_YEAR_POSITION</strong> - The position of the year in a month/day/year date string. Default: 3</li>
<li><strong>MD_MONTH_POSITION</strong> - The position of the month in a month/day date string. Default: 1</li>
<li><strong>MD_DAY_POSITION</strong> - The position of the day in a month/day date string. Default: 2</li>
<li><strong>MY_MONTH_POSITION</strong> - The position of the month in a month/year date string. Default: 1</li>
<li><strong>MY_YEAR_POSITION</strong> - The position of the year in a month/year date string. Default: 2</li>
</ul>
<p>In our tutorial, we will create a Japanese Calendar that is set up both to accept dates in the standard Japanese format (yyyy/mm/dd) and present the labels in Japanese. Note that all of our date label values will contain special characters in Unicode notation.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { START_WEEKDAY: 1, MULTI_SELECT:true } );
// Correct formats for Japan: yyyy/mm/dd, mm/dd, yyyy/mm
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3);
YAHOO.example.calendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2);
// Date labels for Japanese locale
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
</textarea>
<p>Next, we can set some selected dates using our newly configured date format, and render the Calendar:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1.select("2006/10/1-2006/10/8");
YAHOO.example.calendar.cal1.render();
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/japan/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Localization: Japan (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Localization: Japan</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item selected"><a href="1.html">Localization: Japan</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:400px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

55
www/extras/yui/examples/calendar/japan/solution.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<style>
.yui-calendar td.wd0 { background-color:#fde0e0; }
.yui-calendar td.wd0 a { color:red; }
</style>
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { START_WEEKDAY: 1, MULTI_SELECT:true } );
// Correct formats for Japan: yyyy/mm/dd, mm/dd, yyyy/mm
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3);
YAHOO.example.calendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1);
YAHOO.example.calendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2);
// Date labels for Japanese locale
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
YAHOO.example.calendar.cal1.select("2006/10/1-2006/10/8");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

90
www/extras/yui/examples/calendar/minmax/1.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Minimum / Maximum Dates (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Minimum / Maximum Dates</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item selected"><a href="1.html">Minimum / Maximum Dates</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar can be easily configured to prevent users from being able to select dates before and after given minimum and maximum dates. For this tutorial, it is assumed that you are starting with the basic Calendar (outlined in the <a href="../quickstart/1.html">Quickstart Tutorial</a>). The setup for the basic Calendar looks like this:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
</textarea>
<p>Enabling the minimum and maximum date features is as easy as adding additional arguments to the constructor's configuration object. In this tutorial, we will be working with three different configuration properties: <em>pagedate</em>, <em>mindate</em> and <em>maxdate</em>. In brief, here is a description of these properties and what they do:</p>
<ul class="properties">
<li><strong>pagedate</strong> - Specifies the month/year of the Calendar's initial view. For example, setting a value of "1/2006" would set the Calendar to January 2006.</li>
<li><strong>mindate</strong> - Specifies the minimum selectable date for the Calendar. All dates before the minimum date will be grayed out. The value can be specified as a JavaScript Date object or as a string (e.g. "1/25/2007").</li>
<li><strong>maxdate</strong> - Specifies the maximum selectable date for the Calendar. All dates after the maximum date will be grayed out. The value can be specified as a JavaScript Date object or as a string (e.g. "1/25/2007").</li>
</ul>
<p>Of course, you can specify these properties independently for different results. For instance, if you only wanted users to be able to select days following August 2, 2006, you would set the <em>mindate</em> property to "8/2/2006" and no dates prior would be selectable.</p>
<p>For this example, we will set the current month view to January 2006 using the <em>pagedate</em> property, and we will limit the Calendar's minimum selectable date to January 5, and the maximum selectable date to January 15.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ pagedate: "1/2006",
mindate: "1/5/2006",
maxdate: "1/15/2006" }
);
YAHOO.example.calendar.cal1.render();
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/minmax/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Minimum / Maximum Dates (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Minimum / Maximum Dates</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item selected"><a href="1.html">Minimum / Maximum Dates</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:225px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

35
www/extras/yui/examples/calendar/minmax/solution.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container",
{ pagedate : "1/2006",
mindate: "1/5/2006",
maxdate: "1/15/2006" }
);
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

87
www/extras/yui/examples/calendar/multi/1.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Multi-Select Calendar (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Multi-Select Calendar</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item selected"><a href="1.html">Multi-Select Calendar</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Although the default Calendar control only allows for a single selection to be made, it's easy to configure a Calendar to accept multiple selections.</p>
<p>The markup for our multi-select Calendar example looks indentical to the single-select Calendar:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="cal1Container"></div>
</textarea>
<p>Instantiating a multi-select Calendar is similar to instantiating a single-select Calendar; however, to specify the multi-select configuration we pass a configuration object into the constructor. The configuration object is a JavaScript object literal can be passed to the Calendar constructor in the form of key/value pairs for the purpose of setting the Calendar's various configuration properties. In this case, we'll specify that the "MULTI-SELECT" option has a value of true in line 6 below.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 =
new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true } );
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</textarea>
<p>You will see Calendar's various other configuration properties at work throughout the remainder of the tutorials, and you can also view the Calendar's <a href="#"http://developer.yahoo.com/yui/calendar/">configuration properties reference</a> for more details.</p>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/multi/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Multi-Select Calendar (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Multi-Select Calendar</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item selected"><a href="1.html">Multi-Select Calendar</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:225px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

33
www/extras/yui/examples/calendar/multi/solution.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 =
new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true } );
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

97
www/extras/yui/examples/calendar/popup/1.html Normal file
View file

@ -0,0 +1,97 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Popup Calendar (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Popup Calendar</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item selected"><a href="1.html">Popup Calendar</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar can be positioned absolutely to make it float above the document, and it provides a few extra configuration properties specifically geared towards applying it in this way. Those properties are: </p>
<ul class="properties">
<li><strong>close</strong> - Indicates whether or not a close icon should be displayed in the Calendar. Defaults to false.</li>
<li><strong>iframe</strong> - Indicates whether or not an IFRAME shim should be placed under the Calendar to avoid the bleed-through of "select" elements in IE6 and below. Defaults to true for IE6 and below, when the Calendar is positioned absolutely or relatively.</li>
</ul>
<p>In addition, the Calendar provides <em>show</em> and <em>hide</em> methods for displaying the Calendar or hiding it from view. This is achieved by setting the Calendar's outer container to <em>display:none</em>.</p>
<p>In this tutorial, we will create a Calendar and a CalendarGroup which can be displayed by clicking a corresponding button. First, the Calendar and CalendarGroup are instantiated using some of the new properties that were introduced in this tutorial.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { pages:3, title:"Please make a selection:", close:true } );
YAHOO.example.calendar.cal1.render();
// Listener to show the 3-up Calendar when the button is clicked
YAHOO.util.Event.addListener("show3up", "click", YAHOO.example.calendar.cal1.show, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2","cal2Container", { title:"Choose a date:", close:true } );
YAHOO.example.calendar.cal2.render();
// Listener to show the 1-up Calendar when the button is clicked
YAHOO.util.Event.addListener("show1up", "click", YAHOO.example.calendar.cal2.show, YAHOO.example.calendar.cal2, true);
</textarea>
<p>Next, we place the markup for the buttons that will invoke the Calendar and CalendarGroup, along with the container div elements that are required for each.</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<button id="show3up">Show a 3-up Calendar</button>
<div id="cal1Container"></div>
<button id="show1up">Show a Single Calendar</button>
<div id="cal2Container"></div>
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/popup/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Popup Calendar (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Popup Calendar</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item selected"><a href="1.html">Popup Calendar</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:96%;height:400px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

51
www/extras/yui/examples/calendar/popup/solution.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<style>
#show3up { position:absolute; left:10px; top:10px; width:200px; }
#cal1Container { display:none; position:absolute; left:10px; top:10px; }
#show1up { position:absolute; left:10px; top:210px; width:200px;}
#cal2Container { display:none; position:absolute; left:10px; top:210px; }
</style>
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { pages:3, title:"Please make a selection:", close:true } );
YAHOO.example.calendar.cal1.render();
// Listener to show the 3-up Calendar when the button is clicked
YAHOO.util.Event.addListener("show3up", "click", YAHOO.example.calendar.cal1.show, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2","cal2Container", { title:"Choose a date:", close:true } );
YAHOO.example.calendar.cal2.render();
// Listener to show the 1-up Calendar when the button is clicked
YAHOO.util.Event.addListener("show1up", "click", YAHOO.example.calendar.cal2.show, YAHOO.example.calendar.cal2, true);
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<button id="show3up">Show a 3-up Calendar</button>
<div id="cal1Container"></div>
<button id="show1up">Show a Single Calendar</button>
<div id="cal2Container"></div>
</body>
</html>

106
www/extras/yui/examples/calendar/quickstart/1.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Quickstart Tutorial (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Quickstart Tutorial</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item selected"><a href="1.html">Quickstart Tutorial</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar has three required dependencies: the <a href="http://developer.yahoo.com/yui/yahoo/">YAHOO Global object</a>, the <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>, and the <a href="http://developer.yahoo.com/yui/dom/">DOM Collection</a>.</p>
<p>In addition, the JavaScript and CSS files for Calendar must be included. You can see what the full list of included files looks like below. Please note that your file paths may vary depending on the location in which you installed the YUI libraries.</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="event.js" ></script>
<script type="text/javascript" src="dom.js" ></script>
<script type="text/javascript" src="calendar.js"></script>
<link type="text/css" rel="stylesheet" href="yui/calendar.css">
</textarea>
<p>The only markup required by Calendar is an initial empty DIV into which the Calendar will be rendered. The DIV should have a unique id specified in the markup, which will match the id passed to the Calendar's constructor.</p>
<p>The markup for our simple Calendar example looks like this:</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="cal1Container"></div>
</textarea>
<p>Finally, the Calendar can be instantiated in a script block, like this:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</textarea>
<p>Note that to avoid using the global variable space, we are placing our example Calendar's variable into the YAHOO.example.calendar namespace (see line 2 above). For more information about namespacing, see the <a href="http://developer.yahoo.com/yui/yahoo/">YAHOO Global object</a>.</p>
<p>The constructor in our example (line 5) takes two arguments: the id to be used for our new Calendar's inner container DIV ("cal1" in this example) and the id of the inital container where we want to render the Calendar ("cal1Container" in this case).</p>
<p>We are also specifying that the init() function should not be executed until the window has loaded, using the <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>.</p>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/quickstart/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Quickstart Tutorial (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Quickstart Tutorial</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item selected"><a href="1.html">Quickstart Tutorial</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:225px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

31
www/extras/yui/examples/calendar/quickstart/solution.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

101
www/extras/yui/examples/calendar/render/1.html Normal file
View file

@ -0,0 +1,101 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Using the Render Stack (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Using the Render Stack</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item selected"><a href="1.html">Using the Render Stack</a></li>
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Setting up the Calendar</h1>
<p>Calendar employs a feature called the <em>Render Stack</em> to allow you to customize the way that certain date cells are rendered on the Calendar. The Render Stack consists of a collection of functions that can be executed when rendering certain dates. When the Calendar is rendered, each function in the Render Stack is executed for each applicable date. This functionality allows developers implementing the Calendar to alter the contents of date cells based on a set of rules.</p>
<p>The built-in renderers are:</p>
<ul class="properties">
<li><strong>renderCellDefault</strong> - Places a clickable link in the date cell</li>
<li><strong>renderBodyCellRestricted</strong> - Renders a text=only cell with the "restricted" style</li>
<li><strong>renderOutOfBoundsDate</strong> - Renders an out-of-bounds date (beyond the specified min/max dates)</li>
<li><strong>renderCellNotThisMonth</strong> - Renders a cell that is displayed in the current page, but precedes or follows the current month</li>
<li><strong>renderCellStyleToday</strong> - Renders the cell representing today's date</li>
<li><strong>renderCellStyleSelected</strong> - Renders a selected cell</li>
<li><strong>renderCellStyleHighlight1</strong> - Adds the "highlight1" class to the date cell</li>
<li><strong>renderCellStyleHighlight2</strong> - Adds the "highlight2" class to the date cell</li>
<li><strong>renderCellStyleHighlight3</strong> - Adds the "highlight3" class to the date cell</li>
<li><strong>renderCellStyleHighlight4</strong> - Adds the "highlight4" class to the date cell</li>
</ul>
<p>In this tutorial, we will create a Calendar that makes use of the built-in renderers, and we will also create one of our own. To begin, we will instantiate a new Calendar and apply the restricted renderer to 2/29 of any year, and the "highlight1" style to the range of dates between 2/1/2008 and 2/7/2008.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container",
{ pagedate:"2/2008" } );
YAHOO.example.calendar.cal1.addRenderer("2/29", YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addRenderer("2/1/2008-2/7/2008", YAHOO.example.calendar.cal1.renderCellStyleHighlight1);
</textarea>
<p>Next, we will create a custom renderer that will place an "X" in the cell for every Sunday, and style it in a dark gray color. In order to specify that our renderer should override the default renderer (renderCellDefault), the custom function must return YAHOO.widget.Calendar.STOP_RENDER. This tells the Calendar to ignore the rest of the Render Stack and continue rendering the rest of the Calendar.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var myCustomRenderer = function(workingDate, cell) {
cell.innerHTML = "X";
YAHOO.util.Dom.addClass(cell, "sunday");
return YAHOO.widget.Calendar.STOP_RENDER;
}
YAHOO.example.calendar.cal1.addWeekdayRenderer(1, myCustomRenderer);
</textarea>
<div id="stepnav">
<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

67
www/extras/yui/examples/calendar/render/2.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>YUI Calendar - Using the Render Stack (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>
<body>
<div id="doc3" class="yui-t4">
<div id="hd">
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
<h1>YUI Calendar: Using the Render Stack</h1>
</div>
<div id="bd">
<div id="toc" class="yui-b">
<ul>
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
<li class="item"><a href="../dual/1.html">Dual Calendars</a></li>
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
<li class="item"><a href="../events/1.html">Handling Events</a></li>
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
<li class="item selected"><a href="1.html">Using the Render Stack</a></li>
<li class="child"><a href="1.html">Setting up the Calendar</a></li>
<li class="child active"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
</ul>
</div>
<div id="yui-main">
<div class="yui-b">
<h1 class="first">Functional Example</h1>
<p>You can see the full example in action below:</p>
<div id="solution" style="">
<iframe src="solution.html" style="width:400px;height:225px"></iframe>
<a href="solution.html" target="_blank">Open this example in a new window</a>
</div>
<div id="stepnav">
<a class="back" href="1.html">&lt; Back to <em>Setting up the Calendar</em></a> </div>
</div>
</div>
</div>
<div id="ft">&nbsp;</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

47
www/extras/yui/examples/calendar/render/solution.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<style>
.yui-calendar td.sunday { background-color:#999; }
</style>
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container",
{ pagedate:"2/2008" } );
YAHOO.example.calendar.cal1.addRenderer("2/29", YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addRenderer("2/1/2008-2/7/2008", YAHOO.example.calendar.cal1.renderCellStyleHighlight1);
var myCustomRenderer = function(workingDate, cell) {
cell.innerHTML = "X";
YAHOO.util.Dom.addClass(cell, "sunday");
return YAHOO.widget.Calendar.STOP_RENDER;
}
YAHOO.example.calendar.cal1.addWeekdayRenderer(1, myCustomRenderer);
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div id="cal1Container"></div>
</body>
</html>

112
www/extras/yui/examples/connection/abort.html Normal file
View file

@ -0,0 +1,112 @@
<html>
<head>
<script src="../../build/yahoo/yahoo-min.js"></script>
<script src="../../build/connection/connection-min.js"></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
<style>
fieldset {
width: 500px;
}
</style>
</head>
<body>
<h1> Connection Manager Transaction Timeout</h1>
<p>
The following code example provides a step-by-step approach to presetting a transaction timeout.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
<script src="yahoo.js"></script>
<script src="connection.js"></script>
</textarea></pre>
<h3>The Callback Object</h3>
<p>The callback object includes a new property: timeout. To enable a transaction to automatically timeout, the timeout property must be defined wih a value in millseconds. This example defines timeout with a value of 5000(milliseconds). If the transaction is not complete by 5000ms, it will be aborted.</p>
<pre>
<textarea name="code" class="JScript" cols="60" rows="1">
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "Transaction id: " + o.tId;
div.innerHTML += "HTTP status: " + o.status;
div.innerHTML += "Server response: " + o.responseText;
div.innerHTML += "Argument object: property foo = " + o.argument.foo +
"and property bar = " + o.argument.bar;
}
}
var handleFailure = function(o){
div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
var callback =
{
success:handleSuccess,
failure: handleFailure,
argument: { foo:"foo", bar:"bar" },
timeout: 5000
};
</textarea>
</pre>
<h3>Initiate the Transaction</h3>
<p>
Call YAHOO.util.Connect.asyncRequest to send the request to sync.php. The PHP file will return a string message after a random delay of 0 to 10 seconds, if the transaction was not aborted. If the transaction was successfully aborted, the response object's status property will report -1 and the statusText property will report "transaction aborted".
</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
var sUrl = "php/sync.php";
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
</textarea></pre>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
" [bar] => " + o.argument.bar +" )</li>";
}
}
var handleFailure = function(o){
div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
var callback =
{
success: handleSuccess,
failure: handleFailure,
argument: { foo:"foo", bar:"bar" },
timeout: 5000
};
var sUrl = 'php/sync.php';
function makeRequest(){
var obj1 = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
var obj2 = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
</script>
<form><input type="button" value="Create Two Transactions" onClick="makeRequest();"></form>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

120
www/extras/yui/examples/connection/get.html Normal file
View file

@ -0,0 +1,120 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo-min.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
</head>
<body>
<h1> Connection Manager GET Transaction</h1>
<p>
To construct a GET transaction using the Connection Manager, you will need to construct a querystring of key-value pairs and append it to the URL.
The following code example provides a step-by-step approach to creating a simple GET transaction.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"><script src="yahoo.js"></script>
<script src="connection.js"></script></textarea></pre>
<h3>Assemble the Querystring</h3>
<p>Construct a querystring with two key-value pairs of <em>username = anonymous</em> and <em>userid = 0</em>:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"> /*
*
* Create a querystring with example key-value pairs of
* username and userid. Remember to encode the querystring
* if and when the string contains special characters.
*
*/
var sUrl = "php/get.php?username=anonymous&userid=0";</textarea></pre>
<h3>The Callback Object</h3>
<p>Create a callback object to handle the response, and pass an object literal to both success and failure as the argument.</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "&lt;li&gt;Transaction id: " + o.tId + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;HTTP status: " + o.status + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Status code message: " + o.statusText + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;HTTP headers: &lt;ul&gt;" + o.getAllResponseHeaders + "&lt;/ul&gt;&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Server response: " + o.responseText + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Argument object: Object ( [foo] =&gt; " + o.argument.foo +
" [bar] =&gt; " + o.argument.bar +" )&lt;/li&gt;";
}
}
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML = "&lt;li&gt;Transaction id: " + o.tId + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;HTTP status: " + o.status + "&lt;/li&gt;";
div.innerHTML += "&lt;li&gt;Status code message: " + o.statusText + "&lt;/li&gt;";
}
}
var callback =
{
success:handleSuccess,
failure: handleFailure
argument: { foo:"foo", bar:"bar" }
};</textarea></pre>
<h3>Initiate the GET Transaction</h3>
<p>Call YAHOO.util.Connect.asyncRequest to send the request to get.php,
and the PHP file will return the output of $_POST via <strong>print_r()</strong>.
The handleSuccess callback will print the response object's properties, including
the server response data.
</p>
<p>
Note: Caching and GET idempotency.
</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);</textarea></pre>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
" [bar] => " + o.argument.bar +" )</li>";
}
}
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
}
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument: { foo:"foo", bar:"bar" }
};
var sUrl = "php/get.php?username=anonymous&userid=0";
function makeRequest(){
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
</script>
<form><input type="button" value="Send a GET Request" onClick="makeRequest();"></form>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

23
www/extras/yui/examples/connection/index.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Connection Manager</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../docs/assets/examples.css">
</head>
<body>
<div id="doc">
<div id="hd">
<img src="../../docs/assets/logo.gif">
<h1>YUI Library - Connection Manager</h1>
</div>
<div id="bd">
<ul id="examples">
<li><a href="get.html">GET Transaction</a></li>
<li><a href="post.html">POST Transaction</a></li>
<li><a href="weather.html">Retrieving a Y! Weather RSS Feed</a></li>
<li><a href="abort.html">Automatic Transaction Timeout </a></li>
</ul>
</div>
</div>
</body>
</html>

3
www/extras/yui/examples/connection/php/get.php Normal file
View file

@ -0,0 +1,3 @@
<?php
print_r($_GET);
?>

3
www/extras/yui/examples/connection/php/post.php Normal file
View file

@ -0,0 +1,3 @@
<?php
print_r($_POST);
?>

18
www/extras/yui/examples/connection/php/sync.php Normal file
View file

@ -0,0 +1,18 @@
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// always modified
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$num = mt_rand(0,10);
sleep($num);
echo('<span>This request responded in '.$num.' seconds. </span>');
?>

19
www/extras/yui/examples/connection/php/weather.php Normal file
View file

@ -0,0 +1,19 @@
<?php
header("Content-Type:text/xml");
$url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING');
function getResource($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
$feed = getResource($url);
echo $feed;
?>

102
www/extras/yui/examples/connection/post.html Normal file
View file

@ -0,0 +1,102 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
</head>
<body>
<h1> Connection Manager POST Transaction</h1>
<p>
To construct a POST transaction using the Connection Manager, you will need to construct a data string as the POST message. The following code example provides a step-by-step approach to creating a simple POST transaction.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"><script src="yahoo.js"></script>
<script src="connection.js"></script></textarea></pre>
<h3>Assemble the POST message</h3>
<p>Construct an example of key-value string of <em>username = anonymous</em> and <em>userid = 0</em>:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">/*
* Remember to encode the key-value string if and when
* the string contains special characters.
*/
var postData = "username=anonymous&userid=0";
</textarea></pre>
<h3>The Callback Object</h3>
<p>Create a callback object to handle the response and pass an array of values to success and failure as the argument.</p>
<pre>
<pre><textarea name="code" class="JScript" cols="60" rows="1">var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "Transaction id: " + o.tId;
div.innerHTML += "HTTP status: " + o.status;
div.innerHTML += "Status code message: " + o.statusText;
div.innerHTML += "&lt;li&gt;HTTP headers: &lt;ul&gt;" + o.getAllResponseHeaders + "&lt;/ul&gt;&lt;/li&gt;";
div.innerHTML += "PHP response: " + o.responseText;
div.innerHTML += "Argument object: " + o.argument;
}
}
var callback =
{
success:handleSuccess,
failure: handleFailure,
argument: ['foo','bar']
};
</textarea></pre></pre>
<h3>Initiate the POST Transaction</h3>
<p>
Call YAHOO.util.Connect.asyncRequest to send the request to post.php, and the PHP file will return the a readable output of $_POST via <strong>print_r()</strong>. The handleSuccess callback will print the response object's properties, including the server response data.
</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
</textarea></pre>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div.innerHTML += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div.innerHTML += "<li>PHP response: " + o.responseText + "</li>";
div.innerHTML += "<li>Argument object: Array ([0] => " + o.argument[0] +
" [1] => " + o.argument[1] + " )</li>";
}
};
var handleFailure = function(o){
if(o.responseText !== undefined){
div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
argument:['foo','bar']
};
var sUrl = "php/post.php";
var postData = "username=anonymous&userid=0";
function makeRequest(){
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
}
</script>
<form><input type="button" value="Send a POST Request" onClick="makeRequest();"></form>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

183
www/extras/yui/examples/connection/weather.html Normal file
View file

@ -0,0 +1,183 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo-min.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
<link rel="stylesheet" type="text/css" href="../../docs/assets/dpSyntaxHighlighter.css" />
<style>
#wform {margin-top:1em;}
</style>
</head>
<body>
<h1> Retrieving a Y! Weather RSS Feed</h1>
<p>
This example demonstrates how to use the Connection Manager and a PHP proxy -- to work around XMLHttpRequest's same-domain policy &mdash; to retrieve an XML document from http://xml.weather.yahoo.com/forecastrss.
</p>
<h3>Source file and dependencies</h3>
<p>Load the YAHOO namespace and connection manager source file</p>
<textarea name="code" class="JScript" cols="60" rows="1">
&lt;script src="yahoo.js"&gt;
&lt;script src="connection.js"&gt;
</textarea>
<h3>Callback Object and the Weather RSS</h3>
<p>Yahoo! Weather RSS will return an XML document if the transaction is successful. The following callback object with success and failure handlers is used to process the response.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// This is the response display container
var div = document.getElementById('weatherModule');
// This is a reference to the HTML form.
var oForm = document.getElementById('wForm');
/*
* This method will traverse the response XML document and build a
* simple HTML module comprised of data from the following tags:
*
* Data in the first <title> tag in the document.
* Data in the first <lastBuildDate> tag in the document.
* HTML from the second <description> tag in the document.
*
*/
function successHandler(o){
var root = o.responseXML.documentElement;
var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
// Format and display results in the response container.
div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode;
}
/*
*
* This is a simple failure handler that will display
* the HTTP status code and status message if the resource
* returns a non-2xx code.
*
*/
function failureHandler(o){
div.innerHTML = o.status + " " + o.statusText;
}
</textarea>
<h3>Assemble the Querystring and Initiate the Transaction</h3>
<p>The Yahoo! Weather RSS feed requires a simple HTTP GET request, with a base URL and a parameters querystring. In this example, we will use the following parameters:</p>
<ul>
<li>p - location as U.S. Zip Code or Location ID</li>
<li>u - temperature units</li>
</ul>
<p>The following are some example location IDs (do not include the city name):</p>
<ul>
<li>Beijing: <em>CHXX0008</em></li>
<li>Helsinki: <em>FIXX0002</em></li>
<li>London: <em>UKXX0085</em></li>
<li>Moscow: <em>RSXX0063</em></li>
<li>Munich: <em>GMXX0087</em></li>
<li>Paris: <em>FRXX0076</em></li>
<li>Riyadh: <em>SAXX0017</em></li>
<li>Tokyo: <em>JAXX0085</em></li>
</ul>
<p>For more details on the Y! Weather RSS feed and other location IDs, please visit <a href="http://developer.yahoo.com/weather/index.html">http://developer.yahoo.com/weather/index.html</a>.
<p>Function getModule retrieves the input values for location and temperature and creates a querystring.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function getModule(){
// retrieve the field values for the zip code
// input and the unit input.
var sLocation = oForm.elements['zip'].value;
var sUnit = oForm.elements['unit'].value;
// entryPoint is the base URL
var entryPoint = 'php/weather.php';
// queryString is the key-value pairs of zip and unit.
var queryString = encodeURI('?p=' + sLocation + '&' + 'u=' + sUnit);
var sUrl = entryPoint + queryString;
// Initiate the HTTP GET request.
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler });
}
</textarea>
<h3>Proxy and Response</h3>
<p>
Once weather.php receives the querystring, it will construct and send an HTTP GET using CURL to retrieve the results from the Yahoo! Weather RSS feed. This allows the transaction to succeed while working around XMLHttpRequest's security policy.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
<?php
// Since the result is an XML document, the Content-type
// header must be set to "text/xml" for the data to be
// treated as XML and to populate responseXML.
header("Content-Type:text/xml");
// $url is the resource path of the Y! Weather RSS
// with the appended querystring of zip code/location id and
// temperature unit.
$url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING');
// This function initializes CURL, sets the necessary CURL
// options, executes the request and returns the results.
function getResource($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
// Call getResource to make the request.
$feed = getResource($url);
// Return the results.
echo $feed;
?>
</textarea>
<form id="wForm">
<fieldset>
<label>Zip Code or Location ID</label> <input type="text" name="zip" value="94089">
<p>Please enter a U.S. Zip Code or a location ID to get the current temperature. The default is Zip Code 94089 for Sunnyvale, California; its location ID is: USCA1116.</p>
</fieldset>
<fieldset>
<label>Unit</label> <input type="text" name="unit" length="1" maxlength="1">
<p>Enter *F* for Fahrenheit or *C* for Celsius temperature unit.
</fieldset>
<div id="weatherModule"></div>
<input type="button" value="Get Weather RSS" onClick="getModule()">
</form>
<script>
var div = document.getElementById('weatherModule');
var oForm = document.getElementById('wForm');
function successHandler(o){
var root = o.responseXML.documentElement;
var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode;
}
function failureHandler(o){
div.innerHTML = o.status + " " + o.statusText;
}
function getModule(){
var iZip = oForm.elements['zip'].value;
var sUnit = oForm.elements['unit'].value;
var entryPoint = 'php/weather.php';
var queryString = encodeURI('?p=' + iZip + '&' + 'u=' + sUnit);
var sUrl = entryPoint + queryString;
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, { success:successHandler, failure:failureHandler });
}
</script>
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

32
www/extras/yui/examples/container/assets/get.php Normal file
View file

@ -0,0 +1,32 @@
<?php
print "data = { ";
$index = 0;
foreach($_GET as $key => $value) {
print "$key:";
if (gettype($value) == "array") {
print "[";
for ($i = 0;$i < count($_GET["$key"]);$i++) {
$v = $_GET["$key"][$i];
print "\"$v\"";
if ($i < count($_GET["$key"])-1) {
print ",";
}
}
print "]";
} else {
print "\"$value\"";
}
$index++;
if ( ($index) < count($_GET) ) {
print ", ";
}
}
print " };";
?>

BIN
www/extras/yui/examples/container/assets/img/aqua-bg.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 B

BIN
www/extras/yui/examples/container/assets/img/aqua-hd-bg.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 B

BIN
www/extras/yui/examples/container/assets/img/aqua-hd-close-over.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
www/extras/yui/examples/container/assets/img/aqua-hd-close.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
www/extras/yui/examples/container/assets/img/aqua-hd-lt.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 338 B

BIN
www/extras/yui/examples/container/assets/img/aqua-hd-rt.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 340 B

Some files were not shown because too many files have changed in this diff Show more