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

Purge YUI example code due to license issues with Debian*. Fixes bug #11710.

Browse source
This commit is contained in:
Colin Kuskie 2010-07-12 09:36:07 -07:00
parent 5fdb8e3ba1
commit 8938685b9b
1186 changed files with 1 additions and 313745 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/changelog/7.x.x.txt
View file

@ -6,6 +6,7 @@
- fixed #11692: Dates not imported correctly into Thingy
- fixed #11672: UTF-Error in message body (from DataForm)
- fixed #11709: Shop - i18n error
- fixed #11710: Weird license in json.js might be taken as non free
7.9.8
- fixed #11651: First Day of Week is a string...

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

File diff suppressed because one or more lines are too long

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

@ -1,134 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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-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>

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

File diff suppressed because one or more lines are too long

220
www/extras/yui/examples/animation/attributes.html
View file

File diff suppressed because one or more lines are too long

75
www/extras/yui/examples/animation/attributes_clean.html
View file

@ -1,75 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>

218
www/extras/yui/examples/animation/basic.html
View file

File diff suppressed because one or more lines are too long

75
www/extras/yui/examples/animation/basic_clean.html
View file

@ -1,75 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>

218
www/extras/yui/examples/animation/colors.html
View file

File diff suppressed because one or more lines are too long

74
www/extras/yui/examples/animation/colors_clean.html
View file

@ -1,74 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

216
www/extras/yui/examples/animation/control.html
View file

File diff suppressed because one or more lines are too long

74
www/extras/yui/examples/animation/control_clean.html
View file

@ -1,74 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

218
www/extras/yui/examples/animation/easing.html
View file

File diff suppressed because one or more lines are too long

74
www/extras/yui/examples/animation/easing_clean.html
View file

@ -1,74 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

218
www/extras/yui/examples/animation/from.html
View file

File diff suppressed because one or more lines are too long

74
www/extras/yui/examples/animation/from_clean.html
View file

@ -1,74 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

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

File diff suppressed because one or more lines are too long

218
www/extras/yui/examples/animation/motion.html
View file

File diff suppressed because one or more lines are too long

74
www/extras/yui/examples/animation/motion_clean.html
View file

@ -1,74 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

228
www/extras/yui/examples/animation/scroll.html
View file

File diff suppressed because one or more lines are too long

83
www/extras/yui/examples/animation/scroll_clean.html
View file

@ -1,83 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

216
www/extras/yui/examples/animation/units.html
View file

File diff suppressed because one or more lines are too long

73
www/extras/yui/examples/animation/units_clean.html
View file

@ -1,73 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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>

257
www/extras/yui/examples/autocomplete/ac_accessible.html
View file

File diff suppressed because one or more lines are too long

93
www/extras/yui/examples/autocomplete/ac_accessible_clean.html
View file

@ -1,93 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Screenreader Accessibility</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>Screenreader Accessibility</h1>
<div class="exampleIntro">
<p>This AutoComplete example demonstrates how to make the widget more screenreader accessible.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="myAutoComplete">
<label id="myInputLabel" for="myInput">Enter a state:</label>&nbsp;<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.Accessibility = function() {
// Set up DataSource and AutoComplete instances
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates, {responseSchema: {fields : ["state"]}});
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
// Set up span element with screenreader text
var elLabel = YAHOO.util.Dom.get("myInputLabel"),
origLabel = elLabel.innerHTML,
screenreaderLabel = "<span style=\"position:absolute;left:-999em;\">Use the up and down arrow keys to navigate suggestions.</span>"
// Insert the screenreader text whenever user starts an AutoComplete interaction
oAC.textboxFocusEvent.subscribe(function(){elLabel.innerHTML += screenreaderLabel;});
oAC.textboxBlurEvent.subscribe(function(){elLabel.innerHTML = origLabel;});
// The typeAhead feature must also be set to true for screenreader support
oAC.typeAhead = true;
// Turn off autoHighlight for less confusion
oAC.autoHighlight = false;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

261
www/extras/yui/examples/autocomplete/ac_accessible_log.html
View file

File diff suppressed because one or more lines are too long

251
www/extras/yui/examples/autocomplete/ac_basic_array.html
View file

File diff suppressed because one or more lines are too long

83
www/extras/yui/examples/autocomplete/ac_basic_array_clean.html
View file

@ -1,83 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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 =============================== -->
<label for="myInput">Enter a state:</label>
<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>

255
www/extras/yui/examples/autocomplete/ac_basic_array_log.html
View file

File diff suppressed because one or more lines are too long

254
www/extras/yui/examples/autocomplete/ac_basic_xhr.html
View file

File diff suppressed because one or more lines are too long

88
www/extras/yui/examples/autocomplete/ac_basic_xhr_clean.html
View file

@ -1,88 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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 =============================== -->
<label for="myInput">Search our database:</label>
<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>

258
www/extras/yui/examples/autocomplete/ac_basic_xhr_log.html
View file

File diff suppressed because one or more lines are too long

471
www/extras/yui/examples/autocomplete/ac_combobox.html
View file

File diff suppressed because one or more lines are too long

194
www/extras/yui/examples/autocomplete/ac_combobox_clean.html
View file

@ -1,194 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Combobox, with CSS for Multiple Stacked Instances</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-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>Combobox, with CSS for Multiple Stacked Instances</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. Please note the following custom CSS:</p>
<ul>
<li>z-index has been applied to support multiple vertically stacked AutoComplete instances</li>
<li>the input field and container have been styled to support a button inline to the right</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<label for="bInput">What would you like for breakfast?</label>
<div id="bAutoComplete">
<input id="bInput" type="text"> <span id="toggleB"></span>
<div id="bContainer"></div>
</div>
<label for="lInput">What would you like for lunch?</label>
<div id="lAutoComplete">
<input id="lInput" type="text"> <span id="toggleL"></span>
<div id="lContainer"></div>
</div>
<label for="dInput">What would you like for dinner?</label>
<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>

475
www/extras/yui/examples/autocomplete/ac_combobox_log.html
View file

File diff suppressed because one or more lines are too long

431
www/extras/yui/examples/autocomplete/ac_customize.html
View file

File diff suppressed because one or more lines are too long

324
www/extras/yui/examples/autocomplete/ac_customize_clean.html
View file

@ -1,324 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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:50%;height:4em;}/* set width and height of widget here*/
#dashboard_autocomplete label {display:block;color:#E76300;font-weight:bold;}
</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 look and feel in the browser.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- AutoComplete begins -->
<div id="dashboard_autocomplete">
<label for="dashboard_input">Search the Web Using Yahoo!'s Search API:</label>
<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>

435
www/extras/yui/examples/autocomplete/ac_customize_log.html
View file

File diff suppressed because one or more lines are too long

349
www/extras/yui/examples/autocomplete/ac_flickr_xml.html
View file

File diff suppressed because one or more lines are too long

141
www/extras/yui/examples/autocomplete/ac_flickr_xml_clean.html
View file

@ -1,141 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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 =============================== -->
<label for="flickrinput">Find photos by tag and collect your selections:</label>
<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>

353
www/extras/yui/examples/autocomplete/ac_flickr_xml_log.html
View file

File diff suppressed because one or more lines are too long

454
www/extras/yui/examples/autocomplete/ac_fn_multfields.html
View file

File diff suppressed because one or more lines are too long

185
www/extras/yui/examples/autocomplete/ac_fn_multfields_clean.html
View file

@ -1,185 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>FunctionDataSource to Search Multiple Fields of an Address Book 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;
}
.match {
font-weight:bold;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</h1>
<div class="exampleIntro">
<p>This example uses a FunctionDataSource to perform string matching against multiple fields of a contacts database at runtime. Since the data for this example is loaded into local memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. A custom formatter allows users to see their search term within the result set. An itemSelectEvent handler is used to update the input field with a custom value and to populate a hidden form field with the selected contact's ID for eventually submitting back to a server.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<label for="myInput">Find a contact:</label>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
<input id="myHidden" type="hidden">
</div>
<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.example.FnMultipleFields = function(){
var myContacts = [
{id:0, fname:"Alice", lname:"Abrams", nname:"ace"},
{id:1, fname:"Abraham", lname:"Axelrod", nname:"Abe"},
{id:2, fname:"Bruce", lname:"Baxter", nname:null},
{id:3, fname:"Robert", lname:"Brown", nname:"Bob"},
{id:4, fname:"Carl", lname:"Carlson", nname:null},
{id:5, fname:"Charlie", lname:"Chaplin", nname:"Chuck"},
{id:6, fname:"Darla", lname:"Darling", nname:null},
{id:7, fname:"David", lname:"Dashing", nname:"Dave"},
{id:8, fname:"Egbert", lname:"Excellent", nname:null},
{id:9, fname:"Engleberg", lname:"Humperdink", nname:null}
];
// Define a custom search function for the DataSource
var matchNames = function(sQuery) {
// Case insensitive matching
var query = sQuery.toLowerCase(),
contact,
i=0,
l=myContacts.length,
matches = [];
// Match against each name of each contact
for(; i<l; i++) {
contact = myContacts[i];
if((contact.fname.toLowerCase().indexOf(query) > -1) ||
(contact.lname.toLowerCase().indexOf(query) > -1) ||
(contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
matches[matches.length] = contact;
}
}
return matches;
};
// Use a FunctionDataSource
var oDS = new YAHOO.util.FunctionDataSource(matchNames);
oDS.responseSchema = {
fields: ["id", "fname", "lname", "nname"]
}
// Instantiate AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.useShadow = true;
oAC.resultTypeList = false;
// Custom formatter to highlight the matching letters
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
var query = sQuery.toLowerCase(),
fname = oResultData.fname,
lname = oResultData.lname,
nname = oResultData.nname || "", // Guard against null value
query = sQuery.toLowerCase(),
fnameMatchIndex = fname.toLowerCase().indexOf(query),
lnameMatchIndex = lname.toLowerCase().indexOf(query),
nnameMatchIndex = nname.toLowerCase().indexOf(query),
displayfname, displaylname, displaynname;
if(fnameMatchIndex > -1) {
displayfname = highlightMatch(fname, query, fnameMatchIndex);
}
else {
displayfname = fname;
}
if(lnameMatchIndex > -1) {
displaylname = highlightMatch(lname, query, lnameMatchIndex);
}
else {
displaylname = lname;
}
if(nnameMatchIndex > -1) {
displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
}
else {
displaynname = nname ? "(" + nname + ")" : "";
}
return displayfname + " " + displaylname + " " + displaynname;
};
// Helper function for the formatter
var highlightMatch = function(full, snippet, matchindex) {
return full.substring(0, matchindex) +
"<span class='match'>" +
full.substr(matchindex, snippet.length) +
"</span>" +
full.substring(matchindex + snippet.length);
};
// Define an event handler to populate a hidden form field
// when an item gets selected and populate the input field
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;
myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
};
oAC.itemSelectEvent.subscribe(myHandler);
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

458
www/extras/yui/examples/autocomplete/ac_fn_multfields_log.html
View file

File diff suppressed because one or more lines are too long

381
www/extras/yui/examples/autocomplete/ac_formatting_proxyless.html
View file

File diff suppressed because one or more lines are too long

135
www/extras/yui/examples/autocomplete/ac_formatting_proxyless_clean.html
View file

@ -1,135 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/get/get-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">
label {
color:#E76300;
font-weight:bold;
}
#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 to find images from the YQL webservice without a proxy. The generateRequest() method must be customized to comply with the open API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
<p>A custom formatter function is defined in order to show thumbnail images in the results container.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<label for="myInput">Yahoo! Image Search:</label>
<div id="myAutoComplete">
<input id="myInput" type="text" name="p">
<div id="myContainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.CustomFormatting = (function(){
// Instantiate DataSource
var oDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?");
oDS.responseSchema = {
resultsList: "query.results.result",
fields: ["url", "thumbnail_url", "clickurl"]
};
// 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);
// Bump up the query delay to reduce server load
oAC.queryDelay = 1;
// The webservice needs custom parameters
oAC.generateRequest = function(sQuery) {
return "q=select%20*%20from%20search.images%20where%20query%3D%22" +
sQuery +
"%22%20and%20mimetype%20like%20%22%25jpeg%25%22&format=json";
};
// Result data passed as object for easy access from custom formatter.
oAC.resultTypeList = false;
// Customize formatter to show thumbnail images
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
if(oResultData.thumbnail_url) {
img = "<img src=\""+ oResultData.thumbnail_url + "\">";
}
else {
img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>";
}
return "<div class=\"result\">" + img + "&nbsp;<span class=\"name\">" + sResultMatch + "</span></div>";
};
oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
var oData = aArgs[2]; // object literal of selected item's result data
// Redirect to the img
window.location.href = oData.clickurl;
});
// 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>

385
www/extras/yui/examples/autocomplete/ac_formatting_proxyless_log.html
View file

File diff suppressed because one or more lines are too long

298
www/extras/yui/examples/autocomplete/ac_itemselect.html
View file

File diff suppressed because one or more lines are too long

108
www/extras/yui/examples/autocomplete/ac_itemselect_clean.html
View file

@ -1,108 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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 =============================== -->
<form id="myForm" action="#">
<label for="myInput">Find a company in the accounts database:</label>
<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>

302
www/extras/yui/examples/autocomplete/ac_itemselect_log.html
View file

File diff suppressed because one or more lines are too long

336
www/extras/yui/examples/autocomplete/ac_skinning.html
View file

File diff suppressed because one or more lines are too long

277
www/extras/yui/examples/autocomplete/ac_tags_alwaysshow.html
View file

File diff suppressed because one or more lines are too long

96
www/extras/yui/examples/autocomplete/ac_tags_alwaysshow_clean.html
View file

@ -1,96 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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 =============================== -->
<label for="myInput">Assign tags:</label>
<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>

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

File diff suppressed because one or more lines are too long

286
www/extras/yui/examples/autocomplete/ac_xhr_customrequest.html
View file

File diff suppressed because one or more lines are too long

96
www/extras/yui/examples/autocomplete/ac_xhr_customrequest_clean.html
View file

@ -1,96 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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">
label {
color:#E76300;
font-weight:bold;
}
#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 =============================== -->
<label for="myInput">Yahoo! Search:</label>
<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>

290
www/extras/yui/examples/autocomplete/ac_xhr_customrequest_log.html
View file

File diff suppressed because one or more lines are too long

279
www/extras/yui/examples/autocomplete/ac_ysearch_flat.html
View file

File diff suppressed because one or more lines are too long

103
www/extras/yui/examples/autocomplete/ac_ysearch_flat_clean.html
View file

@ -1,103 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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*/
label {color:#E76300;}
</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>
<p>Note the custom CSS that is needed for stacking AutoComplete instances.</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>
<label for="ysearchinput1">First AutoComplete instance enables queryMatchSubset:</label>
<div id="example1" class="autocomplete">
<input id="ysearchinput1" type="text">
<div id="ysearchcontainer1"></div>
</div>
<label for="ysearchinput2">Second AutoComplete instance does not enable queryMatchSubset:</label>
<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>

283
www/extras/yui/examples/autocomplete/ac_ysearch_flat_log.html
View file

File diff suppressed because one or more lines are too long

255
www/extras/yui/examples/autocomplete/ac_ysearch_json.html
View file

File diff suppressed because one or more lines are too long

98
www/extras/yui/examples/autocomplete/ac_ysearch_json_clean.html
View file

@ -1,98 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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 */
label { color:#E76300;font-weight:bold;}
#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. Custom CSS rules have been applied to achieve the shrink-wrapped, centered search module.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<form action="http://search.yahoo.com/search">
<div id="ysearch">
<label for="ysearchinput">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>

259
www/extras/yui/examples/autocomplete/ac_ysearch_json_log.html
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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 217 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 214 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 300 B

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

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

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

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

File diff suppressed because it is too large Load diff

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

@ -1,48 +0,0 @@
<?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);
?>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

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

File diff suppressed because one or more lines are too long

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

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

95
www/extras/yui/examples/base/index.html
View file

File diff suppressed because one or more lines are too long

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 974 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 892 B

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

@ -1 +0,0 @@
(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");}());YAHOO.register("buttonariaplugin",YAHOO.widget.Button,{version:"@VERSION@",build:"@BUILD@"});

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

@ -1,292 +0,0 @@
(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");
}());
YAHOO.register("buttonariaplugin", YAHOO.widget.Button, {version: "@VERSION@", build: "@BUILD@"});

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 176 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.5 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 101 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 78 KiB

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 141 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 612 B

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 175 B

386
www/extras/yui/examples/button/btn_example01.html
View file

File diff suppressed because one or more lines are too long

160
www/extras/yui/examples/button/btn_example01_clean.html
View file

@ -1,160 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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-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">
<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>

390
www/extras/yui/examples/button/btn_example01_log.html
View file

File diff suppressed because one or more lines are too long

288
www/extras/yui/examples/button/btn_example02.html
View file

File diff suppressed because one or more lines are too long

129
www/extras/yui/examples/button/btn_example02_clean.html
View file

@ -1,129 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=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-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>

292
www/extras/yui/examples/button/btn_example02_log.html
View file

File diff suppressed because one or more lines are too long

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