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

removing old version of yui

Browse source
This commit is contained in:
JT Smith 2006-11-28 02:18:49 +00:00
parent d1d368dcd1
commit 4fd23d094f
766 changed files with 0 additions and 262230 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,30 +0,0 @@
<!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
View file

@ -1,29 +0,0 @@
<!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 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 - Colors</h1>
<p>This example demonstrates how to animate an element's font and background color.</p>
<p>Click anywhere to start animation.</p>
<div id="demo"></div>
</div>
</body>
</html>

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

@ -1,35 +0,0 @@
<!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
View file

@ -1,36 +0,0 @@
<!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
View file

@ -1,38 +0,0 @@
<!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
View file

@ -1,29 +0,0 @@
<!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
View file

@ -1,39 +0,0 @@
<!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>

87
www/extras/yui/examples/animation/css/anim.css
View file

@ -1,87 +0,0 @@
/*
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;
}
#anim, #motion, #end {
background:#ccc;
width:10px;
height:10px;
}
#motion {
color:yellow;
font-size:0;
}
#size {
background:#ccc;
font:100%/1.2em arial;
width:300px;
height:300px;
}
#scroll {
background:#ccc;
font:100%/1.2em arial;
width:400px;
height:200px;
overflow:auto;
}
#scroll p {
width:600px;
}
#end {
background:red;
font-size:0;
position:absolute;
left:300px;top:300px;
}

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

@ -1,95 +0,0 @@
/*
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
View file

@ -1,30 +0,0 @@
<!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
View file

@ -1,29 +0,0 @@
<!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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 705 B

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

@ -1,38 +0,0 @@
<!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
View file

@ -1,31 +0,0 @@
<!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
View file

@ -1,30 +0,0 @@
<!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
View file

@ -1,38 +0,0 @@
<!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
View file

@ -1,39 +0,0 @@
<!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
View file

@ -1,40 +0,0 @@
<!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
View file

@ -1,30 +0,0 @@
<!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
View file

@ -1,34 +0,0 @@
<!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
View file

@ -1,34 +0,0 @@
<!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>

23
www/extras/yui/examples/autocomplete/css/examples.css
View file

@ -1,23 +0,0 @@
h1 {font-size:144%;}
h2 {font-size:129%;}
h3 {font-size:114%;}
h4 {font-size:100%;}
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
View file

@ -1,350 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Customizable Example</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> :: Customizable Example</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>When this page loads, a DataSource instance is created that points to the
same DataSource as the <a href="./ysearch_flat.html">Query a custom PHP
script for flat data</a> example. However, by changing the values below, you
can customize the AutoComplete implementation to your own configurations.
</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">
<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.prototype.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) || (minQueryLength < 1)) {
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
View file

@ -1,210 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Customized XML Implementation</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="../../docs/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> :: XML Data Flickr Web Services</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to Flickr Web Services, via a simple PHP
proxy. The DataSource schema is defined for XML data. In order to be
compatible with the Flickr application, the scriptQueryParameter has been
customized to be "tags", and scriptQueryAppend has been defined to pass in
additional arguments. Finally, the cache has been disabled so that each
query is forced to make a trip to the live source.</p>
<h3>AutoComplete</h3>
<p>This AutoComplete instance defines a robust formatResult() function that
formats the result data into HTML markup that displays an image from Flickr
and its title. The autoHighlight feature has additionally been disabled.</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.prototype.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.prototype.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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 705 B

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

@ -1,32 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Implementation Examples</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 :: JSON Data Yahoo! Search Web Services</h1>
</div>
<div id="bd">
<ul>
<li><a href="./ysearch_json.html">Query Yahoo! Search web services for JSON</a></li>
<li><a href="./ysearch_xml.html">Query Yahoo! Search web wervices for XML</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</a></li>
<li><a href="./ysearch_flat.html">Query a custom PHP script for flat 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
View file

@ -1,150 +0,0 @@
/*
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 + ')');
}
};

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

@ -1,107 +0,0 @@
function getStates(sQuery) {
aResults = [];
if(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;
}
else { return null; }
}
//{"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
View file

@ -1,33 +0,0 @@
<?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
View file

File diff suppressed because it is too large Load diff

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

@ -1,45 +0,0 @@
<?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/x-javascript";
}
$query .= urlencode($key)."=".urlencode($value)."&";
}
foreach ($_POST as $key => $value) {
if(($key == "output") && ($value == "json")) {
$type = "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);
?>

675
www/extras/yui/examples/autocomplete/states_jsarray.html
View file

@ -1,675 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: JS Array Example</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="../../docs/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 {width:100%;height:1.4em;z-index:0;}
#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 -->
<h3>DataSource</h3>
<p>Two DataSource instances point to in-memory JavaScript arrays. The first
array holds the 50 US states. The second array itself holds arrays of US
area codes and their corresponding states.</p>
<h3>AutoComplete</h3>
<p>Since the two DataSources for this example are already loaded into memory
via JavaScript arrays, queries should be very fast to return data. Therefore,
both AutoComplete instances are configured to have a query delay of zero
seconds.</p.
<p>A few configurations have also been made to aid the usability of the
widgets. The autoHighlight and typeAhead features can help reduce the number
of user actions it takes to submit a valid selection. The
prehighlightClassName feature provides an supplemental visual feedback for mouse
events.</p>
<p>Additionally, the second AutoComplete instance also has been enhanced to
display two data fields in the container: the area code and the area code's
state. The forceSelection feature 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 {width:100%;height:1.4em;z-index:0;}
#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.typeAhead = true;
oAutoComp.useShadow = true;
// 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);
};
</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;
// 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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

273
www/extras/yui/examples/autocomplete/states_jsfunction.html
View file

@ -1,273 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: JS Function Example</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="../../docs/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: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 -->
<h3>DataSource</h3>
<p>This DataSource instance points to an in-memory JavaScript function that
returns results in an array. The function queries against an in-memory object
literal of data that holds the 50 US states and their corresponding postal
abbreviations.</p>
<h3>AutoComplete</h3>
<p>Since the DataSource 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. The
AutoComplete instance is also configured to display two data fields in its
container: the state and its corresponding postal abbreviation. By setting
the alwaysShowContainer property to true and customizing appropriate CSS styles, the
container has been implemented to always be displayed. Custom event handlers
have been hooked into containerExpandEvent and containerCollapseEvent to
dynamically update the always open container's contents.</p>
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
<h2>Find a state:</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: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>Find a state:</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.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;
}
else { return null; }
}
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);
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.alwaysShowContainer = true;
oAutoComp.queryDelay = 0;
oAutoComp.maxResultsDisplayed = 8;
oAutoComp.useShadow = true;
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Subscribe to Custom Events
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
},
// 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>");
}
},
myOnContainerCollapse: function(sType, aArgs) {
var oAutoComp = aArgs[0];
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</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/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 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);
// Instantiate AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.alwaysShowContainer = true;
oAutoComp.queryDelay = 0;
oAutoComp.maxResultsDisplayed = 8;
oAutoComp.useShadow = true;
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</div>");
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Subscribe to Custom Events
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
},
// 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>");
}
},
myOnContainerCollapse: function(sType, aArgs) {
var oAutoComp = aArgs[0];
oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find a state</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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

281
www/extras/yui/examples/autocomplete/ysearch_flat.html
View file

@ -1,281 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Complex Flat-data Implementation</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="../../docs/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;}
#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 Data Custom Script</h1>
</div>
<div id="bd">
<!-- Logger begins -->
<div id="logger"></div>
<!-- Logger ends -->
<!-- Content begins -->
<h3>DataSource</h3>
<p>This DataSource instance points to a custom PHP script that returns flat
demo data of recent search terms and number of results. The schema has
been defined to parse tab-delimited data rows that are separated by line
breaks. For maximum cache usage, the DataSource has been
configured to match query subsets in the cache, and the cache itself has
been turned up to 60 entries for fewer round trips to the server.
</p>
<h3>AutoComplete</h3>
<p>Three AutoComplete instances are created that all point the a single
DataSource for maximimum 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 in a slightly different way.</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;}
#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.prototype.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.prototype.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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

167
www/extras/yui/examples/autocomplete/ysearch_json.html
View file

@ -1,167 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Basic JSON Implementation</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="../../docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
#ysearchmod {position:relative;text-align:center;z-index:9050;}
#ysearchautocomplete {position:relative;}
#ysearchinput {position:relative;width:20em;height:1.4em;}
#ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
#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;}
#ysearchsubmit {position:relative;}
</style>
</head>
<body>
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: JSON Data Yahoo! Search Web Services</h1>
</div>
<div id="bd">
<!-- AutoComplete begins -->
<div id="ysearchmod">
<form onsubmit="return YAHOO.example.ACJson.validateForm();">
<span>Yahoo! Search</span>
<span id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</span>
<input id="ysearchsubmit" type="submit" value="Submit Query">
</form>
</div>
<!-- AutoComplete ends -->
<!-- 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 JSON 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>
<!-- 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;text-align:center;z-index:9050;}
#ysearchautocomplete {position:relative;}
#ysearchinput {position:relative;width:20em;height:1.4em;}
#ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
#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;}
#ysearchsubmit {position:relative;}
</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();">
<span>Yahoo! Search</span>
<span id="ysearchautocomplete">
<input id="ysearchinput">
<div id="ysearchcontainer"></div>
</span>
<input id="ysearchsubmit" type="submit" value="Submit Query">
</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", "Summary", "Cache"]);
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "output=json&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="./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", "Summary", "Cache"]);
oACDS.queryMatchContains = true;
oACDS.scriptQueryAppend = "output=json&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.ACJson.init);
</script>
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

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

@ -1,164 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Basic XML Implementation</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="../../docs/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> :: XML Data Yahoo! Search Web Services</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 = oACDS.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 = oACDS.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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

70
www/extras/yui/examples/calendar/css/examples.css
View file

@ -1,70 +0,0 @@
html, body {
margin:5px;
color: #333;
}
h1,h2,h3,h4,h5,h6 {
font-family: palatino, georgia, "Times New Roman", serif;
}
h3 {
color:#666;
margin-top:8px;
margin-bottom:8px;
}
h4 {
margin-top:0px;
margin-bottom:10px;
}
#logo {
position:absolute;
left:5px;
top:5px;
}
#pageTitle {
margin-left:80px;
height:38px;
clear:both;
}
xmp {
border:1px solid #CCC;
background-color:#F7F7F7;
padding:5px;
font-size:12px;
}
.column.left {
float:left;
display:inline;
margin-left:80px;
width:500px;
}
.column.right {
text-align:center;
background-color:#C2C2D7;
float:left;
margin-left:10px;
width:240px;
padding:50px 0px;
height:425px;
}
.column p {
margin:10px 0px;
font: normal 11px verdana, sans-serif;
line-height:15px;
}
a.navLink {
padding:5px;
color:#000;
text-decoration:none;
font:14px sans-serif;
}

BIN
www/extras/yui/examples/calendar/default/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/default/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/default/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

76
www/extras/yui/examples/calendar/default/index.html
View file

@ -1,76 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Single-Select Implementation</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<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/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Default Single-Select Implementation</h4>
<p>The default Calendar implementation is a single-select 1-up calendar view that defaults to the current month and year. The basic calendar can be implemented by declaring a variable to represent the calendar, and passing the calendar's ID to the Calendar constructor:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.render();
}
</textarea>
<p>The Calendar object should be instantiated after the body has been rendered, so that a reference to the container element that will contain the calendar can be obtained. The container element can reside anywhere within the body.</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="cal1Container"></div>
</textarea>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

BIN
www/extras/yui/examples/calendar/default_2up/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/default_2up/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/default_2up/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

BIN
www/extras/yui/examples/calendar/default_2up/img/ytravel.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

396
www/extras/yui/examples/calendar/default_2up/index.html
View file

@ -1,396 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - 2-Up Implementation</title>
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../build/event/event.js" ></script>
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
this.today = new Date();
var thisMonth = this.today.getMonth();
var thisDay = this.today.getDate();
var thisYear = this.today.getFullYear();
this.link1 = document.getElementById('dateLink1');
this.link2 = document.getElementById('dateLink2');
this.selMonth1 = document.getElementById('selMonth1');
this.selDay1 = document.getElementById('selDay1');
this.selMonth1.selectedIndex = thisMonth;
this.selDay1.selectedIndex = thisDay-1;
this.selMonth2 = document.getElementById('selMonth2');
this.selDay2 = document.getElementById('selDay2');
this.selMonth2.selectedIndex = thisMonth;
this.selDay2.selectedIndex = thisDay-1;
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal1.title = "Select your desired departure date:";
YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
YAHOO.example.calendar.cal1.render();
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal2.title = "Select your desired return date:";
YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
YAHOO.example.calendar.cal2.render();
}
function showCalendar1() {
YAHOO.example.calendar.cal2.hide();
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal1.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}
function showCalendar2() {
YAHOO.example.calendar.cal1.hide();
var pos = YAHOO.util.Dom.getXY(link2);
YAHOO.example.calendar.cal2.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
}
function setDate1() {
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
selMonth1.selectedIndex=date1.getMonth();
selDay1.selectedIndex=date1.getDate()-1;
YAHOO.example.calendar.cal1.hide();
}
function setDate2() {
var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
selMonth2.selectedIndex=date2.getMonth();
selDay2.selectedIndex=date2.getDate()-1;
YAHOO.example.calendar.cal2.hide();
}
function changeDate1() {
var month = this.selMonth1.selectedIndex;
var day = this.selDay1.selectedIndex + 1;
var year = this.today.getFullYear();
YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal1.setMonth(month);
YAHOO.example.calendar.cal1.render();
}
function changeDate2() {
var month = this.selMonth2.selectedIndex;
var day = this.selDay2.selectedIndex + 1;
var year = this.today.getFullYear();
YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal2.setMonth(month);
YAHOO.example.calendar.cal2.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body style="margin:0px">
<img src="img/ytravel.gif" id="bgImg">
<div style="position:absolute;left:148px;top:275px">
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
<option value="Jan">
Jan
</option>
<option value="Feb">
Feb
</option>
<option value="Mar">
Mar
</option>
<option value="Apr">
Apr
</option>
<option value="May">
May
</option>
<option value="Jun">
Jun
</option>
<option value="Jul">
Jul
</option>
<option value="Aug">
Aug
</option>
<option value="Sep">
Sep
</option>
<option value="Oct">
Oct
</option>
<option value="Nov">
Nov
</option>
<option value="Dec">
Dec
</option>
</select>
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
<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><a href="javascript:void(null)" onclick="showCalendar1()"><img id="dateLink1" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>
<div style="position:absolute;left:303px;top:275px">
<select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
<option value="Jan">
Jan
</option>
<option value="Feb">
Feb
</option>
<option value="Mar">
Mar
</option>
<option value="Apr">
Apr
</option>
<option value="May">
May
</option>
<option value="Jun">
Jun
</option>
<option value="Jul">
Jul
</option>
<option value="Aug">
Aug
</option>
<option value="Sep">
Sep
</option>
<option value="Oct">
Oct
</option>
<option value="Nov">
Nov
</option>
<option value="Dec">
Dec
</option>
</select>
<select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
<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><a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>
<div id="container1" style="position:absolute;display:none"></div>
<div id="container2" style="position:absolute;display:none"></div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

92
www/extras/yui/examples/calendar/events/index.html
View file

@ -1,92 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Handling onSelect / onDeselect</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1", "cal1Container");
YAHOO.example.calendar.cal1.Options.MULTI_SELECT = true;
YAHOO.example.calendar.cal1.onSelect = function(selected) {
alert("selected: " + selected);
}
YAHOO.example.calendar.cal1.onDeselect = function(deselected) {
alert("deselected: " + deselected);
}
YAHOO.example.calendar.cal1.render();
}
</script>
</head>
<body onload="init()">
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Handling onSelect / onDeselect</h4>
<p>This implementation augments the <a href="../multi_select/index.html">multi-select Calendar</a> with event handlers for onSelect and onDeselect. The dates that are selected or deselected are passed as an argument to the event handlers.</p>
<p>Dates are passed as an array of date field arrays, in the format: [YYYY, M, D]. For instance, if two dates are selected at once (8/6/2006 and 8/7/2006), the argument passed to onSelect would be: [ [2006,8,6], [2006,8,7] ].</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.Options.MULTI_SELECT = true;
cal1.onSelect = function(selected) {
alert("selected: " + selected);
}
cal1.onDeselect = function(deselected) {
alert("deselected: " + deselected);
}
cal1.render();
}
</textarea>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
</div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 705 B

BIN
www/extras/yui/examples/calendar/img/pdate.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 167 B

37
www/extras/yui/examples/calendar/index.html
View file

@ -1,37 +0,0 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Calendar</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/examples.css">
</head>
<body style="height:100%">
<img src="img/logo.gif" style="position:absolute;top:5px;left:5px" />
<div id="pageTitle">
<h3>Calendar</h3>
</div>
<div id="content">
<p><a href="default/index.html">Default Calendar</a></p>
<p><a href="default_2up/index.html">Dual Calendars</a></p>
<p><a href="intl_germany/index.html">German Calendar</a></p>
<p><a href="intl_japan/index.html">Japanese Calendar</a></p>
<p><a href="multi_select/index.html">Multi-Select Calendar</a></p>
<p><a href="events/index.html">Handling onSelect / onDeselect</a></p>
<p><a href="multi_select_2up/index.html">Multi-Select 2-up Calendar</a></p>
<p><a href="min_max_date/index.html">Minimum/Maximum Selectable Date Calendar</a></p>
<p><a href="renderer/index.html">Renderer Example Calendar</a></p>
<p><a href="restriction/index.html">Date-Restricted Calendar</a></p>
<p><a href="row_highlight/index.html">Row Highlight Calendar</a></p>
</div>
</body>
</html>

7
www/extras/yui/examples/calendar/intl_germany/css/Calendar_DE.css
View file

@ -1,7 +0,0 @@
#bgImg {
margin-left:75px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:0;
}

BIN
www/extras/yui/examples/calendar/intl_germany/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/intl_germany/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/intl_germany/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

BIN
www/extras/yui/examples/calendar/intl_germany/img/ytravel.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 85 KiB

451
www/extras/yui/examples/calendar/intl_germany/index.html
View file

@ -1,451 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - 2-Up German Implementation</title>
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../build/event/event.js" ></script>
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<link rel="stylesheet" href="css/Calendar_DE.css" type="text/css">
<script language="javascript">
/* Begin German Calendar */
YAHOO.widget.Calendar2up_DE_Cal = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.init(id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_DE_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
YAHOO.widget.Calendar2up_DE_Cal.prototype.customConfig = function() {
this.Config.Locale.MONTHS_SHORT = ["Jan", "Feb", "M\u00E4r", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
this.Config.Locale.MONTHS_LONG = ["Januar", "Februar", "M\u00E4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
this.Config.Locale.WEEKDAYS_1CHAR = ["S", "M", "D", "M", "D", "F", "S"];
this.Config.Locale.WEEKDAYS_SHORT = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
this.Config.Locale.WEEKDAYS_MEDIUM = ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"];
this.Config.Locale.WEEKDAYS_LONG = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
this.Config.Options.START_WEEKDAY = 1;
}
/*************************************/
YAHOO.widget.Calendar2up_DE = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.buildWrapper(containerId);
this.init(2, id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_DE.prototype = new YAHOO.widget.Calendar2up();
YAHOO.widget.Calendar2up_DE.prototype.constructChild = function(id,containerId,monthyear,selected) {
var cal = new YAHOO.widget.Calendar2up_DE_Cal(id,containerId,monthyear,selected);
return cal;
};
/* End German Calendar */
YAHOO.namespace("example.calendar");
var today,link1,link2,selMonth1,selDay1,selMonth2,selDay2;
function initDE() {
today = new Date();
var thisMonth = today.getMonth();
var thisDay = today.getDate();
var thisYear = today.getFullYear();
link1 = document.getElementById('dateLink1');
link2 = document.getElementById('dateLink2');
selMonth1 = document.getElementById('selMonth1');
selDay1 = document.getElementById('selDay1');
selMonth1.selectedIndex = thisMonth;
selDay1.selectedIndex = thisDay-1;
selMonth2 = document.getElementById('selMonth2');
selDay2 = document.getElementById('selDay2');
selMonth2.selectedIndex = thisMonth;
selDay2.selectedIndex = thisDay-1;
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up_DE("YAHOO.example.calendar.cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal1.setChildFunction("onSelect",setDate1);
YAHOO.example.calendar.cal1.title = "Waehle Dein Abflugsdatum";
YAHOO.example.calendar.cal1.addRenderer("1/1,1/6,5/1,8/15,10/3,10/31,12/25,12/26", YAHOO.example.calendar.cal1.pages[0].renderCellStyleHighlight1);
YAHOO.example.calendar.cal1.render();
YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar2up_DE("YAHOO.example.calendar.cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal2.setChildFunction("onSelect",setDate2);
YAHOO.example.calendar.cal2.title = "Waehle Dein Rueckflugsdatum";
YAHOO.example.calendar.cal2.addRenderer("1/1,1/6,5/1,8/15,10/3,10/31,12/25,12/26", YAHOO.example.calendar.cal2.pages[0].renderCellStyleHighlight1);
YAHOO.example.calendar.cal2.render();
}
function showCalendar1() {
YAHOO.example.calendar.cal2.hide();
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal1.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}
function showCalendar2() {
YAHOO.example.calendar.cal1.hide();
var pos = YAHOO.util.Dom.getXY(link2);
YAHOO.example.calendar.cal2.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
}
function setDate1() {
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
selMonth1.selectedIndex=date1.getMonth();
selDay1.selectedIndex=date1.getDate()-1;
YAHOO.example.calendar.cal1.hide();
}
function setDate2() {
var date2 = YAHOO.example.calendar.cal2.getSelectedDates()[0];
selMonth2.selectedIndex=date2.getMonth();
selDay2.selectedIndex=date2.getDate()-1;
YAHOO.example.calendar.cal2.hide();
}
function changeDate1() {
var month = selMonth1.selectedIndex;
var day = selDay1.selectedIndex + 1;
var year = today.getFullYear();
YAHOO.example.calendar.cal1.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal1.setMonth(month);
YAHOO.example.calendar.cal1.render();
}
function changeDate2() {
var month = selMonth2.selectedIndex;
var day = selDay2.selectedIndex + 1;
var year = today.getFullYear();
YAHOO.example.calendar.cal2.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal2.setMonth(month);
YAHOO.example.calendar.cal2.render();
}
YAHOO.util.Event.addListener(window, "load", initDE);
</script>
</head>
<body style="margin:0px">
<img src="img/ytravel.gif" id="bgImg">
<div style="position:absolute;left:209px;top:332px">
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
<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 id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
<option value="Jan">
Januar
</option>
<option value="Feb">
Februar
</option>
<option value="Mar">
März
</option>
<option value="Apr">
April
</option>
<option value="May">
Mai
</option>
<option value="Jun">
Juni
</option>
<option value="Jul">
Juli
</option>
<option value="Aug">
August
</option>
<option value="Sep">
September
</option>
<option value="Oct">
Oktober
</option>
<option value="Nov">
November
</option>
<option value="Dec">
Dezember
</option>
</select>
<a href="javascript:void(null)" onclick="showCalendar1()">
<img id="dateLink1" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/>
</a>
</div>
<div style="position:absolute;left:209px;top:382px">
<select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
<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 id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
<option value="Jan">
Januar
</option>
<option value="Feb">
Februar
</option>
<option value="Mar">
März
</option>
<option value="Apr">
April
</option>
<option value="May">
Mai
</option>
<option value="Jun">
Juni
</option>
<option value="Jul">
Juli
</option>
<option value="Aug">
August
</option>
<option value="Sep">
September
</option>
<option value="Oct">
Oktober
</option>
<option value="Nov">
November
</option>
<option value="Dec">
Dezember
</option>
</select>
<a href="javascript:void(null)" onclick="showCalendar2()"><img id="dateLink2" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/></a>
</div>
<div id="container1" style="position:absolute;display:none"></div>
<div id="container2" style="position:absolute;display:none"></div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php echo yadl_spaceid( '792401513' ); ?>
</body>
</html>

36
www/extras/yui/examples/calendar/intl_germany/js/Calendar2up_DE.js vendored
View file

@ -1,36 +0,0 @@
YAHOO.widget.Calendar2up_DE_Cal = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.init(id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_DE_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
YAHOO.widget.Calendar2up_DE_Cal.prototype.customConfig = function() {
this.Config.Locale.MONTHS_SHORT = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
this.Config.Locale.MONTHS_LONG = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
this.Config.Locale.WEEKDAYS_1CHAR = ["S", "M", "D", "M", "D", "F", "S"];
this.Config.Locale.WEEKDAYS_SHORT = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
this.Config.Locale.WEEKDAYS_MEDIUM = ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"];
this.Config.Locale.WEEKDAYS_LONG = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
this.Config.Options.START_WEEKDAY = 1;
}
/*************************************/
YAHOO.widget.Calendar2up_DE = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.buildWrapper(containerId);
this.init(2, id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_DE.prototype = new YAHOO.widget.Calendar2up();
YAHOO.widget.Calendar2up_DE.prototype.constructChild = function(id,containerId,monthyear,selected) {
var cal = new YAHOO.widget.Calendar2up_DE_Cal(id,containerId,monthyear,selected);
return cal;
};

15
www/extras/yui/examples/calendar/intl_japan/css/Calendar_JP.css
View file

@ -1,15 +0,0 @@
#bgImg {
margin-left:75px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:0;
}
.yui-calendar td.sunday {
background-color: rgb(253, 224, 224);
}
.yui-calendar td.sunday a {
color:red;
}

BIN
www/extras/yui/examples/calendar/intl_japan/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/intl_japan/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/intl_japan/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

BIN
www/extras/yui/examples/calendar/intl_japan/img/ytravel.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 39 KiB

237
www/extras/yui/examples/calendar/intl_japan/index.html
View file

@ -1,237 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//JP" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - 2-Up Japanese Implementation</title>
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../build/event/event.js" ></script>
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<link rel="stylesheet" href="css/Calendar_JP.css" type="text/css">
<script language="javascript">
/* Begin Japanese 2up Calendar */
YAHOO.widget.Calendar2up_JP_Cal = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.init(id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_JP_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
YAHOO.widget.Calendar2up_JP_Cal.prototype.customConfig = function() {
this.Config.Locale.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"];
this.Config.Locale.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"];
this.Config.Locale.WEEKDAYS_1CHAR = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Locale.WEEKDAYS_SHORT = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Locale.WEEKDAYS_MEDIUM = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Locale.WEEKDAYS_LONG = ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"];
this.Config.Options.START_WEEKDAY = 1;
}
/**********************************/
YAHOO.widget.Calendar2up_JP = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.buildWrapper(containerId);
this.init(2, id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_JP.prototype = new YAHOO.widget.Calendar2up();
YAHOO.widget.Calendar2up_JP.prototype.constructChild = function(id,containerId,monthyear,selected) {
var cal = new YAHOO.widget.Calendar2up_JP_Cal(id,containerId,monthyear,selected);
return cal;
};
/* End Japanese 2up Calendar */
YAHOO.namespace("example.calendar");
var today,link1,selMonth1,selDay1,selYear1,container1;
function initJapan() {
today = new Date();
var thisMonth = today.getMonth();
var thisDay = today.getDate();
var thisYear = today.getFullYear();
container1 = document.getElementById('container1');
link1 = document.getElementById('dateLink1');
selMonth1 = document.getElementById('selMonth1');
selDay1 = document.getElementById('selDay1');
selYear1 = document.getElementById('selYear1');
selMonth1.selectedIndex = thisMonth;
selDay1.selectedIndex = thisDay-1;
YAHOO.example.calendar.cal = new YAHOO.widget.Calendar2up_JP("YAHOO.example.calendar.cal","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
YAHOO.example.calendar.cal.setChildFunction("onSelect",setDate1);
YAHOO.example.calendar.cal.title = "&#x65E5;&#x4ED8;&#x3092;&#x9078;&#x3073;&#x306A;&#x3055;&#x3044;";
var renderSunday = function(cal,cell) {
YAHOO.util.Dom.addClass(cell, "sunday");
}
YAHOO.example.calendar.cal.addWeekdayRenderer(1, renderSunday);
YAHOO.example.calendar.cal.render();
}
function showCalendar1() {
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal.outerContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
}
function setDate1() {
var date1 = YAHOO.example.calendar.cal.getSelectedDates()[0];
selMonth1.selectedIndex=date1.getMonth();
selDay1.selectedIndex=date1.getDate()-1;
YAHOO.example.calendar.cal.hide();
}
function changeDate1() {
var month = selMonth1.selectedIndex;
var day = selDay1.selectedIndex + 1;
var year = selYear1.options[selYear1.selectedIndex].value;
YAHOO.example.calendar.cal.select((month+1) + "/" + day + "/" + year);
YAHOO.example.calendar.cal.setMonth(month);
YAHOO.example.calendar.cal.setYear(year);
YAHOO.example.calendar.cal.render();
}
YAHOO.util.Event.addListener(window, "load", initJapan);
</script>
</head>
<body style="margin:0px">
<img src="img/ytravel.gif" id="bgImg">
<div style="position:absolute;left:230px;top:190px">
<select name="selYear1" id="selYear1" onchange="changeDate1()" style="vertical-align:middle">
<option value="2005" selected>2005&#x5E74;</option>
<option value="2006">2006&#x5E74;</option>
<option value="2007">2007&#x5E74;</option>
<option value="2008">2008&#x5E74;</option>
<option value="2009">2009&#x5E74;</option>
<option value="2010">2010&#x5E74;</option>
<option value="2011">2011&#x5E74;</option>
</select>
<select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
<option value="Jan">1&#x6708;</option>
<option value="Feb">2&#x6708;</option>
<option value="Mar">3&#x6708;</option>
<option value="Apr">4&#x6708;</option>
<option value="May">5&#x6708;</option>
<option value="Jun">6&#x6708;</option>
<option value="Jul">7&#x6708;</option>
<option value="Aug">8&#x6708;</option>
<option value="Sep">9&#x6708;</option>
<option value="Oct">10&#x6708;</option>
<option value="Nov">11&#x6708;</option>
<option value="Dec">12&#x6708;</option>
</select>
<select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
<option value="1">
1&#x65E5;</option>
<option value="2">
2&#x65E5;</option>
<option value="3">
3&#x65E5;</option>
<option value="4">
4&#x65E5;</option>
<option value="5">
5&#x65E5;</option>
<option value="6">
6&#x65E5;</option>
<option value="7">
7&#x65E5;</option>
<option value="8">
8&#x65E5;</option>
<option value="9">
9&#x65E5;</option>
<option value="10">
10&#x65E5;</option>
<option value="11">
11&#x65E5;</option>
<option value="12">
12&#x65E5;</option>
<option value="13">
13&#x65E5;</option>
<option value="14">
14&#x65E5;</option>
<option value="15">
15&#x65E5;</option>
<option value="16">
16&#x65E5;</option>
<option value="17">
17&#x65E5;</option>
<option value="18">
18&#x65E5;</option>
<option value="19">
19&#x65E5;</option>
<option value="20">
20&#x65E5;</option>
<option value="21">
21&#x65E5;</option>
<option value="22">
22&#x65E5;</option>
<option value="23">
23&#x65E5;</option>
<option value="24">
24&#x65E5;</option>
<option value="25">
25&#x65E5;</option>
<option value="26">
26&#x65E5;</option>
<option value="27">
27&#x65E5;</option>
<option value="28">
28&#x65E5;</option>
<option value="29">
29&#x65E5;</option>
<option value="30">
30&#x65E5;</option>
<option value="31">
31&#x65E5;</option>
</select>
<a href="javascript:void(null)" onclick="showCalendar1()">
<img id="dateLink1" src="../img/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/>
</a>
</div>
<div id="container1" style="position:absolute;display:none"></div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<?php echo yadl_spaceid( '792401524' ); ?>
</body>
</html>

36
www/extras/yui/examples/calendar/intl_japan/js/Calendar2up_JP.js vendored
View file

@ -1,36 +0,0 @@
YAHOO.widget.Calendar2up_JP_Cal = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.init(id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_JP_Cal.prototype = new YAHOO.widget.Calendar2up_Cal();
YAHOO.widget.Calendar2up_JP_Cal.prototype.customConfig = function() {
this.Config.Locale.MONTHS_SHORT = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
this.Config.Locale.MONTHS_LONG = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
this.Config.Locale.WEEKDAYS_1CHAR = ["日", "月", "火", "水", "木", "金", "土"];
this.Config.Locale.WEEKDAYS_SHORT = ["日", "月", "火", "水", "木", "金", "土"];
this.Config.Locale.WEEKDAYS_MEDIUM = ["日", "月", "火", "水", "木", "金", "土"];
this.Config.Locale.WEEKDAYS_LONG = ["日", "月", "火", "水", "木", "金", "土"];
this.Config.Options.START_WEEKDAY = 1;
}
/**********************************/
YAHOO.widget.Calendar2up_JP = function(id, containerId, monthyear, selected) {
if (arguments.length > 0)
{
this.buildWrapper(containerId);
this.init(2, id, containerId, monthyear, selected);
}
}
YAHOO.widget.Calendar2up_JP.prototype = new YAHOO.widget.Calendar2up();
YAHOO.widget.Calendar2up_JP.prototype.constructChild = function(id,containerId,monthyear,selected) {
var cal = new YAHOO.widget.Calendar2up_JP_Cal(id,containerId,monthyear,selected);
return cal;
};

BIN
www/extras/yui/examples/calendar/min_max_date/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/min_max_date/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/min_max_date/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

80
www/extras/yui/examples/calendar/min_max_date/index.html
View file

@ -1,80 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Mix/Max Implementation</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
YAHOO.example.calendar.cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
YAHOO.example.calendar.cal1.render();
}
</script>
</head>
<body onload="init()">
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Future-Only Single-Select Implementation</h4>
<p>To construct a calendar where the user can only select future dates, the code would read as follows:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
cal1.render();
}
</textarea>
<p>Notice that we're setting the minimum date to tomorrow's date by adding one day to a newly instantiated date (using the DateMath helper class) and setting it into the calendar's minDate property. cal1.maxDate remains null since there is no restriction on how far into the future the user can make selections.</p>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

BIN
www/extras/yui/examples/calendar/multi_select/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/multi_select/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/multi_select/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

72
www/extras/yui/examples/calendar/multi_select/index.html
View file

@ -1,72 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Multi-Select Implementation</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1", "cal1Container");
YAHOO.example.calendar.cal1.Options.MULTI_SELECT = true;
YAHOO.example.calendar.cal1.render();
}
</script>
</head>
<body onload="init()">
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Simple Multi-Select Implementation</h4>
<p>This implementation modifies the <a href="../default/index.html">default Calendar</a> to allow for selection of multiple values. This is accomplished by simply changing an option in the calendar configuration options: </p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
cal1.Options.MULTI_SELECT = true;
cal1.render();
}
</textarea>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
</div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

BIN
www/extras/yui/examples/calendar/multi_select_2up/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/multi_select_2up/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/multi_select_2up/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

85
www/extras/yui/examples/calendar/multi_select_2up/index.html
View file

@ -1,85 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Multi-Select 2-up Implementation</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar2up("YAHOO.example.calendar.cal1","cal1Container");
var customConfig = function() {
this.Options.MULTI_SELECT = true;
}
YAHOO.example.calendar.cal1.setChildFunction("customConfig", customConfig);
YAHOO.example.calendar.cal1.callChildFunction("customConfig");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Multi-Select 2-up Implementation</h4>
<p>To allow for multiple selections on a 2-up Calendar, use the following code:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar2up("cal1","cal1Container");
var customConfig = function() {
this.Options.MULTI_SELECT = true;
}
cal1.setChildFunction("customConfig", customConfig);
cal1.callChildFunction("customConfig");
cal1.render();
}
</textarea>
<textarea name="code" class="HTML" cols="60" rows="1"><div id="cal1Container"></div></textarea>
</div>
<div id="cal1Container" style="position:absolute;left:50px;top:400px"></div>
</body>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</html>

BIN
www/extras/yui/examples/calendar/renderer/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/renderer/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/renderer/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

90
www/extras/yui/examples/calendar/renderer/index.html
View file

@ -1,90 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Custom Renderer Example</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<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.holiday {
background-color:yellow;
font-weight:bold;
}
</style>
<script language="javascript">
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.renderHoliday = function(workingDate, cell) {
YAHOO.util.Dom.addClass(cell, "holiday");
}
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","1/2006");
YAHOO.example.calendar.cal1.addRenderer("12/25,1/1", YAHOO.example.calendar.renderHoliday);
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Holiday Renderer Implementation</h4>
<p>Here is an example of how to create renderers to format specific holidays with a special style:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
var renderHoliday = function(workingDate, cell) {
YAHOO.util.Dom.addClass(cell, "holiday");
}
function init() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
cal1.addRenderer("12/25,1/1", renderHoliday);
cal1.render();
}
</textarea>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

BIN
www/extras/yui/examples/calendar/restriction/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/restriction/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/restriction/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

75
www/extras/yui/examples/calendar/restriction/index.html
View file

@ -1,75 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Date Restriction Example</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","2/2006");
YAHOO.example.calendar.cal1.addRenderer("2/28/2006",YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.render();
}
</script>
</head>
<body onload="init()">
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Date Restriction Implementation</h4>
<p>This example shows how to restrict selection of a specific date:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
cal1.addRenderer("2/28/2006",cal1.renderBodyCellRestricted);
cal1.render();
}
</textarea>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

BIN
www/extras/yui/examples/calendar/row_highlight/img/callt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 93 B

BIN
www/extras/yui/examples/calendar/row_highlight/img/calrt.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 B

BIN
www/extras/yui/examples/calendar/row_highlight/img/calx.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 88 B

159
www/extras/yui/examples/calendar/row_highlight/index.html
View file

@ -1,159 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! Calendar Control - Row Highlight Example</title>
<link rel="stylesheet" href="../css/examples.css" type="text/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>
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
<style>
/* highlight the whole row */
.yui-calendar tr.hilite-row td.calcell {
background-color:yellow;
}
/* highlight the current cell in the standard highlight color */
.yui-calendar tr.hilite-row td.calcellhover {
cursor:pointer;
color:#FFF;
background-color:#FF9900;
border:1px solid #FF9900;
}
/* make sure out of month cells don't highlight too */
.yui-calendar tr.hilite-row td.calcell.oom {
cursor:default;
color:#999;
background-color:#EEE;
border:1px solid #E0E0E0;
}
</style>
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.util.Dom.addClass(row, "hilite-row");
}
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.util.Dom.removeClass(row, "hilite-row");
}
YAHOO.example.calendar.cal1.render();
}
</script>
</head>
<body onload="init()">
<img id="logo" src="../img/logo.gif"/>
<div id="pageTitle">
<h3>Calendar Control</h3>
</div>
<div class="column left">
<h4>Row Highlight Implementation</h4>
<p>This example shows how to highlight the row of the current hover date, using CSS and some minor JavaScript event changes:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
<style>
/* highlight the whole row */
.yui-calendar tr.hilite-row td.calcell {
background-color:yellow;
}
/* highlight the current cell in the standard highlight color */
.yui-calendar tr.hilite-row td.calcellhover {
cursor:pointer;
color:#FFF;
background-color:#FF9900;
border:1px solid #FF9900;
}
/* make sure out of month cells don't highlight too */
.yui-calendar tr.hilite-row td.calcell.oom {
cursor:default;
color:#999;
background-color:#EEE;
border:1px solid #E0E0E0;
}
</style>
<script language="javascript">
var cal1;
function init() {
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
cal1.doCellMouseOver = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.widget.Calendar_Core.prependCssClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.widget.Calendar_Core.prependCssClass(row, "hilite-row");
}
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
cal1.doCellMouseOut = function(e, cal) {
var cell = this;
var row = cell.parentNode;
YAHOO.widget.Calendar_Core.removeCssClass(this, cal.Style.CSS_CELL_HOVER);
YAHOO.widget.Calendar_Core.removeCssClass(row, "hilite-row");
}
cal1.render();
}
</script>
</textarea>
</div>
<div class="column right">
<div style="margin-left:auto;margin-right:auto;width:150px">
<div id="cal1Container"></div>
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
</div>
</div>
</div>
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

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

@ -1,112 +0,0 @@
<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 creating 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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

123
www/extras/yui/examples/connection/get.html
View file

@ -1,123 +0,0 @@
<html>
<head>
<script src = "../../build/yahoo.js" ></script>
<script src = "../../build/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 = "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 handleSuccess = function(o){
function parseHeaders(){
var allHeaders = headerStr.split("\n");
var headers;
for(var i=0; i < headers.length; i++){
var delimitPos = header[i].indexOf(':');
if(delimitPos != -1){
headers[i] = "&lt;p&gt" +
headers[i].substring(0,delimitPos) + ":"+
headers[i].substring(delimitPos+1) + "&lt;/p&gt;";
}
return headers;
}
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 += "HTTP headers: " + parseHeaders();
div.innerHTML += "Server response: " + o.responseText;
div.innerHTML += "Argument object: property foo = " + o.argument.foo +
"and property bar = " + o.argument.bar;
}
}
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.Connection.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 = "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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

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

@ -1,23 +0,0 @@
<!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">Transaction timeout</a></li>
</ul>
</div>
</div>
</body>
</html>

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

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

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

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

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

@ -1,18 +0,0 @@
<?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
View file

@ -1,19 +0,0 @@
<?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
View file

@ -1,102 +0,0 @@
<html>
<head>
<script src = "../../build/yahoo.js" ></script>
<script src = "../../build/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.Connection.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 = "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="../../docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>

138
www/extras/yui/examples/connection/weather.html
View file

@ -1,138 +0,0 @@
<html>
<head>
<script src = "../../build/yahoo/yahoo-min.js" ></script>
<script src = "../../build/connection/connection-min.js" ></script>
</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 -- 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>Method 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>
<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>
</body>
</html>

14
www/extras/yui/examples/container/css/ResizePanel.css
View file

@ -1,14 +0,0 @@
.panel {
overflow:visible;
}
.panel .bd {
overflow:auto;
}
.panel .ft {
padding:0px;
height:4px;
font-size:4px;
background-color:#CCC;
}

187
www/extras/yui/examples/container/css/example.css
View file

@ -1,187 +0,0 @@
body {
background-image:url(../img/bg.png);
background-repeat:repeat-x;
background-color:#FFFFFF;
}
.homeLink {
background-color:#CCC;position:absolute;right:0;top:0;text-align:center;padding:5px;margin-bottom:5px;border:1px solid #CCC;width:75px;
}
label {
float:left;
width:150px;
}
.buttonset {
clear:both;
text-align:right;
}
.box code, .box xmp {
display:block;
padding:5px;
font-size:11px;
background-color:#EEE;
border:1px solid #555;
margin:10px;
}
.bd form {
margin:0px;
}
.box {
border:1px solid #CCC;
background-color:#FFF;
padding:5px;
width:700px;
}
.box p {
margin:10px;
}
.box h1 {
font-family:georgia,times new roman,times,serif;
color:purple;
font-size:24px;
margin-top:0px;
margin-bottom:10px;
padding-bottom:5px;
border-bottom:1px dotted black;
}
.box h2 {
font-family:georgia,times new roman,times,serif;
color:purple;
font-size:14px;
margin-top:0px;
margin-bottom:10px;
padding-bottom:5px;
border-bottom:1px dotted black;
}
.box h3 {
font-family:georgia,times new roman,times,serif;
color:black;
font-size:11px;
margin-top:0px;
margin-bottom:5px;
padding-bottom:5px;
}
button {
font:100 76% verdana;
text-decoration:none;
background-color: #E4E4E4;
color: #333;
cursor: hand;
vertical-align: middle;
border: 2px solid #797979;
border-top-color:#FFF;
border-left-color:#FFF;
margin:2px;
padding:2px;
}
button.default {
font-weight:bold;
}
button:hover, button.hover {
border:2px solid #90A029;
background-color:#EBF09E;
border-top-color:#FFF;
border-left-color:#FFF;
}
button:active {
border:2px solid #E4E4E4;
background-color:#BBB;
border-top-color:#333;
border-left-color:#333;
}
div.overlayform {
width:700px;
border:1px solid black;
background-color:#FFF;
}
div.overlayform .formheader {
padding:5px;
font-weight:bold;
background-color:#D92121;
color:#FFF;
}
div.overlayform textarea {
width:450px;
height:50px;
}
div.overlayform button {
float:right;
margin-right:10px
}
div.row {
clear:both;
vertical-align:middle;
padding-bottom:5px;
}
div.row.header {
font-weight:bold;
background-color:#666;
color:#FFF;
vertical-align:middle;
height:1em;
}
div.row.first {
margin-top:5px;
}
div.row.last {
margin-bottom:5px;
}
div.row div.label {
float: left;
width: 125px;
margin-right:10px;
text-align: right;
vertical-align:middle;
}
div.row div.formw {
float: left;
text-align: left;
vertical-align:middle;
}
#resp {
font-family:courier;
font-size:12px;
margin-top:0px;
}
.box label {
float:none;
}
.radioline {
width:100%;
clear:both;
}
.radioline.first {
margin-top:10px;
}
.radioline.last {
margin-bottom:10px;
}

65
www/extras/yui/examples/container/css/module.css
View file

@ -1,65 +0,0 @@
.module {
margin:5px;
padding:5px;
border:1px solid red;
background-color:#FFFFFF;
}
div.overlayform {
width:700px;
border:1px solid black;
background-color:#FFF;
}
div.overlayform .formheader {
padding:5px;
font-weight:bold;
background-color:#D92121;
color:#FFF;
}
div.overlayform textarea {
width:450px;
height:50px;
}
div.overlayform button {
float:right;
margin-right:10px
}
div.row {
clear:both;
vertical-align:middle;
padding-bottom:5px;
}
div.row.header {
font-weight:bold;
background-color:#666;
color:#FFF;
vertical-align:middle;
height:1em;
}
div.row.first {
margin-top:5px;
}
div.row.last {
margin-bottom:5px;
}
div.row div.label {
float: left;
width: 125px;
margin-right:10px;
text-align: right;
vertical-align:middle;
}
div.row div.formw {
float: left;
text-align: left;
vertical-align:middle;
}

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