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

upgrading to YUI 2.6

Browse source 
data tables are going to need some work yet, but the other stuff seems to be working 100%
This commit is contained in:
JT Smith 2008-10-22 23:53:29 +00:00
parent a041e93da8
commit 20f8df1291
2106 changed files with 993560 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

328
www/extras/yui/examples/animation/anim-chaining.html Normal file
View file

File diff suppressed because one or more lines are too long

132
www/extras/yui/examples/animation/anim-chaining_clean.html Normal file
View file

@ -0,0 +1,132 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Chaining Animations Using <code>onComplete</code></title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#animator {
background-color:#003366;
color:#fff;
height:15em;
width: 15em;
position:relative;
margin:1em;
padding:1em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Chaining Animations Using <code>onComplete</code></h1>
<div class="exampleIntro">
<p>A common use case for animation involves causing two or more animations to fire sequentially. This is known as <em>chaining</em>. It's easy to chain animations using the <a href="http://developer.yahoo.com/yui/animation/">YUI Animation Utility</a>'s custom events.</p>
<p>In this example, a color animation is set to fire <em>after</em> an animation of position. Click the button below to start the sequence.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!--markup for YUI Button Control-->
<span id="startAnim" class="yui-button yui-link-button">
<em class="first-child">
<a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a>
</em>
</span>
<!--The animated element.-->
<div id="animator">
This element will animate position
and then color when you click the
button.
</div>
<script language="javascript">
//Setup the example once the animator div is present
//in the DOM.
YAHOO.util.Event.onAvailable("animator", function() {
//This is the first animation; this one will
//fire when the button is clicked.
var move = new YAHOO.util.Anim("animator", {
left: {from:0, to:75}
}, 1);
//This is the second animation; it will fire
//when the first animation is complete.
var changeColor = new YAHOO.util.ColorAnim("animator", {
backgroundColor: {from:"#003366", to:"#ff0000"}
}, 1);
//Here's the chaining glue: We subscribe to the
//first animation's onComplete event, and in
//our handler we animate the second animation:
move.onComplete.subscribe(function() {
changeColor.animate();
});
//Here we set up our YUI Button and subcribe to
//its click event. When clicked, it will
//animate the first animation:
var startAnim = new YAHOO.widget.Button("startAnim");
startAnim.subscribe("click", function() {
//reset the color value to the start so that
//the animation can be run multiple times:
YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366");
move.animate();
});
//You can also make use of the onStart and onTween
//custom events in Animation; here, we'll log all
//of changeColor's custom events and peek at their
//argument signatures:
changeColor.onStart.subscribe(function() {
YAHOO.log("changeColor animation is starting.", "info", "example");
});
changeColor.onTween.subscribe(function(s, o) {
YAHOO.log("changeColor onTween firing with these arguments: " +
YAHOO.lang.dump(o), "info", "example");
});
changeColor.onComplete.subscribe(function(s, o) {
YAHOO.log("changeColor onComplete firing with these arguments: " +
YAHOO.lang.dump(o), "info", "example");
});
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

332
www/extras/yui/examples/animation/anim-chaining_log.html Normal file
View file

File diff suppressed because one or more lines are too long

215
www/extras/yui/examples/animation/attributes.html Normal file
View file

File diff suppressed because one or more lines are too long

73
www/extras/yui/examples/animation/attributes_clean.html Normal file
View file

@ -0,0 +1,73 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animating Multiple Attributes</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
height:100px;
width:100px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animating Multiple Attributes</h1>
<div class="exampleIntro">
<p>This demonstrates how to animate multiple attributes of an HTMLElement using the YUI Animation Utility. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
height: { to: 50 },
width: { to: 50 }
};
var anim = new YAHOO.util.Anim('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

213
www/extras/yui/examples/animation/basic.html Normal file
View file

File diff suppressed because one or more lines are too long

73
www/extras/yui/examples/animation/basic_clean.html Normal file
View file

@ -0,0 +1,73 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Animation</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
overflow:hidden;
width:200px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Animation</h1>
<div class="exampleIntro">
<p>This demonstrates how to apply a simple animation effect to an HTMLElement. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
width: { to: 0 }
};
var anim = new YAHOO.util.Anim('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

72
www/extras/yui/examples/animation/colors_clean.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animating Colors</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
height:100px;
width:100px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animating Colors</h1>
<div class="exampleIntro">
<p>This demonstrates how to use the YUI Animation to animate colors. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
color: { to: '#06e' },
backgroundColor: { to: '#e06' }
};
var anim = new YAHOO.util.ColorAnim('demo', attributes);
YAHOO.util.Event.on(document, 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

211
www/extras/yui/examples/animation/control.html Normal file
View file

File diff suppressed because one or more lines are too long

72
www/extras/yui/examples/animation/control_clean.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animating Along a Curved Path</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
height:30px;
width:30px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animating Along a Curved Path</h1>
<div class="exampleIntro">
<p>This demonstrates how to use the YUI Animation to animate along a curved path. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo"></div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
points: { to: [600, 10], control: [ [300, 100], [800, 800] ] }
};
var anim = new YAHOO.util.Motion('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

72
www/extras/yui/examples/animation/easing_clean.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animation Easing</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
overflow:hidden;
width:200px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animation Easing</h1>
<div class="exampleIntro">
<p>This demonstrates how to apply an Easing to a YUI Animation instance. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
width: { to: 0 }
};
var anim = new YAHOO.util.Anim('demo', attributes, 1.5, YAHOO.util.Easing.backIn);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

213
www/extras/yui/examples/animation/from.html Normal file
View file

File diff suppressed because one or more lines are too long

72
www/extras/yui/examples/animation/from_clean.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animating From a Given Value</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
overflow:hidden;
width:200px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animating From a Given Value</h1>
<div class="exampleIntro">
<p>This demonstrates how to start a YUI Animation from a given value. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
width: { from: 600, to: 0 }
};
var anim = new YAHOO.util.Anim('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

213
www/extras/yui/examples/animation/motion.html Normal file
View file

File diff suppressed because one or more lines are too long

72
www/extras/yui/examples/animation/motion_clean.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animating Motion</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
height:30px;
width:30px;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animating Motion</h1>
<div class="exampleIntro">
<p>This demonstrates how to use the YUI Animation to animate the motion of an HTMLElement. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo"></div>
<button id="demo-run">run</button>
<script type="text/javascript">
(function() {
var attributes = {
points: { to: [600, 10] }
};
var anim = new YAHOO.util.Motion('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

223
www/extras/yui/examples/animation/scroll.html Normal file
View file

File diff suppressed because one or more lines are too long

81
www/extras/yui/examples/animation/scroll_clean.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Animated Scrolling</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
height:6em;
width:20em;
overflow:auto;
margin-bottom:1em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Animated Scrolling</h1>
<div class="exampleIntro">
<p>This demonstrates how to use the YUI Animation to animate the scrolling of an HTMLElement. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<style>
#demo {
height:6em;
width:20em;
overflow:auto;
}
</style>
<div id="demo">
<p>Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.</p>
</div>
<button id="demo-run">run</button>
<script>
(function() {
var attributes = {
scroll: { to: [0, 200] }
};
var anim = new YAHOO.util.Scroll('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

211
www/extras/yui/examples/animation/units.html Normal file
View file

File diff suppressed because one or more lines are too long

71
www/extras/yui/examples/animation/units_clean.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using Custom Units for an Animation</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#demo {
background:#ccc;
margin-bottom:1em;
overflow:hidden;
width:30em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using Custom Units for an Animation</h1>
<div class="exampleIntro">
<p>This demonstrates how to use YUI Animation with units other than pixels. Click the button to begin the demo.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">Demo</div>
<button id="demo-run">run</button>
<script>
(function() {
var attributes = {
width: { from: 30, to: 10, unit:'em' }
};
var anim = new YAHOO.util.Anim('demo', attributes);
YAHOO.util.Event.on('demo-run', 'click', function() {
anim.animate();
});
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

245
www/extras/yui/examples/autocomplete/ac_basic_array.html Normal file
View file

File diff suppressed because one or more lines are too long

81
www/extras/yui/examples/autocomplete/ac_basic_array_clean.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Local Data</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Local Data</h1>
<div class="exampleIntro">
<p>This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. Enabling the <code>prehighlightClassName</code> and <code>useShadow</code> features, as well as pulling in the Animation utility, provides an ehanced visual user experience.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Enter a state:</h3>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.BasicLocal = function() {
// Use a LocalDataSource
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
// Optional to define fields for single-dimensional array
oDS.responseSchema = {fields : ["state"]};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
oAC.useShadow = true;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

249
www/extras/yui/examples/autocomplete/ac_basic_array_log.html Normal file
View file

File diff suppressed because one or more lines are too long

248
www/extras/yui/examples/autocomplete/ac_basic_xhr.html Normal file
View file

File diff suppressed because one or more lines are too long

86
www/extras/yui/examples/autocomplete/ac_basic_xhr_clean.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Remote Data</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:25em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Remote Data</h1>
<div class="exampleIntro">
<p>This AutoComplete implementation points to an online script that serves a data as delimited plain text. Enabling caching on the DataSource can reduce trips to the server and speed performance for repeated queries.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Search our database:</h3>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.BasicRemote = function() {
// Use an XHRDataSource
var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
// Set the responseType
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
// Define the schema of the delimited results
oDS.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
// Enable caching
oDS.maxCacheEntries = 5;
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

252
www/extras/yui/examples/autocomplete/ac_basic_xhr_log.html Normal file
View file

File diff suppressed because one or more lines are too long

461
www/extras/yui/examples/autocomplete/ac_combobox.html Normal file
View file

File diff suppressed because one or more lines are too long

187
www/extras/yui/examples/autocomplete/ac_combobox_clean.html Normal file
View file

@ -0,0 +1,187 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Combo Box</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for inline instances */
.yui-skin-sam .yui-ac-input { position:static;width:20em; vertical-align:middle;}
.yui-skin-sam .yui-ac-container { width:20em;left:0px;}
/* needed for stacked instances for ie & sf z-index bug of absolute inside relative els */
#bAutoComplete { z-index:9001; }
#lAutoComplete { z-index:9000; }
/* buttons */
.yui-ac .yui-button {vertical-align:middle;}
.yui-ac .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-rt.png) center center no-repeat }
.yui-ac .open .yui-button button {background: url(../autocomplete/assets/img/ac-arrow-dn.png) center center no-repeat}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Combo Box</h1>
<div class="exampleIntro">
<p>This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. There are also some CSS customizations which must be made to support multiple stacked AutoComplete instances, which this example demonstrates.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>What would you like for breakfast?</h3>
<div id="bAutoComplete">
<input id="bInput" type="text"> <span id="toggleB"></span>
<div id="bContainer"></div>
</div>
<h3>What would you like for lunch?</h3>
<div id="lAutoComplete">
<input id="lInput" type="text"> <span id="toggleL"></span>
<div id="lContainer"></div>
</div>
<h3>What would you like for dinner?</h3>
<div id="dAutoComplete">
<input id="dInput" type="text"> <span id="toggleD"></span>
<div id="dContainer"></div>
</div>
<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.Combobox = function() {
// Instantiate DataSources
var bDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.breakfasts);
var lDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.lunches);
var dDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.menu.dinners);
// Instantiate AutoCompletes
var oConfigs = {
prehighlightClassName: "yui-ac-prehighlight",
useShadow: true,
queryDelay: 0,
minQueryLength: 0,
animVert: .01
}
var bAC = new YAHOO.widget.AutoComplete("bInput", "bContainer", bDS, oConfigs);
var lAC = new YAHOO.widget.AutoComplete("lInput", "lContainer", lDS, oConfigs);
var dAC = new YAHOO.widget.AutoComplete("dInput", "dContainer", dDS, oConfigs);
// Breakfast combobox
var bToggler = YAHOO.util.Dom.get("toggleB");
var oPushButtonB = new YAHOO.widget.Button({container:bToggler});
var toggleB = function(e) {
//YAHOO.util.Event.stopEvent(e);
if(!YAHOO.util.Dom.hasClass(bToggler, "open")) {
YAHOO.util.Dom.addClass(bToggler, "open")
}
// Is open
if(bAC.isContainerOpen()) {
bAC.collapseContainer();
}
// Is closed
else {
bAC.getInputEl().focus(); // Needed to keep widget active
setTimeout(function() { // For IE
bAC.sendQuery("");
},0);
}
}
oPushButtonB.on("click", toggleB);
bAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(bToggler, "open")});
// Lunch combobox
var lToggler = YAHOO.util.Dom.get("toggleL");
var oPushButtonL = new YAHOO.widget.Button({container:lToggler});
var toggleL = function(e) {
//YAHOO.util.Event.stopEvent(e);
if(!YAHOO.util.Dom.hasClass(lToggler, "open")) {
YAHOO.util.Dom.addClass(lToggler, "open")
}
// Is open
if(lAC.isContainerOpen()) {
lAC.collapseContainer();
}
// Is closed
else {
lAC.getInputEl().focus(); // Needed to keep widget active
setTimeout(function() { // For IE
lAC.sendQuery("");
},0);
}
}
oPushButtonL.on("click", toggleL);
lAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(lToggler, "open")});
// Dinner combobox
var dToggler = YAHOO.util.Dom.get("toggleD");
var oPushButtonD = new YAHOO.widget.Button({container:dToggler});
var toggleD = function(e) {
//YAHOO.util.Event.stopEvent(e);
if(!YAHOO.util.Dom.hasClass(dToggler, "open")) {
YAHOO.util.Dom.addClass(dToggler, "open")
}
// Is open
if(dAC.isContainerOpen()) {
dAC.collapseContainer();
}
// Is closed
else {
dAC.getInputEl().focus(); // Needed to keep widget active
setTimeout(function() { // For IE
dAC.sendQuery("");
},0);
}
}
oPushButtonD.on("click", toggleD);
dAC.containerCollapseEvent.subscribe(function(){YAHOO.util.Dom.removeClass(dToggler, "open")});
return {
bDS: bDS,
bAC: bAC,
lDS: lDS,
lAC: lAC,
dDS: dDS,
dAC: dAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

465
www/extras/yui/examples/autocomplete/ac_combobox_log.html Normal file
View file

File diff suppressed because one or more lines are too long

425
www/extras/yui/examples/autocomplete/ac_customize.html Normal file
View file

File diff suppressed because one or more lines are too long

321
www/extras/yui/examples/autocomplete/ac_customize_clean.html Normal file
View file

@ -0,0 +1,321 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Configurations Dashboard</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#dashboard_autocomplete {margin:0 1em 0 0;width:40%;height:4em;}/* set width and height of widget here*/
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Configurations Dashboard</h1>
<div class="exampleIntro">
<p>This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction. The first field after the AutoComplete input textbox is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it. The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes feel in the browser.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- AutoComplete begins -->
<h3>Search the Web Using Yahoo!'s Search API:</h3>
<div id="dashboard_autocomplete">
<input id="dashboard_input" type="text" name="p">
<div id="dashboard_container"></div>
</div>
<!-- AutoComplete ends -->
<!-- Panel begins -->
<h3>Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:</h3>
<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">
<label for="animHoriz">Animate Horizontally</label>
</div>
<div>
<input id="animVert" type="checkbox" checked>
<label for="animVert">Animate Vertically</label>
</div>
<div>
<label for="animSpeedInput">Animation Speed: </label>
<input id="animSpeedInput" type="text" size="2" value="0.3">
<input id="animSpeed" type="button" value="Update">
</div>
<div>
<input id="useShadow" type="checkbox">
<label for="useShadow">Use Shadow</label>
</div>
<div>
<input id="useIFrame" type="checkbox">
<label for="useIFrame">Use IFrame</label>
</div>
<div>
<input id="autoHighlight" type="checkbox" checked>
<label for="autoHighlight">Automatically Highlight First Item</label>
</div>
<div>
<input id="typeAhead" type="checkbox">
<label for="typeAhead">Type Ahead</label>
</div>
<div>
<input id="forceSelection" type="checkbox">
<label for="forceSelection">Force a Selection</label>
</div>
<div>
<label for="maxResultsDisplayedInput">Maximum Results: </label>
<input id="maxResultsDisplayedInput" type="text" size="2" value="10">
<input id="maxResultsDisplayed" type="button" value="Update">
</div>
<div>
<label for="minQueryLengthInput">Minimum Query Length: </label>
<input id="minQueryLengthInput" type="text" size="2" value="1">
<input id="minQueryLength" type="button" value="Update">
</div>
<div>
<label for="queryDelayInput">Query Delay: </label>
<input id="queryDelayInput" type="text" size="2" value="0.2">
<input id="queryDelay" type="button" value="Update">
</div>
<div>
<label for="typeAheadDelayInput">TypeAhead Delay: </label>
<input id="typeAheadDelayInput" type="text" size="2" value="0.2">
<input id="typeAheadDelay" type="button" value="Update">
</div>
<div>
<label for="delimCharInput">Delimiter Character(s) like ; or [";", ","]</label><br>
<input id="delimCharInput" type="text" size="30" value="">
<input id="delimChar" type="button" value="Update">
</div>
<div>
<label for="highlightClassNameInput">Highlight Classname</label><br>
<input id="highlightClassNameInput" type="text" size="30" value="yui-ac-highlight" maxlength="30">
<input id="highlightClassName" type="button" value="Update">
</div>
<div>
<label for="prehighlightClassNameInput">Pre-highlight Classname</label><br>
<input id="prehighlightClassNameInput" type="text" size="30" value="" maxlength="30">
<input id="prehighlightClassName" type="button" value="Update">
</div>
<div>
<input id="allowBrowserAutocomplete" type="checkbox" checked>
<label for="allowBrowserAutocomplete">Allow Browser Autocomplete</label>
</div>
<div>
<input id="alwaysShowContainer" type="checkbox">
<label for="alwaysShowContainer">Always Show Container</label>
</div>
<div>
<label for="setHeaderInput">Set Header</label>
<input id="setHeader" type="button" value="Update"><br>
<textarea id="setHeaderInput" cols="25" rows="5"></textarea>
</div>
<div>
<label for="setBodyInput">Set Body</label>
<input id="setBody" type="button" value="Update"><br>
<textarea id="setBodyInput" cols="25" rows="5"></textarea>
</div>
<div>
<label for="setFooterInput">Set Footer</label>
<input id="setFooter" type="button" value="Update"><br>
<textarea id="setFooterInput" cols="25" rows="5"></textarea>
</div>
</form>
<!-- Panel ends -->
<script type="text/javascript">
YAHOO.example.Dashboard = function() {
return {
myDataSource: null,
myAutoComp: null,
// Initialize widgets and the dashboard
init: function() {
// DataSource
this.myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
this.myDataSource.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
this.myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
// AutoComplete
this.myAutoComp = new YAHOO.widget.AutoComplete("dashboard_input","dashboard_container", this.myDataSource);
// IFrame workaround for IE
var ua = navigator.userAgent.toLowerCase();
if(YAHOO.env.ua.ie < 7) {
this.myAutoComp.useIFrame = true;
YAHOO.util.Dom.get("useIFrame").checked = true;
}
// Dashboard DOM event handling (assign scope to the HTML Element)
YAHOO.util.Event.addListener("animHoriz","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("animVert","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("useShadow","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("useIFrame","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("autoHighlight","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("typeAhead","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("forceSelection","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("allowBrowserAutocomplete","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("alwaysShowContainer","click",this.handleCheckboxEvent,this);
YAHOO.util.Event.addListener("animSpeed","click",this.handleNumberInputEvent,this);
YAHOO.util.Event.addListener("maxResultsDisplayed","click",this.handleNumberInputEvent,this);
YAHOO.util.Event.addListener("minQueryLength","click",this.handleNumberInputEvent,this);
YAHOO.util.Event.addListener("queryDelay","click",this.handleNumberInputEvent,this);
YAHOO.util.Event.addListener("typeAheadDelay","click",this.handleNumberInputEvent,this);
YAHOO.util.Event.addListener("delimChar","click",this.handleDelimiterInputEvent,this);
YAHOO.util.Event.addListener("highlightClassName","click",this.handleTextInputEvent,this);
YAHOO.util.Event.addListener("prehighlightClassName","click",this.handleTextInputEvent,this);
YAHOO.util.Event.addListener("setHeader","click",this.handleTextareaEvent,this);
YAHOO.util.Event.addListener("setBody","click",this.handleTextareaEvent,this);
YAHOO.util.Event.addListener("setFooter","click",this.handleTextareaEvent,this);
},
// For valid inputs
updateValue: function(property, value) {
this.myAutoComp[property] = value;
this.logSuccess(property);
},
// For invalid inputs
revertInput: function(property) {
YAHOO.util.Dom.get(property+"Input").value = this.myAutoComp[property];
this.logFailure(property);
},
// Log success message
logSuccess: function(property) {
YAHOO.log("Updated " + property + " to " + this.myAutoComp[property] + ".", "info", "example");
},
// Log failure message
logFailure: function(property, error) {
YAHOO.log("Could not update " + property + ".", "warn","example");
},
// DOM event handler (scope assigned to the HTML Element)
handleCheckboxEvent: function(e, oSelf) {
var property = this.id;
oSelf.updateValue(property, this.checked);
if(oSelf.myAutoComp.useShadow && oSelf.myAutoComp.alwaysShowContainer) {
YAHOO.log("The AutoComplete properties useShadow and alwaysShowContainer should not be enabled concurrently.","warn","example")
}
},
// DOM event handler (scope assigned to the HTML Element)
handleNumberInputEvent: function(e, oSelf) {
var property = this.id;
// Validate input
var nValue = YAHOO.util.Dom.get(property+"Input").value*1;
if(YAHOO.lang.isNumber(nValue)) {
oSelf.updateValue(property, nValue);
}
else {
oSelf.revertInput(property);
}
},
// DOM event handler (scope assigned to the HTML Element)
handleDelimiterInputEvent: function(e, oSelf) {
var property = this.id;
// Validate input
var sValue = YAHOO.util.Dom.get(property+"Input").value;
if((sValue.indexOf("[") == 0) &&
(sValue.indexOf("]") == sValue.length-1) &&
(sValue.indexOf("<") < 0) &&
(sValue.indexOf(">") < 0)) {
// Ok to turn into an array
try {
sValue = eval(sValue);
}
catch(e) {
// Not ok
oSelf.revertInput(property);
return;
}
}
else if(sValue.length !== 1){
// Not ok
oSelf.revertInput(property);
return;
}
oSelf.updateValue(property, sValue);
},
// DOM event handler (scope assigned to the HTML Element)
handleTextInputEvent: function(e, oSelf) {
var property = this.id;
oSelf.updateValue(property, YAHOO.util.Dom.get(property+"Input").value);
},
// DOM event handler (scope assigned to the HTML Element)
handleTextareaEvent: function(e, oSelf) {
var method = this.id;
var value = YAHOO.util.Dom.get(method+"Input").value;
switch(method) {
case "setHeader":
oSelf.myAutoComp.setHeader(value);
break
case "setBody":
oSelf.myAutoComp.setBody(value);
break;
case "setFooter":
oSelf.myAutoComp.setFooter(value);
break;
}
YAHOO.log("Called " + method + "() with " + value, "info", "example");
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.Dashboard.init, YAHOO.example.Dashboard, true);
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

429
www/extras/yui/examples/autocomplete/ac_customize_log.html Normal file
View file

File diff suppressed because one or more lines are too long

344
www/extras/yui/examples/autocomplete/ac_flickr_xml.html Normal file
View file

File diff suppressed because one or more lines are too long

139
www/extras/yui/examples/autocomplete/ac_flickr_xml_clean.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Find Photos on Flickr</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#flickrselections {
float:right;
width:240px;
padding:10px;
background-color:#FFA928;
}
#flickrselections h5 {
color:#009;
margin:0;
}
/* custom styles for scrolling container */
#flickrautocomplete {
width:15em; /* set width of widget here */
padding-bottom:2em;
}
#flickrautocomplete .yui-ac-content {
max-height:30em;overflow:auto;overflow-x:hidden; /* set scrolling */
_height:30em; /* ie6 */
}
#flickrautocomplete .flickrImg {
width:6em;height:6em;padding:.1em;vertical-align:middle;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Find Photos on Flickr</h1>
<div class="exampleIntro">
<p>This example uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The <code>generateRequest()</code> method has been customized in order send additional required parameters to the Flickr application. The <code>formatResult()</code> method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a <code>itemSelectEvent</code> handler has been defined to collect selected images in a separate container.
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Find photos by tag and collect your selections:</h3>
<div id="flickrselections">
<h5>Selections</h5>
<div id="photos"></div>
</div>
<div id="flickrautocomplete">
<input id="flickrinput" type="text">
<div id="flickrcontainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.ACFlickr = function() {
// Set up a local proxy to the Flickr webservice
var myDS = new YAHOO.util.XHRDataSource("assets/php/flickr_proxy.php");
myDS.responseSchema = {
resultNode: "photo",
fields: ["title", "id", "owner", "secret", "server"]
};
myDS.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
myDS.maxCacheEntries = 100;
// Instantiate AutoComplete
var myAC = new YAHOO.widget.AutoComplete("flickrinput","flickrcontainer", myDS);
myAC.resultTypeList = false;
myAC.suppressInputUpdate = true;
myAC.generateRequest = function(sQuery) {
return "?method=flickr.photos.search&tags="+sQuery;
};
var getImgUrl = function(oPhoto, sSize) {
var sId = oPhoto.id;
var sSecret = oPhoto.secret;
var sServer = oPhoto.server;
var sUrl = "http://static.flickr.com/" +
sServer +
"/" +
sId +
"_" +
sSecret +
"_"+ (sSize || "s") +".jpg";
return "<img src='" + sUrl + "' class='flickrImg'>";
}
myAC.formatResult = function(oResultItem, sQuery) {
// This was defined by the schema array of the data source
var sTitle = oResultItem.title;
var sMarkup = getImgUrl(oResultItem) + " " + sTitle;
return (sMarkup);
};
myAC.itemSelectEvent.subscribe(function(sType, aArgs){
var oPhoto = aArgs[2];
YAHOO.util.Dom.get("photos").innerHTML =
"<p>"+getImgUrl(oPhoto, "m")+"</p>"+YAHOO.util.Dom.get("photos").innerHTML
});
return {
oDS: myDS,
oAC: myAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

348
www/extras/yui/examples/autocomplete/ac_flickr_xml_log.html Normal file
View file

File diff suppressed because one or more lines are too long

330
www/extras/yui/examples/autocomplete/ac_fn_multfields.html Normal file
View file

File diff suppressed because one or more lines are too long

125
www/extras/yui/examples/autocomplete/ac_fn_multfields_clean.html Normal file
View file

@ -0,0 +1,125 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Function to Search Different Fields at Runtime</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Custom Function to Search Different Fields at Runtime</h1>
<div class="exampleIntro">
<p>This example uses a FunctionDataSource that performs string matching against different fields of a two-dimensional array at runtime, depending on whether the input is a letter or a number. Since the data for this example is already loaded into memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. When the searched field is determined, the DataSource schema also needs to be updated on the fly. A custom formatter allows users to see both state and area code values for each result.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Enter a state or an area code:</h3>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.FnMultipleFields = function(){
var allData = YAHOO.example.Data.arrayAreaCodesStates;
// Track each interaction if it is against a state or an area code
var nSearchField;
// Define a custom search function
var searchAreaCodesAndStates = function(sQuery) {
var allMatches = [],
item, i, l;
// 0 for area code, 1 for state
nSearchField = (YAHOO.lang.isNumber(sQuery*1)) ? 0 : 1;
for(i=0, l=allData.length; i<l; i++) {
item = allData[i];
// State must be made case-insensitve and make the state return as index 0
if(nSearchField) {
if(item[nSearchField].toLowerCase().indexOf(sQuery.toLowerCase()) === 0) {
allMatches[allMatches.length] = [item[1], item[0]];
}
}
// Area codes are simpler
else {
if(item[nSearchField].indexOf(sQuery) === 0) {
allMatches[allMatches.length] = item;
}
}
}
// States should be sorted alphabetically
// Define schema on the fly (since the return order changes)
if(nSearchField) {
allMatches.sort();
this.responseSchema = {fields: ["state", "areacode"]};
}
else {
this.responseSchema = {fields: ["areacode", "state"]};
}
return allMatches;
};
// Use a FunctionDataSource
var oDS = new YAHOO.util.FunctionDataSource(searchAreaCodesAndStates);
// Instantiate AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.useShadow = true;
oAC.resultTypeList = false;
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
return (sResultMatch + " (" + ((nSearchField) ? oResultData.areacode : oResultData.state) + ")");
};
return {
fnSearch: searchAreaCodesAndStates,
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

334
www/extras/yui/examples/autocomplete/ac_fn_multfields_log.html Normal file
View file

File diff suppressed because one or more lines are too long

294
www/extras/yui/examples/autocomplete/ac_formatting_proxyless.html Normal file
View file

File diff suppressed because one or more lines are too long

100
www/extras/yui/examples/autocomplete/ac_formatting_proxyless_clean.html Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Formatting, with a Proxyless Remote DataSource</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:30em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
/* styles for custom formatting */
.yui-ac .result {position:relative;height:62px;}
.yui-ac .name {position:absolute;bottom:0;left:64px;}
.yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;}
.yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;}
.yui-ac img {width:60px;height:60px;margin-right:4px;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Custom Formatting, with a Proxyless Remote DataSource</h1>
<div class="exampleIntro">
<p>This AutoComplete instance uses a ScriptNodeDataSource to point to the Yahoo! Audio Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.CustomFormatting.validateForm();">
<h3>Yahoo! Audio Search:</h3>
<div id="myAutoComplete">
<input id="myInput" type="text" name="p">
<div id="myContainer"></div>
</div>
</form>
<script type="text/javascript">
YAHOO.example.CustomFormatting = (function(){
// Instantiate DataSource
var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/AudioSearchService/V1/artistSearch");
oDS.responseSchema = {
resultsList: "ResultSet.Result",
fields: ["Name","Thumbnail"]
};
// Setting to default value for demonstration purposes.
// The webservice needs to support execution of a callback function.
oDS.scriptCallbackParam = "callback";
// Instantiate AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);
// The webservice needs custom parameters
oAC.generateRequest = function(sQuery) {
return "?appid=YahooDemo&output=json&artist=" + sQuery ;
};
// Stub for form validation
var validateForm = function() {
// Validation code goes here
return true;
};
return {
oDS: oDS,
oAC: oAC,
validateForm: validateForm
}
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

298
www/extras/yui/examples/autocomplete/ac_formatting_proxyless_log.html Normal file
View file

File diff suppressed because one or more lines are too long

292
www/extras/yui/examples/autocomplete/ac_itemselect.html Normal file
View file

File diff suppressed because one or more lines are too long

106
www/extras/yui/examples/autocomplete/ac_itemselect_clean.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Searching Field A, Submitting Field B with itemSelectEvent</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
#mySubmit {
position:absolute; left:15em; margin-left:1em; /* place the button next to the input */
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Searching Field A, Submitting Field B with itemSelectEvent</h1>
<div class="exampleIntro">
<p>This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. The data consists of an account name, and an account number. The AutoComplete allows the user to search by name, but by subscribing to the itemSelectEvent Custom Event, populates a hidden form field with the ID, which the server would need for processing the hypothetical submission.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Find a company in the accounts database:</h3>
<form id="myForm" action="#">
<div id="myAutoComplete">
<input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit">
<div id="myContainer"></div>
</div>
<input id="myHidden" type="hidden">
</form>
<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.ItemSelectHandler = function() {
// Use a LocalDataSource
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.accounts);
oDS.responseSchema = {fields : ["name", "id"]};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.resultTypeList = false;
// Define an event handler to populate a hidden form field
// when an item gets selected
var myHiddenField = YAHOO.util.Dom.get("myHidden");
var myHandler = function(sType, aArgs) {
var myAC = aArgs[0]; // reference back to the AC instance
var elLI = aArgs[1]; // reference to the selected LI element
var oData = aArgs[2]; // object literal of selected item's result data
// update hidden form field with the selected item's ID
myHiddenField.value = oData.id;
};
oAC.itemSelectEvent.subscribe(myHandler);
// Rather than submit the form,
// alert the stored ID instead
var onFormSubmit = function(e, myForm) {
YAHOO.util.Event.preventDefault(e);
alert("Company ID: " + myHiddenField.value);
};
YAHOO.util.Event.addListener(YAHOO.util.Dom.get("myForm"), "submit", onFormSubmit);
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

296
www/extras/yui/examples/autocomplete/ac_itemselect_log.html Normal file
View file

File diff suppressed because one or more lines are too long

329
www/extras/yui/examples/autocomplete/ac_skinning.html Normal file
View file

File diff suppressed because one or more lines are too long

271
www/extras/yui/examples/autocomplete/ac_tags_alwaysshow.html Normal file
View file

File diff suppressed because one or more lines are too long

94
www/extras/yui/examples/autocomplete/ac_tags_alwaysshow_clean.html Normal file
View file

@ -0,0 +1,94 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tagging Example with alwaysShowContainer</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:20em; /* set width here or else widget will expand to fit its container */
padding-bottom:20em; /* allow enough real estate for the container */
}
.yui-skin-sam .yui-ac-content { /* set scrolling */
max-height:18em;overflow:auto;overflow-x:hidden; /* set scrolling */
_height:18em; /* ie6 */
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Tagging Example with alwaysShowContainer</h1>
<div class="exampleIntro">
<p>This AutoComplete interaction uses the <code>alwaysShowContainer</code> feature to allow users to find and select tags. Showing the set of previously used tags as a visual enhancement discourages unneccessary duplication of similar tags. As is common for tagging, comma- and semi-colon delimiters have also been enabled. Note that an initial query is needed on page load to get the container to display the first time with the full set of data. Since the container is meant to stay open, CSS is used to give it proper real estate on the page, including scrolling to show a potentially long list of tags.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Assign tags:</h3>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.TagsAlwaysShow = function() {
// Use a LocalDataSource
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.tags);
// Optional to define fields for single-dimensional array
oDS.responseSchema = {fields : ["tag"]};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.alwaysShowContainer = true;
oAC.minQueryLength = 0; // Can be 0, which will return all results
oAC.maxResultsDisplayed = 100; // Show more results, scrolling is enabled via CSS
oAC.delimChar = [",",";"]; // Enable comma and semi-colon delimiters
oAC.autoHighlight = false; // Auto-highlighting interferes with adding new tags
oAC.sendQuery("");
// Populate list to start a new interaction
oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
oAC.sendQuery("");
});
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

275
www/extras/yui/examples/autocomplete/ac_tags_alwaysshow_log.html Normal file
View file

File diff suppressed because one or more lines are too long

272
www/extras/yui/examples/autocomplete/ac_xhr_customrequest.html Normal file
View file

File diff suppressed because one or more lines are too long

90
www/extras/yui/examples/autocomplete/ac_xhr_customrequest_clean.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Customizing Remote Requests</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#myAutoComplete {
width:40em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Customizing Remote Requests</h1>
<div class="exampleIntro">
<p>This AutoComplete implementation points to the Yahoo! Search webservice using an XHRDataSource. Since the third-party API requires certain application-specific paramaters to be passed in, the generateRequest() method has been redefined to append these special values. The <code>queryDelay</code> paramater has been increased to account for the large data payload returned by the Yahoo! Search webservice, so as to reduce throttle client-side processing.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Yahoo! Search:</h3>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.RemoteCustomRequest = function() {
// Use an XHRDataSource
var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php");
// Set the responseType
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
// Define the schema of the JSON results
oDS.responseSchema = {
resultsList : "ResultSet.Result",
fields : ["Title"]
};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
// Throttle requests sent
oAC.queryDelay = .5;
// The webservice needs additional parameters
oAC.generateRequest = function(sQuery) {
return "?output=json&results=100&query=" + sQuery ;
};
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

276
www/extras/yui/examples/autocomplete/ac_xhr_customrequest_log.html Normal file
View file

File diff suppressed because one or more lines are too long

270
www/extras/yui/examples/autocomplete/ac_ysearch_flat.html Normal file
View file

File diff suppressed because one or more lines are too long

98
www/extras/yui/examples/autocomplete/ac_ysearch_flat_clean.html Normal file
View file

@ -0,0 +1,98 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Subset Matching</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for multiple stacked instances */
#example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
#example2 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
.autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Subset Matching</h1>
<div class="exampleIntro">
<p>This example demonstrates AutoComplete's <code>queryMatchSubset</code> property. The first instance of AutoComplete has <code>queryMatchSubset</code> enabled for maximum cache performance such that as you type, the query is searched within previously cached results. For best results, the DataSource should return a complete set of results when a single letter is queried such that subset matching will also return a complete set of results.</p>
<p>The second AutoComplete instance does not enable <code>queryMatchSubset</code>
so each typed letter results in a new request to the server.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="autocomplete_examples">
<p><strong>Note:</strong> The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return &mdash; if you type a full, highly-specifc phrase (such as your name) you'll probably get no results from the small dataset.</p>
<h2>First AutoComplete instance enables queryMatchSubset:</h2>
<div id="example1" class="autocomplete">
<input id="ysearchinput1" type="text">
<div id="ysearchcontainer1"></div>
</div>
<h2>Second AutoComplete instance does not enable queryMatchSubset:</h2>
<div id="example2" class="autocomplete">
<input id="ysearchinput2" type="text">
<div id="ysearchcontainer2"></div>
</div>
</div>
<script type="text/javascript">
YAHOO.example.QueryMatchSubset = function(){
var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
myDataSource.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
myDataSource.maxCacheEntries = 60;
// First AutoComplete
var myAutoComp1 = new YAHOO.widget.AutoComplete("ysearchinput1","ysearchcontainer1",myDataSource);
myAutoComp1.queryMatchSubset = true;
// Second AutoComplete
var myAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', myDataSource);
return {
oDS: myDataSource,
oAC1: myAutoComp1,
oAC2: myAutoComp2
}
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

256
www/extras/yui/examples/autocomplete/ac_ysearch_json.html Normal file
View file

File diff suppressed because one or more lines are too long

95
www/extras/yui/examples/autocomplete/ac_ysearch_json_clean.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Centering AutoComplete On a Page</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
<script type="text/javascript" src="../../build/json/json-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for centered example */
body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */
#ysearch { text-align:center; }
#ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */
#ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Centering AutoComplete On a Page</h1>
<div class="exampleIntro">
<p>This example points to Yahoo! Search Web Services. To achieve the shrink-wrapped, centered search module, custom CSS rules have been applied, and the method <code>doBeforeExpandContainer</code> has been customized to position the container directly below the input field.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<form action="http://search.yahoo.com/search">
<div id="ysearch">
<label>Yahoo! Search: </label>
<input id="ysearchinput" type="text" name="p">
<input id="ysearchsubmit" type="submit" value="Submit Query">
<div id="ysearchcontainer"></div>
</div>
</form>
<script type="text/javascript">
YAHOO.example.Centered = function() {
var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php?output=json&");
myDataSource.responseSchema = {
resultsList: "ResultSet.Result",
fields: ["Title"]
};
// Instantiate AutoComplete
var myAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", myDataSource);
myAutoComp.queryMatchContains = true;
myAutoComp.queryQuestionMark = false;
myAutoComp.useShadow = true;
// Keeps container centered
myAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
var pos = YAHOO.util.Dom.getXY(oTextbox);
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
YAHOO.util.Dom.setXY(oContainer,pos);
return true;
};
return {
oDS: myDataSource,
oAC: myAutoComp
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

260
www/extras/yui/examples/autocomplete/ac_ysearch_json_log.html Normal file
View file

File diff suppressed because one or more lines are too long

BIN
www/extras/yui/examples/autocomplete/assets/img/ac-arrow-dn.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 217 B

BIN
www/extras/yui/examples/autocomplete/assets/img/ac-arrow-rt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 214 B

BIN
www/extras/yui/examples/autocomplete/assets/img/combobox.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 300 B

490
www/extras/yui/examples/autocomplete/assets/js/data.js vendored Normal file
View file

@ -0,0 +1,490 @@
YAHOO.example.Data = {
menu: {
breakfasts: [
"donuts",
"omelette",
"pancakes",
"yogurt"
],
lunches: [
"burrito",
"hamburger",
"salad",
"turkey sandwich"
],
dinners: [
"meatloaf",
"spaghetti",
"pot roast",
"roast chicken",
"steak"
]
},
tags: [
"accessibility",
"college",
"family",
"funny",
"high school",
"music",
"origami",
"photography",
"security",
"standards",
"travel",
"video",
"work",
"yui"
],
accounts: [
{name: "ABC Company", id: 57367 },
{name: "Acme Supply Company", id: 84377},
{name: "Avery Widgets", id: 73678},
{name: "AAA International", id: 73675},
{name: "Atlantic Brothers, Inc", id: 83757},
{name: "Ace Products", id: 48588},
{name: "Above Average, Ltd", id: 75968}
],
arrayStates: [
"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"
],
arrayAreaCodesStates: [
["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"]
]
};

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

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

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

@ -0,0 +1,36 @@
<?php
/* yadl_spaceid - Skip Stamping */
// 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);
?>

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

File diff suppressed because it is too large Load diff

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

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

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

File diff suppressed because one or more lines are too long

139
www/extras/yui/examples/base/base-in-doc.html Normal file
View file

File diff suppressed because one or more lines are too long

139
www/extras/yui/examples/base/base-in-doc2.html Normal file
View file

File diff suppressed because one or more lines are too long

289
www/extras/yui/examples/base/base-in-doc2_source.html Normal file
View file

@ -0,0 +1,289 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Base - Base in a 950px YUI Grids page</title>
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
</head>
<body>
<div id="doc2" class="yui-t5">
<div id="hd">
<h1>The YUI CSS Foundation</h1>
<h2>YUI Base with YUI Reset, YUI Fonts and YUI Grids</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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.</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>A Second Level Header</h2>
<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. </p>
<h3>Nesting a Grid</h3>
<div class="yui-g">
<div class="yui-u first">
<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.</p>
</div>
<div class="yui-u">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
<h4>This is 4th level heading</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h5>This is 5th level heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h6>This is 6th level heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<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 zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div>This is a <code>div</code> element. Lorem ipsum dolor sit amet, elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of <code>div</code>.)</div>
<blockquote>
<p>This is a block quotation containing a <em>single</em> paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></blockquote>
<p>The following contains address information about the author, in an <code>address</code>
element.</p>
<h2>Lists</h2>
<p>This is a paragraph before an <strong>unordered</strong> list (<code>ul</code>). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<ul>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.</li>
</ul>
<p>This is a paragraph before a <strong>ordered</strong> list (<code>ol</code>). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".</p>
<ol>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
<p>This is a paragraph before a <strong>definition</strong> list (<code>dl</code>). In principle, such a list should consist of <em>terms</em> and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<dl>
<dt>Apple</dt>
<dd>is a fruit.</dd>
<dt>Banana</dt>
<dd>Is also a fruit.</dd>
<dt>Tomato</dt>
<dd>Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
</dl>
<h2>Text-level markup</h2>
<ul>
<li> <abbr title="Cascading Style Sheets">CSS</abbr> (an abbreviation;
<code>abbr</code> markup used)</li>
<li> <acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>acronym</code> markup used)</li>
<li> <cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
<li> <code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
<li> an <dfn>octet</dfn> is an entity consisting of eight bits
(<code>dfn</code> markup used for the term being defined)</li>
<li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing
a word)</li>
<li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup
used for text indicating keyboard input)</li>
<li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li> you may get the message <samp>Core dumped</samp> at times
(<code>samp</code> markup used for sample output)</li>
<li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
<li> the command <code>cat</code> <var>filename</var> displays the
file specified by the <var>filename</var> (<code>var</code> markup
used to indicate a word as a variable).</li>
<li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: 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 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
<p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p>
<ul>
<li><code>This is sample text inside code markup</code></li>
<li><kbd>This is sample text inside kbd markup</kbd></li>
<li><samp>This is sample text inside samp markup</samp></li>
<li><tt>This is sample text inside tt markup</tt></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
<li><a href="http://yuiblog.com">the YUI Blog</a></li>
</ul>
<h2>Tables</h2>
<p>The following table has a caption. The first row and the first column contain table header cells only; other cells are data cells.</p>
<table summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
<caption>Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
<tr>
<th>Country</th>
<th>Total area</th>
<th>Land area</th>
</tr>
<tr>
<th>Denmark</th>
<td>43,070</td>
<td>42,370</td>
</tr>
<tr>
<th>Finland</th>
<td>337,030</td>
<td>305,470</td>
</tr>
<tr>
<th>Iceland</th>
<td>103,000</td>
<td>100,250</td>
</tr>
<tr>
<th>Norway</th>
<td>324,220</td>
<td>307,860</td>
</tr>
<tr>
<th>Sweden</th>
<td>449,964</td>
<td>410,928</td>
</tr>
</table>
<h2>Forms</h2>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<div><input type="hidden" name="hidden field" value="42"></div>
<div><label for="f1">Single-line text input field: <input id="f1" name="text" size="20" value="Default text."></label></div>
<div><label for="f2">Multi-line text input field (textarea):</label></div>
<div><textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
<p>The following two radio buttons are inside <code>fieldset</code> element with a <code>legend</code>:</p>
<fieldset>
<legend>Legend</legend>
<div>
<label for="f3">Radio button 1</label>
<input id="f3" type="radio" name="radio" value="1">
</div>
<div>
<label for="f4">Radio button 2 (initially checked)</label>
<input id="f4" type="radio" name="radio" value="2" checked>
</div>
</fieldset>
<fieldset>
<legend>Check those that apply</legend>
<div>
<label for="f5">Checkbox 1</label>
<input id="f5" type="checkbox" name="checkbox">
</div>
<div>
<label for="f6">Checkbox 2 (initially checked)</label>
<input id="f6" type="checkbox" name="checkbox2" checked>
</div>
</fieldset>
<p>
<label for="f10">A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
</p>
<select id="f10" name="select1" size="1">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<p>
<label for="f11">A <code>select</code> element with <code>size="3"</code> (listbox):</label>
</p>
<select id="f11" name="select2" size="3">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<div>
<label for="f99">Submit button:</label>
<input id="f99" type="submit" name="submit" value="Just a test">
</div>
<div>
<label for="f0">Reset button:</label>
<input id="f0" type="reset" name="reset" value="Reset">
</div>
</form>
<p>This next bit shows that PREformatted text is working.</p>
<pre>
1
2
3
4
5
</pre>
<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.</p>
</div>
</div>
<div class="yui-b">
<h2>Sidebar</h2>
<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. </p>
<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. </p>
</div>
</div>
<div id="ft">
<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. 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. </p>
</div>
</div>
</body>
</html>

139
www/extras/yui/examples/base/base-in-doc3.html Normal file
View file

File diff suppressed because one or more lines are too long

289
www/extras/yui/examples/base/base-in-doc3_source.html Normal file
View file

@ -0,0 +1,289 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Base - Base in a 100% YUI Grids page</title>
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
</head>
<body>
<div id="doc3" class="yui-t5">
<div id="hd">
<h1>The YUI CSS Foundation</h1>
<h2>YUI Base with YUI Reset, YUI Fonts and YUI Grids</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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.</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>A Second Level Header</h2>
<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. </p>
<h3>Nesting a Grid</h3>
<div class="yui-g">
<div class="yui-u first">
<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.</p>
</div>
<div class="yui-u">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
<h4>This is 4th level heading</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h5>This is 5th level heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h6>This is 6th level heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<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 zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div>This is a <code>div</code> element. Lorem ipsum dolor sit amet, elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of <code>div</code>.)</div>
<blockquote>
<p>This is a block quotation containing a <em>single</em> paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></blockquote>
<p>The following contains address information about the author, in an <code>address</code>
element.</p>
<h2>Lists</h2>
<p>This is a paragraph before an <strong>unordered</strong> list (<code>ul</code>). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<ul>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.</li>
</ul>
<p>This is a paragraph before a <strong>ordered</strong> list (<code>ol</code>). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".</p>
<ol>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
<p>This is a paragraph before a <strong>definition</strong> list (<code>dl</code>). In principle, such a list should consist of <em>terms</em> and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<dl>
<dt>Apple</dt>
<dd>is a fruit.</dd>
<dt>Banana</dt>
<dd>Is also a fruit.</dd>
<dt>Tomato</dt>
<dd>Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
</dl>
<h2>Text-level markup</h2>
<ul>
<li> <abbr title="Cascading Style Sheets">CSS</abbr> (an abbreviation;
<code>abbr</code> markup used)</li>
<li> <acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>acronym</code> markup used)</li>
<li> <cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
<li> <code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
<li> an <dfn>octet</dfn> is an entity consisting of eight bits
(<code>dfn</code> markup used for the term being defined)</li>
<li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing
a word)</li>
<li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup
used for text indicating keyboard input)</li>
<li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li> you may get the message <samp>Core dumped</samp> at times
(<code>samp</code> markup used for sample output)</li>
<li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
<li> the command <code>cat</code> <var>filename</var> displays the
file specified by the <var>filename</var> (<code>var</code> markup
used to indicate a word as a variable).</li>
<li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: 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 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
<p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p>
<ul>
<li><code>This is sample text inside code markup</code></li>
<li><kbd>This is sample text inside kbd markup</kbd></li>
<li><samp>This is sample text inside samp markup</samp></li>
<li><tt>This is sample text inside tt markup</tt></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
<li><a href="http://yuiblog.com">the YUI Blog</a></li>
</ul>
<h2>Tables</h2>
<p>The following table has a caption. The first row and the first column contain table header cells only; other cells are data cells.</p>
<table summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
<caption>Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
<tr>
<th>Country</th>
<th>Total area</th>
<th>Land area</th>
</tr>
<tr>
<th>Denmark</th>
<td>43,070</td>
<td>42,370</td>
</tr>
<tr>
<th>Finland</th>
<td>337,030</td>
<td>305,470</td>
</tr>
<tr>
<th>Iceland</th>
<td>103,000</td>
<td>100,250</td>
</tr>
<tr>
<th>Norway</th>
<td>324,220</td>
<td>307,860</td>
</tr>
<tr>
<th>Sweden</th>
<td>449,964</td>
<td>410,928</td>
</tr>
</table>
<h2>Forms</h2>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<div><input type="hidden" name="hidden field" value="42"></div>
<div><label for="f1">Single-line text input field: <input id="f1" name="text" size="20" value="Default text."></label></div>
<div><label for="f2">Multi-line text input field (textarea):</label></div>
<div><textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
<p>The following two radio buttons are inside <code>fieldset</code> element with a <code>legend</code>:</p>
<fieldset>
<legend>Legend</legend>
<div>
<label for="f3">Radio button 1</label>
<input id="f3" type="radio" name="radio" value="1">
</div>
<div>
<label for="f4">Radio button 2 (initially checked)</label>
<input id="f4" type="radio" name="radio" value="2" checked>
</div>
</fieldset>
<fieldset>
<legend>Check those that apply</legend>
<div>
<label for="f5">Checkbox 1</label>
<input id="f5" type="checkbox" name="checkbox">
</div>
<div>
<label for="f6">Checkbox 2 (initially checked)</label>
<input id="f6" type="checkbox" name="checkbox2" checked>
</div>
</fieldset>
<p>
<label for="f10">A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
</p>
<select id="f10" name="select1" size="1">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<p>
<label for="f11">A <code>select</code> element with <code>size="3"</code> (listbox):</label>
</p>
<select id="f11" name="select2" size="3">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<div>
<label for="f99">Submit button:</label>
<input id="f99" type="submit" name="submit" value="Just a test">
</div>
<div>
<label for="f0">Reset button:</label>
<input id="f0" type="reset" name="reset" value="Reset">
</div>
</form>
<p>This next bit shows that PREformatted text is working.</p>
<pre>
1
2
3
4
5
</pre>
<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.</p>
</div>
</div>
<div class="yui-b">
<h2>Sidebar</h2>
<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. </p>
<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. </p>
</div>
</div>
<div id="ft">
<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. 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. </p>
</div>
</div>
</body>
</html>

139
www/extras/yui/examples/base/base-in-doc4.html Normal file
View file

File diff suppressed because one or more lines are too long

289
www/extras/yui/examples/base/base-in-doc4_source.html Normal file
View file

@ -0,0 +1,289 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Base - Base in a 974px YUI Grids page</title>
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
</head>
<body>
<div id="doc4" class="yui-t5">
<div id="hd">
<h1>The YUI CSS Foundation</h1>
<h2>YUI Base with YUI Reset, YUI Fonts and YUI Grids</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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.</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>A Second Level Header</h2>
<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. </p>
<h3>Nesting a Grid</h3>
<div class="yui-g">
<div class="yui-u first">
<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.</p>
</div>
<div class="yui-u">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
<h4>This is 4th level heading</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h5>This is 5th level heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h6>This is 6th level heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<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 zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div>This is a <code>div</code> element. Lorem ipsum dolor sit amet, elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of <code>div</code>.)</div>
<blockquote>
<p>This is a block quotation containing a <em>single</em> paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></blockquote>
<p>The following contains address information about the author, in an <code>address</code>
element.</p>
<h2>Lists</h2>
<p>This is a paragraph before an <strong>unordered</strong> list (<code>ul</code>). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<ul>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.</li>
</ul>
<p>This is a paragraph before a <strong>ordered</strong> list (<code>ol</code>). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".</p>
<ol>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
<p>This is a paragraph before a <strong>definition</strong> list (<code>dl</code>). In principle, such a list should consist of <em>terms</em> and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<dl>
<dt>Apple</dt>
<dd>is a fruit.</dd>
<dt>Banana</dt>
<dd>Is also a fruit.</dd>
<dt>Tomato</dt>
<dd>Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
</dl>
<h2>Text-level markup</h2>
<ul>
<li> <abbr title="Cascading Style Sheets">CSS</abbr> (an abbreviation;
<code>abbr</code> markup used)</li>
<li> <acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>acronym</code> markup used)</li>
<li> <cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
<li> <code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
<li> an <dfn>octet</dfn> is an entity consisting of eight bits
(<code>dfn</code> markup used for the term being defined)</li>
<li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing
a word)</li>
<li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup
used for text indicating keyboard input)</li>
<li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li> you may get the message <samp>Core dumped</samp> at times
(<code>samp</code> markup used for sample output)</li>
<li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
<li> the command <code>cat</code> <var>filename</var> displays the
file specified by the <var>filename</var> (<code>var</code> markup
used to indicate a word as a variable).</li>
<li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: 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 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
<p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p>
<ul>
<li><code>This is sample text inside code markup</code></li>
<li><kbd>This is sample text inside kbd markup</kbd></li>
<li><samp>This is sample text inside samp markup</samp></li>
<li><tt>This is sample text inside tt markup</tt></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
<li><a href="http://yuiblog.com">the YUI Blog</a></li>
</ul>
<h2>Tables</h2>
<p>The following table has a caption. The first row and the first column contain table header cells only; other cells are data cells.</p>
<table summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
<caption>Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
<tr>
<th>Country</th>
<th>Total area</th>
<th>Land area</th>
</tr>
<tr>
<th>Denmark</th>
<td>43,070</td>
<td>42,370</td>
</tr>
<tr>
<th>Finland</th>
<td>337,030</td>
<td>305,470</td>
</tr>
<tr>
<th>Iceland</th>
<td>103,000</td>
<td>100,250</td>
</tr>
<tr>
<th>Norway</th>
<td>324,220</td>
<td>307,860</td>
</tr>
<tr>
<th>Sweden</th>
<td>449,964</td>
<td>410,928</td>
</tr>
</table>
<h2>Forms</h2>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<div><input type="hidden" name="hidden field" value="42"></div>
<div><label for="f1">Single-line text input field: <input id="f1" name="text" size="20" value="Default text."></label></div>
<div><label for="f2">Multi-line text input field (textarea):</label></div>
<div><textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
<p>The following two radio buttons are inside <code>fieldset</code> element with a <code>legend</code>:</p>
<fieldset>
<legend>Legend</legend>
<div>
<label for="f3">Radio button 1</label>
<input id="f3" type="radio" name="radio" value="1">
</div>
<div>
<label for="f4">Radio button 2 (initially checked)</label>
<input id="f4" type="radio" name="radio" value="2" checked>
</div>
</fieldset>
<fieldset>
<legend>Check those that apply</legend>
<div>
<label for="f5">Checkbox 1</label>
<input id="f5" type="checkbox" name="checkbox">
</div>
<div>
<label for="f6">Checkbox 2 (initially checked)</label>
<input id="f6" type="checkbox" name="checkbox2" checked>
</div>
</fieldset>
<p>
<label for="f10">A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
</p>
<select id="f10" name="select1" size="1">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<p>
<label for="f11">A <code>select</code> element with <code>size="3"</code> (listbox):</label>
</p>
<select id="f11" name="select2" size="3">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<div>
<label for="f99">Submit button:</label>
<input id="f99" type="submit" name="submit" value="Just a test">
</div>
<div>
<label for="f0">Reset button:</label>
<input id="f0" type="reset" name="reset" value="Reset">
</div>
</form>
<p>This next bit shows that PREformatted text is working.</p>
<pre>
1
2
3
4
5
</pre>
<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.</p>
</div>
</div>
<div class="yui-b">
<h2>Sidebar</h2>
<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. </p>
<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. </p>
</div>
</div>
<div id="ft">
<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. 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. </p>
</div>
</div>
</body>
</html>

289
www/extras/yui/examples/base/base-in-doc_source.html Normal file
View file

@ -0,0 +1,289 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Base - Base in a 750px YUI Grids page</title>
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
</head>
<body>
<div id="doc" class="yui-t5">
<div id="hd">
<h1>The YUI CSS Foundation</h1>
<h2>YUI Base with YUI Reset, YUI Fonts and YUI Grids</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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.</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>A Second Level Header</h2>
<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. </p>
<h3>Nesting a Grid</h3>
<div class="yui-g">
<div class="yui-u first">
<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.</p>
</div>
<div class="yui-u">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
<h4>This is 4th level heading</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h5>This is 5th level heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h6>This is 6th level heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<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 zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div>This is a <code>div</code> element. Lorem ipsum dolor sit amet, elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of <code>div</code>.)</div>
<blockquote>
<p>This is a block quotation containing a <em>single</em> paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></blockquote>
<p>The following contains address information about the author, in an <code>address</code>
element.</p>
<h2>Lists</h2>
<p>This is a paragraph before an <strong>unordered</strong> list (<code>ul</code>). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<ul>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.</li>
</ul>
<p>This is a paragraph before a <strong>ordered</strong> list (<code>ol</code>). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".</p>
<ol>
<li>One.</li>
<li>Two.</li>
<li>Three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
<p>This is a paragraph before a <strong>definition</strong> list (<code>dl</code>). In principle, such a list should consist of <em>terms</em> and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<dl>
<dt>Apple</dt>
<dd>is a fruit.</dd>
<dt>Banana</dt>
<dd>Is also a fruit.</dd>
<dt>Tomato</dt>
<dd>Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
</dl>
<h2>Text-level markup</h2>
<ul>
<li> <abbr title="Cascading Style Sheets">CSS</abbr> (an abbreviation;
<code>abbr</code> markup used)</li>
<li> <acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>acronym</code> markup used)</li>
<li> <cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
<li> <code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
<li> an <dfn>octet</dfn> is an entity consisting of eight bits
(<code>dfn</code> markup used for the term being defined)</li>
<li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing
a word)</li>
<li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup
used for text indicating keyboard input)</li>
<li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li> you may get the message <samp>Core dumped</samp> at times
(<code>samp</code> markup used for sample output)</li>
<li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
<li> the command <code>cat</code> <var>filename</var> displays the
file specified by the <var>filename</var> (<code>var</code> markup
used to indicate a word as a variable).</li>
<li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: 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 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
<p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p>
<ul>
<li><code>This is sample text inside code markup</code></li>
<li><kbd>This is sample text inside kbd markup</kbd></li>
<li><samp>This is sample text inside samp markup</samp></li>
<li><tt>This is sample text inside tt markup</tt></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
<li><a href="http://yuiblog.com">the YUI Blog</a></li>
</ul>
<h2>Tables</h2>
<p>The following table has a caption. The first row and the first column contain table header cells only; other cells are data cells.</p>
<table summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
<caption>Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
<tr>
<th>Country</th>
<th>Total area</th>
<th>Land area</th>
</tr>
<tr>
<th>Denmark</th>
<td>43,070</td>
<td>42,370</td>
</tr>
<tr>
<th>Finland</th>
<td>337,030</td>
<td>305,470</td>
</tr>
<tr>
<th>Iceland</th>
<td>103,000</td>
<td>100,250</td>
</tr>
<tr>
<th>Norway</th>
<td>324,220</td>
<td>307,860</td>
</tr>
<tr>
<th>Sweden</th>
<td>449,964</td>
<td>410,928</td>
</tr>
</table>
<h2>Forms</h2>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<div><input type="hidden" name="hidden field" value="42"></div>
<div><label for="f1">Single-line text input field: <input id="f1" name="text" size="20" value="Default text."></label></div>
<div><label for="f2">Multi-line text input field (textarea):</label></div>
<div><textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
<p>The following two radio buttons are inside <code>fieldset</code> element with a <code>legend</code>:</p>
<fieldset>
<legend>Legend</legend>
<div>
<label for="f3">Radio button 1</label>
<input id="f3" type="radio" name="radio" value="1">
</div>
<div>
<label for="f4">Radio button 2 (initially checked)</label>
<input id="f4" type="radio" name="radio" value="2" checked>
</div>
</fieldset>
<fieldset>
<legend>Check those that apply</legend>
<div>
<label for="f5">Checkbox 1</label>
<input id="f5" type="checkbox" name="checkbox">
</div>
<div>
<label for="f6">Checkbox 2 (initially checked)</label>
<input id="f6" type="checkbox" name="checkbox2" checked>
</div>
</fieldset>
<p>
<label for="f10">A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
</p>
<select id="f10" name="select1" size="1">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<p>
<label for="f11">A <code>select</code> element with <code>size="3"</code> (listbox):</label>
</p>
<select id="f11" name="select2" size="3">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<div>
<label for="f99">Submit button:</label>
<input id="f99" type="submit" name="submit" value="Just a test">
</div>
<div>
<label for="f0">Reset button:</label>
<input id="f0" type="reset" name="reset" value="Reset">
</div>
</form>
<p>This next bit shows that PREformatted text is working.</p>
<pre>
1
2
3
4
5
</pre>
<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.</p>
</div>
</div>
<div class="yui-b">
<h2>Sidebar</h2>
<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. </p>
<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. </p>
</div>
</div>
<div id="ft">
<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. 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. </p>
</div>
</div>
</body>
</html>

139
www/extras/yui/examples/base/base-simple.html Normal file
View file

File diff suppressed because one or more lines are too long

264
www/extras/yui/examples/base/base-simple_source.html Normal file
View file

@ -0,0 +1,264 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Base</title>
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">
</head>
<body>
<h1>This document shows various HTML elements</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, volutpat. </p>
<h2>This is 2nd level heading bh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h3>This is 3rd level heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h4>This is 4th level heading</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h5>This is 5th level heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h6>This is 6th level heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h2>Basic block level elements</h2>
<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 zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<address>This holds an address. Block level, but without margin or padding because they're often stacked.</address>
<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 zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div>This is a <code>div</code> element. Lorem ipsum dolor sit amet, elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of <code>div</code>.)</div>
<blockquote>
<p>This is a block quotation containing a <em>single</em> paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></blockquote>
<p>The following contains address information about the author, in an <code>address</code>
element.</p>
<h2>Lists</h2>
<p>This is a paragraph before an <strong>unnumbered</strong> list (<code>ul</code>). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<ul>
<li>One.</li>
<li>Two.</li>
<li>Three. Well, probably this list item should be longer. Note that for short items lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.</li>
<li>Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.</li>
</ul>
<p>This is a paragraph before a <strong>numbered</strong> list (<code>ol</code>). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".</p>
<ol>
<li>One.</li>
<li>Two.</li>
<li>Three. Well, probably this list item should be longer. Note that if items are short, lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.</li>
<li>Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
<p>This is a paragraph before a <strong>definition</strong> list (<code>dl</code>). In principle, such a list should consist of <em>terms</em> and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<dl>
<dt>Apple</dt>
<dd>is a fruit.</dd>
<dt>Banana</dt>
<dd>Is also a fruit.</dd>
<dt>Tomato</dt>
<dd>Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
</dl>
<h2>Text-level markup</h2>
<ul>
<li> <abbr title="Cascading Style Sheets">CSS</abbr> (an abbreviation;
<code>abbr</code> markup used)</li>
<li> <acronym title="radio detecting and ranging">radar</acronym> (an acronym; <code>acronym</code> markup used)</li>
<li> <cite>Origin of Species</cite> (a book title; <code>cite</code> markup used)</li>
<li> <code>a[i] = b[i] + c[i);</code> (computer code; <code>code</code> markup used)</li>
<li> an <dfn>octet</dfn> is an entity consisting of eight bits
(<code>dfn</code> markup used for the term being defined)</li>
<li> this is <em>very</em> simple (<code>em</code> markup used for emphasizing
a word)</li>
<li> type <kbd>yes</kbd> when prompted for an answer (<code>kbd</code> markup
used for text indicating keyboard input)</li>
<li> <q>Hello!</q> (<code>q</code> markup used for quotation)</li>
<li> He said: <q>She said <q>Hello!</q></q> (a quotation inside a quotation)</li>
<li> you may get the message <samp>Core dumped</samp> at times
(<code>samp</code> markup used for sample output)</li>
<li> <strong>this is highlighted text</strong> (<code>strong</code> markup used)</li>
<li> <tt>text in monospace font</tt> (<code>tt</code> markup used)</li>
<li> the command <code>cat</code> <var>filename</var> displays the
file specified by the <var>filename</var> (<code>var</code> markup
used to indicate a word as a variable).</li>
<li> In order to test how subscripts and superscripts (<code>sub</code> and <code>sup</code> markup) work inside running text, we need some dummy text around constructs like x<sub>1</sub> and H<sub>2</sub>O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: M<sup>lle</sup>, 1<sup>st</sup>, and then some mathematical notations: e<sup>x</sup>, sin<sup>2</sup> <i>x</i>, and some nested superscripts (exponents) too: 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 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </li>
</ul>
<p>Some of the elements tested above are typically displayed in a monospace font, often using the <em>same</em> presentation for all of them. This tests whether that is the case on your browser:</p>
<ul>
<li><code>This is sample text inside code markup</code></li>
<li><kbd>This is sample text inside kbd markup</kbd></li>
<li><samp>This is sample text inside samp markup</samp></li>
<li><tt>This is sample text inside tt markup</tt></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://developer.yahoo.com/yui">developer.yahoo.com/yui</a></li>
<li><a href="http://yuiblog.com">the YUI Blog</a></li>
</ul>
<h2>Tables</h2>
<p>The following table has a caption. The first row and the first column contain table header cells only; other cells are data cells.</p>
<table summary="each row names a nordic country and specifies its total area and land area, in square kilometers">
<caption>Caption: Sample table: Areas of the Nordic countries, in sq km</caption>
<tr>
<th>Country</th>
<th>Total area</th>
<th>Land area</th>
</tr>
<tr>
<th>Denmark</th>
<td>43,070</td>
<td>42,370</td>
</tr>
<tr>
<th>Finland</th>
<td>337,030</td>
<td>305,470</td>
</tr>
<tr>
<th>Iceland</th>
<td>103,000</td>
<td>100,250</td>
</tr>
<tr>
<th>Norway</th>
<td>324,220</td>
<td>307,860</td>
</tr>
<tr>
<th>Sweden</th>
<td>449,964</td>
<td>410,928</td>
</tr>
</table>
<h2>Forms</h2>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<div><input type="hidden" name="hidden field" value="42"></div>
<div><label for="f1">Single-line text input field: <input id="f1" name="text" size="20" value="Default text."></label></div>
<div><label for="f2">Multi-line text input field (textarea):</label></div>
<div><textarea id="f2" name="textarea" rows="16" cols="20">Default text.</textarea></div>
<p>The following two radio buttons are inside <code>fieldset</code> element with a <code>legend</code>:</p>
<fieldset>
<legend>Legend</legend>
<div>
<label for="f3">Radio button 1</label>
<input id="f3" type="radio" name="radio" value="1">
</div>
<div>
<label for="f4">Radio button 2 (initially checked)</label>
<input id="f4" type="radio" name="radio" value="2" checked>
</div>
</fieldset>
<fieldset>
<legend>Check those that apply</legend>
<div>
<label for="f5">Checkbox 1</label>
<input id="f5" type="checkbox" name="checkbox">
</div>
<div>
<label for="f6">Checkbox 2 (initially checked)</label>
<input id="f6" type="checkbox" name="checkbox2" checked>
</div>
</fieldset>
<p>
<label for="f10">A <code>select</code> element with <code>size="1"</code> (dropdown box):</label>
</p>
<select id="f10" name="select1" size="1">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<p>
<label for="f11">A <code>select</code> element with <code>size="3"</code> (listbox):</label>
</p>
<select id="f11" name="select2" size="3">
<option>one</option>
<option selected>two (default)</option>
<option>three</option>
</select>
<div>
<label for="f99">Submit button:</label>
<input id="f99" type="submit" name="submit" value="Just a test">
</div>
<div>
<label for="f0">Reset button:</label>
<input id="f0" type="reset" name="reset" value="Reset">
</div>
</form>
<p>This next bit shows that PREformatted text is working.</p>
<pre>
1
2
3
4
5
</pre>
<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.</p>
</body>
</html>

94
www/extras/yui/examples/base/index.html Normal file
View file

File diff suppressed because one or more lines are too long

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 974 B

BIN
www/extras/yui/examples/button/assets/bg-fader.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 892 B

1
www/extras/yui/examples/button/assets/buttonariaplugin-min.js vendored Normal file
View file

@ -0,0 +1 @@
(function(){var H=YAHOO.lang,R=YAHOO.env.ua,O=YAHOO.widget.Button.prototype,C=O.initAttributes,M=YAHOO.widget.ButtonGroup.prototype,S=M.initAttributes,G=M.addButton,V=(R.gecko&&R.gecko>=1.9)||(R.ie&&R.ie>=8),N="aria-",W="usearia",K="checked",E="type",h="menu",a="split",I="haspopup",b="render",T="radio",Z="checkbox",e="role",c="checkedChange",X="presentation",F="element",Q="radiogroup",U="checkedButtonChange",L="appendTo",D="labelledby",g="describedby",f="id";if(V){O.RADIO_DEFAULT_TITLE="";O.RADIO_CHECKED_TITLE="";O.CHECKBOX_DEFAULT_TITLE="";O.CHECKBOX_CHECKED_TITLE="";}var d=function(i,j){i.setAttribute(e,j);};var Y=function(i,k,j){i.setAttribute((N+k),j);};var A=function(k,i,j){this.cfg.setProperty(W,true);this.cfg.setProperty(D,j.get(f));};var B=function(){this._menu.subscribe(b,A,this);};var P=function(i){Y(this._button,K,i.newValue);};H.augmentObject(O,{_setUseARIA:function(j){var k=this.get(E),i=this._button;if(j){switch(k){case h:case a:Y(i,I,true);this.on(L,B);break;case T:case Z:d(i,k);Y(i,K,this.get(K));this.on(c,P);break;}}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});C.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA");var J=function(j){var i=j.prevValue;if(i){i._button.tabIndex=-1;}j.newValue._button.tabIndex=0;};H.augmentObject(M,{addButton:function(k){var l=G.call(this,k),j,i;if(this.get(W)){l.set(W,true);j=l._button;i=j.parentNode;d(i,X);d(i.parentNode,X);j.tabIndex=l.get(K)?0:-1;}return l;},_setUseARIA:function(i){if(i){d(this.get(F),Q);this.on(U,J);}},_setLabelledBy:function(i){if(this.get(W)){Y(this.get(F),D,i);}},_setDescribedBy:function(i){if(this.get(W)){Y(this.get(F),g,i);}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(D,{value:i.labelledby,validator:H.isString,method:this._setLabelledBy});this.setAttributeConfig(g,{value:i.describedby,validator:H.isString,method:this._setDescribedBy});S.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy","addButton");}());

291
www/extras/yui/examples/button/assets/buttonariaplugin.js vendored Normal file
View file

@ -0,0 +1,291 @@
(function () {
var Lang = YAHOO.lang,
UA = YAHOO.env.ua,
ButtonPrototype = YAHOO.widget.Button.prototype,
fnButtonInitAttributes = ButtonPrototype.initAttributes,
ButtonGroupPrototype = YAHOO.widget.ButtonGroup.prototype,
fnButtonGroupInitAttributes = ButtonGroupPrototype.initAttributes,
fnButtonGroupAddButton = ButtonGroupPrototype.addButton,
m_bUseARIA = (UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8),
// Private constants for strings
_ARIA_PREFIX = "aria-",
_USE_ARIA = "usearia",
_CHECKED = "checked",
_TYPE = "type",
_MENU = "menu",
_SPLIT = "split",
_HAS_POPUP = "haspopup",
_RENDER = "render",
_RADIO = "radio",
_CHECKBOX = "checkbox",
_ROLE = "role",
_CHECKED_CHANGE = "checkedChange",
_PRESENTATION = "presentation",
_ELEMENT = "element",
_RADIO_GROUP = "radiogroup",
_CHECKED_BUTTON_CHANGE = "checkedButtonChange",
_APPEND_TO = "appendTo",
_LABELLED_BY = "labelledby",
_DESCRIBED_BY = "describedby",
_ID = "id";
if (m_bUseARIA) {
ButtonPrototype.RADIO_DEFAULT_TITLE = "";
ButtonPrototype.RADIO_CHECKED_TITLE = "";
ButtonPrototype.CHECKBOX_DEFAULT_TITLE = "";
ButtonPrototype.CHECKBOX_CHECKED_TITLE = "";
}
// Button ARIA plugin
var setARIARole = function (element, role) {
element.setAttribute(_ROLE, role);
};
var setARIAProperty = function (element, property, value) {
element.setAttribute((_ARIA_PREFIX + property), value);
};
var enableARIAForMenu = function (type, args, button) {
this.cfg.setProperty(_USE_ARIA, true);
this.cfg.setProperty(_LABELLED_BY, button.get(_ID));
};
var onAppendTo = function () {
this._menu.subscribe(_RENDER, enableARIAForMenu, this);
};
var toggleARIACheckedState = function (event) {
setARIAProperty(this._button, _CHECKED, event.newValue);
};
Lang.augmentObject(ButtonPrototype, {
_setUseARIA: function (p_bUseARIA) {
var sType = this.get(_TYPE),
oButtonEl = this._button;
if (p_bUseARIA) {
switch (sType) {
case _MENU:
case _SPLIT:
setARIAProperty(oButtonEl, _HAS_POPUP, true);
this.on(_APPEND_TO, onAppendTo);
break;
case _RADIO:
case _CHECKBOX:
setARIARole(oButtonEl, sType);
setARIAProperty(oButtonEl, _CHECKED, this.get(_CHECKED));
this.on(_CHECKED_CHANGE, toggleARIACheckedState);
break;
}
}
},
initAttributes: function (p_oAttributes) {
/**
* @attribute usearia
* @description Boolean indicating if use of the WAI-ARIA Roles and States should
* be enabled.
* @type Boolean
* @default true for Firefox 3 and IE 8, false for all other browsers.
*/
this.setAttributeConfig(_USE_ARIA, {
value: p_oAttributes.usearia || m_bUseARIA,
validator: Lang.isBoolean,
writeOnce: true,
method: this._setUseARIA
});
fnButtonInitAttributes.apply(this, arguments);
if (m_bUseARIA) {
this.set(_USE_ARIA, true);
}
}
}, "initAttributes", "_setUseARIA");
// ButtonGroup ARIA plugin
var updateTabIndex = function (event) {
var oPreviousButton = event.prevValue;
if (oPreviousButton) {
oPreviousButton._button.tabIndex = -1;
}
event.newValue._button.tabIndex = 0;
};
Lang.augmentObject(ButtonGroupPrototype, {
addButton: function (p_oButton) {
var oButton = fnButtonGroupAddButton.call(this, p_oButton),
oButtonEl,
oParentNode;
if (this.get(_USE_ARIA)) {
oButton.set(_USE_ARIA, true);
oButtonEl = oButton._button;
oParentNode = oButtonEl.parentNode;
setARIARole(oParentNode, _PRESENTATION);
setARIARole(oParentNode.parentNode, _PRESENTATION);
oButtonEl.tabIndex = oButton.get(_CHECKED) ? 0 : -1;
}
return oButton;
},
_setUseARIA: function (p_bUseARIA) {
if (p_bUseARIA) {
setARIARole(this.get(_ELEMENT), _RADIO_GROUP);
this.on(_CHECKED_BUTTON_CHANGE, updateTabIndex);
}
},
_setLabelledBy: function (id) {
if (this.get(_USE_ARIA)) {
setARIAProperty(this.get(_ELEMENT), _LABELLED_BY, id);
}
},
_setDescribedBy: function (id) {
if (this.get(_USE_ARIA)) {
setARIAProperty(this.get(_ELEMENT), _DESCRIBED_BY, id);
}
},
initAttributes: function (p_oAttributes) {
/**
* @attribute usearia
* @description Boolean indicating if use of the WAI-ARIA Roles and States should
* be enabled.
* @type Boolean
* @default true for Firefox 3 and IE 8, false for all other browsers.
*/
this.setAttributeConfig(_USE_ARIA, {
value: p_oAttributes.usearia || m_bUseARIA,
validator: Lang.isBoolean,
writeOnce: true,
method: this._setUseARIA
});
/**
* @attribute labelledby
* @description String representing the id of the element that labels the ButtonGroup.
* Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#labelledby">
* <code>aria-labelledby</code></a> attribute.
* @type String
* @default null
*/
this.setAttributeConfig(_LABELLED_BY, {
value: p_oAttributes.labelledby,
validator: Lang.isString,
method: this._setLabelledBy
});
/**
* @attribute describedby
* @description String representing the id of the element that describes the ButtonGroup.
* Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#describedby">
* <code>aria-describedby</code></a> attribute.
* @type String
* @default null
*/
this.setAttributeConfig(_DESCRIBED_BY, {
value: p_oAttributes.describedby,
validator: Lang.isString,
method: this._setDescribedBy
});
fnButtonGroupInitAttributes.apply(this, arguments);
if (m_bUseARIA) {
this.set(_USE_ARIA, true);
}
}
}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy", "addButton");
}());

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 176 B

BIN
www/extras/yui/examples/button/assets/ella.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
www/extras/yui/examples/button/assets/ggbridge.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
www/extras/yui/examples/button/assets/gloss.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 141 B

BIN
www/extras/yui/examples/button/assets/thumb-n.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 612 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 175 B

381
www/extras/yui/examples/button/btn_example01.html Normal file
View file

File diff suppressed because one or more lines are too long

158
www/extras/yui/examples/button/btn_example01_clean.html Normal file
View file

@ -0,0 +1,158 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Push Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-example-form fieldset,
#button-example-form fieldset div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
.yui-button#pushbutton2 button,
.yui-button#pushbutton5 button,
.yui-button#pushbutton8 button {
background: url(../button/assets/add.gif) center center no-repeat;
text-indent: -4em;
overflow: hidden;
padding: 0 .75em;
width: 2em;
*margin-left: 4em; /* IE only */
*padding: 0 1.75em; /* IE only */
}
.yui-button#pushbutton3 button,
.yui-button#pushbutton6 button,
.yui-button#pushbutton9 button {
padding-left: 2em;
background: url(../button/assets/add.gif) 10% 50% no-repeat;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Push Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Push Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "click" event handler for each Button instance
function onButtonClick(p_oEvent) {
YAHOO.log("You clicked button: " + this.get("id"), "info", "example1");
}
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () {
// Create Buttons using existing <input> elements as a data source
var oPushButton1 = new YAHOO.widget.Button("pushbutton1");
oPushButton1.on("click", onButtonClick);
var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } });
var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup
var oPushButton4 = new YAHOO.widget.Button("pushbutton4");
oPushButton4.on("click", onButtonClick);
var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } });
var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } });
});
// Create Buttons without using existing markup
var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" });
oPushButton7.on("click", onButtonClick);
var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
} ();
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="pushbuttons">
<legend>Push Buttons</legend>
<fieldset id="pushbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button>
<input type="button" id="pushbutton2" name="button2" value="Add">
<input type="button" id="pushbutton3" name="button3" value="Add">
</div>
<div>
<span id="pushbutton4" class="yui-button yui-push-button"><span class="first-child"><input type="button" name="button4" value="Add"></span></span>
<span id="pushbutton5" class="yui-button yui-push-button"><em class="first-child"><button type="button" name="button5">Add</button></em></span>
<span id="pushbutton6" class="yui-button yui-push-button"><strong class="first-child"><button type="button" name="button6">Add</button></strong></span>
</div>
</fieldset>
<fieldset id="pushbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

385
www/extras/yui/examples/button/btn_example01_log.html Normal file
View file

File diff suppressed because one or more lines are too long

283
www/extras/yui/examples/button/btn_example02.html Normal file
View file

File diff suppressed because one or more lines are too long

127
www/extras/yui/examples/button/btn_example02_clean.html Normal file
View file

@ -0,0 +1,127 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-examples div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#button-examples h2 {
border: none;
margin: 0 0 .5em 0;
padding: 0;
}
#linkbutton2 a,
#linkbutton5 a {
background: url(../button/assets/yahoo.gif) center center no-repeat;
text-indent: -5em;
overflow: hidden;
padding: 0 1em;
*margin-left: 5em; /* IE only */
_padding: 0 2.25em; /* IE 6 and IE 7 (Quirks Mode) */
}
#linkbutton3 a,
#linkbutton6 a {
padding-left: 2.25em;
background: url(../button/assets/yahoo.gif) 10% 50% no-repeat;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Link Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Button that functions like an HTML <code>&#60;a/&#62;</code> element.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "linkbuttonsfrommarkup" <div>
YAHOO.util.Event.onContentReady("linkbuttonsfrommarkup", function() {
// Create Buttons from existing markup
var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");
});
// Create Buttons without using existing markup
var oLinkButton4 = new YAHOO.widget.Button({ type: "link", id: "linkbutton4", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
var oLinkButton5 = new YAHOO.widget.Button({ type: "link", id: "linkbutton5", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
var oLinkButton6 = new YAHOO.widget.Button({ type: "link", id: "linkbutton6", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
} ();
</script>
<div id="button-examples">
<div id="linkbuttonsfrommarkup">
<h2>From Markup</h2>
<a id="linkbutton1" href="http://www.yahoo.com">Yahoo!</a>
<span id="linkbutton2" class="yui-button yui-link-button"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
<span id="linkbutton3" class="yui-button yui-link-button"><em class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></em></span>
</div>
<div id="linkbuttonsfromjavascript">
<h2>From JavaScript</h2>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

287
www/extras/yui/examples/button/btn_example02_log.html Normal file
View file

File diff suppressed because one or more lines are too long

304
www/extras/yui/examples/button/btn_example03.html Normal file
View file

File diff suppressed because one or more lines are too long

149
www/extras/yui/examples/button/btn_example03_clean.html Normal file
View file

@ -0,0 +1,149 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Checkbox Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-example-form fieldset,
#button-example-form fieldset div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Checkbox Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Button that functions like an HTML checkbox (<code>&#60;input type="checkbox"/&#62;</code>).</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
(function () {
var Button = YAHOO.widget.Button;
// "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
// Create Buttons using existing <input> elements as a data source
var oCheckButton1 = new Button("checkbutton1", { label: "One" });
var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
var oCheckButton4 = new Button("checkbutton4", { label: "Four" });
// Create Buttons using the YUI Button markup
var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
});
// Create Buttons without using existing markup
var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
}());
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="checkboxbuttons">
<legend>Checkbox Buttons</legend>
<fieldset id="checkboxbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
<input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
<input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
<input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">
</div>
<div>
<span id="checkbutton5" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">One</button></span></span>
<span id="checkbutton6" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">Two</button></span></span>
<span id="checkbutton7" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">Three</button></span></span>
<span id="checkbutton8" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">Four</button></span></span>
</div>
</fieldset>
<fieldset id="checkboxbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
<div>
<input type="reset" name="resetbutton" value="Reset Form">
<input type="submit" name="submitbutton" value="Submit Form">
</div>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

308
www/extras/yui/examples/button/btn_example03_log.html Normal file
View file

File diff suppressed because one or more lines are too long

357
www/extras/yui/examples/button/btn_example04.html Normal file
View file

File diff suppressed because one or more lines are too long

169
www/extras/yui/examples/button/btn_example04_clean.html Normal file
View file

@ -0,0 +1,169 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Radio Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-example-form fieldset,
#button-example-form fieldset div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Radio Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Button that functions like an HTML radio button (<code>&#60;input type="radio"/&#62;</code>).</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
(function () {
var ButtonGroup = YAHOO.widget.ButtonGroup;
// "checkedButtonChange" event handler for each ButtonGroup instance
var onCheckedButtonChange = function (p_oEvent) {
if(p_oEvent.prevValue) {
YAHOO.log(p_oEvent.prevValue.get("name"), "info", "example4");
}
if(p_oEvent.newValue) {
YAHOO.log(p_oEvent.newValue.get("name"), "info", "example4");
}
};
// "contentready" event handler for the "radiobuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup", function () {
var oButtonGroup1 = new ButtonGroup("buttongroup1");
oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);
var oButtonGroup2 = new ButtonGroup("buttongroup2");
oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);
});
// Create a ButtonGroup without using existing markup
var oButtonGroup3 = new ButtonGroup({ id: "buttongroup3", name: "radiofield3", container: "radiobuttonsfromjavascript", usearia: true });
oButtonGroup3.addButtons([
{ label: "Radio 9", value: "Radio 9", checked: true },
{ label: "Radio 10", value: "Radio 10" },
{ label: "Radio 11", value: "Radio 11" },
{ label: "Radio 12", value: "Radio 12" }
]);
oButtonGroup3.on("checkedButtonChange", onCheckedButtonChange);
}());
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="radiobuttons">
<legend>Radio Buttons</legend>
<fieldset id="radiobuttonsfrommarkup">
<legend>From Markup</legend>
<div id="buttongroup1" class="yui-buttongroup">
<input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked>
<input id="radio2" type="radio" name="radiofield1" value="Radio 2">
<input id="radio3" type="radio" name="radiofield1" value="Radio 3">
<input id="radio4" type="radio" name="radiofield1" value="Radio 4">
</div>
<div id="buttongroup2" class="yui-buttongroup">
<span id="radio5" class="yui-button yui-radio-button yui-button-checked"><span class="first-child"><button type="button" name="radiofield2" value="Radio 5">Radio 5</button></span></span>
<span id="radio6" class="yui-button yui-radio-button"><span class="first-child"><button type="button" name="radiofield2" value="Radio 6">Radio 6</button></span></span>
<span id="radio7" class="yui-button yui-radio-button"><span class="first-child"><button type="button" name="radiofield2" value="Radio 7">Radio 7</button></span></span>
<span id="radio8" class="yui-button yui-radio-button"><span class="first-child"><button type="button" name="radiofield2" value="Radio 8">Radio 8</button></span></span>
</div>
</fieldset>
<fieldset id="radiobuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
<div>
<input type="reset" name="resetbutton" value="Reset Form">
<input type="submit" name="submitbutton" value="Submit Form">
</div>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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