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

upgrade to yui 2.5.1

Browse source
This commit is contained in:
JT Smith 2008-03-25 16:13:25 +00:00
parent e00050ad1c
commit ff7d72becc
1632 changed files with 812103 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,311 @@
<!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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#dashboard_autocomplete {margin:0 1em 0 0;width:40%;height:4em;}/* set width and height of widget here*/
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Configurations Dashboard</h1>
<div class="exampleIntro">
<p>This example is designed to allow you to experiment with the various
configuration properties provided by AutoComplete and to explore their impact
on the interaction. The first field after the AutoComplete input textbox
is a select element that
allows you to test for bleed-through on Internet Explorer when the AutoComplete
suggestion container descends to cover it. The remaining form fields allow you
to change property settings on the AutoComplete instance and to see immediately
how those changes feel in the browser.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- AutoComplete begins -->
<h3>Search the Web Using Yahoo!'s Search API:</h3>
<div id="dashboard_autocomplete">
<input id="dashboard_input" type="text" name="p">
<div id="dashboard_container"></div>
</div>
<!-- AutoComplete ends -->
<!-- Panel begins -->
<h3>Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:</h3>
<form id="panel">
<!-- The following is in a select to demonstrate the useIFrame feature -->
<select><option>Customize configurations for AutoComplete</option></select>
<div>
<input id="animHoriz" type="checkbox">
<label for="animHoriz">Animate Horizontally</label>
</div>
<div>
<input id="animVert" type="checkbox" checked>
<label for="animVert">Animate Vertically</label>
</div>
<div>
<label for="animSpeedInput">Animation Speed: </label>
<input id="animSpeedInput" type="text" size="2" value="0.3">
<input id="animSpeed" type="button" value="Update">
</div>
<div>
<input id="useShadow" type="checkbox">
<label for="useShadow">Use Shadow</label>
</div>
<div>
<input id="useIFrame" type="checkbox">
<label for="useIFrame">Use IFrame</label>
</div>
<div>
<input id="autoHighlight" type="checkbox" checked>
<label for="autoHighlight">Automatically Highlight First Item</label>
</div>
<div>
<input id="typeAhead" type="checkbox">
<label for="typeAhead">Type Ahead</label>
</div>
<div>
<input id="forceSelection" type="checkbox">
<label for="forceSelection">Force a Selection</label>
</div>
<div>
<label for="maxResultsDisplayedInput">Maximum Results: </label>
<input id="maxResultsDisplayedInput" type="text" size="2" value="10">
<input id="maxResultsDisplayed" type="button" value="Update">
</div>
<div>
<label for="minQueryLengthInput">Minimum Query Length: </label>
<input id="minQueryLengthInput" type="text" size="2" value="1">
<input id="minQueryLength" type="button" value="Update">
</div>
<div>
<label for="queryDelayInput">Query Delay: </label>
<input id="queryDelayInput" type="text" size="2" value="0.2">
<input id="queryDelay" type="button" value="Update">
</div>
<div>
<label for="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 = new function() {
// Initialize widgets and the dashboard
this.init = function() {
// DataSource
this.myDataSource = new YAHOO.widget.DS_XHR("assets/php/ysearch_flat.php", ["\n", "\t"]);
// This is the one non-default value other than constructor params
this.myDataSource.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
// AutoComplete
this.myAutoComp = new YAHOO.widget.AutoComplete("dashboard_input","dashboard_container", this.myDataSource);
// IFrame workaround for IE
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
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("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
this.updateValue = function(property, value) {
this.myAutoComp[property] = value;
this.logSuccess(property);
};
// For invalid inputs
this.revertInput = function(property) {
YAHOO.util.Dom.get(property+"Input").value = this.myAutoComp[property];
this.logFailure(property);
};
// Log success message
this.logSuccess = function(property) {
YAHOO.log("Updated " + property + " to " + this.myAutoComp[property] + ".", "info", "example");
};
// Log failure message
this.logFailure = function(property, error) {
YAHOO.log("Could not update " + property + ".", "warn","example");
};
// DOM event handler (scope assigned to the HTML Element)
this.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)
this.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)
this.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)
this.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)
this.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>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,117 @@
<!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>Use AutoComplete with Flickr's XML Webservice</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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for scrolling container */
.flickrautocomplete {
width:25em; /* 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>Use AutoComplete with Flickr's XML Webservice</h1>
<div class="exampleIntro">
<p>This example uses a DataSource that points to Flickr Web
Services; Flickr returns XML data via a simple PHP proxy. In order to return
valid data from the Flickr application, <code>scriptQueryParameter</code>
has been customized to be <code>tags</code>, and <code>scriptQueryAppend</code> is used
to pass in additional required arguments. The cache has been disabled so
that each query is forced to make a trip to the live application.</p>
<p>This instance of AutoComplete defines a robust custom
<code>formatResult()</code> function to format the result data into
images in HTML. Automatic
highlighting of the first result item in the container has been disabled by
setting <code>autoHighlight</code> to <code>false</code>.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Enter Flickr tags to find a photo (separate with commas):</h3>
<div class="flickrautocomplete">
<input id="flickrinput" type="text">
<div id="flickrcontainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.ACFlickr = new function() {
// Instantiate an XHR DataSource and define schema as an array:
// ["ResultNodeName",
// "QueryKeyAttributeOrNodeName",
// "AdditionalParamAttributeOrNodeName1",
// ...
// "AdditionalParamAttributeOrNodeNameN"]
this.oACDS = new YAHOO.widget.DS_XHR("assets/php/flickr_proxy.php",
["photo", "title", "id", "owner", "secret", "server"]);
this.oACDS.scriptQueryParam = "tags";
this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
this.oACDS.maxCacheEntries = 0;
this.oACDS.scriptQueryAppend = "method=flickr.photos.search";
// Instantiate AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', this.oACDS);
this.oAutoComp.autoHighlight = false;
this.oAutoComp.formatResult = function(oResultItem, sQuery) {
// This was defined by the schema array of the data source
var sTitle = oResultItem[0];
var sId = oResultItem[1];
var sOwner = oResultItem[2];
var sSecret = oResultItem[3];
var sServer = oResultItem[4];
var sUrl = "http://static.flickr.com/" +
sServer +
"/" +
sId +
"_" +
sSecret +
"_s.jpg";
var sMarkup = "<img src='" + sUrl + "' class='flickrImg'> " + sTitle;
return (sMarkup);
};
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

264
www/extras/yui/examples/autocomplete/ac_proxyless.html Normal file
View file

File diff suppressed because one or more lines are too long

103
www/extras/yui/examples/autocomplete/ac_proxyless_clean.html Normal file
View file

@ -0,0 +1,103 @@
<!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>Proxyless AutoComplete pointing to the Yahoo! Search API</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/get/get-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 implementation */
#ysearchautocomplete { margin-bottom:2em;width:25em;}
#ysearchautocomplete .result {position:relative;height:62px;}
#ysearchautocomplete .name {position:absolute;bottom:0;left:64px;}
#ysearchautocomplete .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;}
#ysearchautocomplete .imgtext {position:absolute;width:58px;top:50%;text-align:center;}
#ysearchautocomplete img {width:60px;height:60px;margin-right:4px;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Proxyless AutoComplete pointing to the Yahoo! Search API</h1>
<div class="exampleIntro">
<p>This AutoComplete instance uses a Script Node type of DataSource in order to
retrieve data from a cross-domain server, Yahoo!'s Audio Search API, without
the need for a proxy. The webservice must support a "callback" parameter, which
the AutoComplete widget will use to pass in its internal callback function.
The DataSource schema is defined to parse the return data
for fields named "Name" and "Thumbnail" (in order to display a thumbnail image to
the user).</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.ACScriptNode.validateForm();">
<h3>Yahoo! Audio Search:</h3>
<div id="ysearchautocomplete">
<input id="ysearchinput" type="text" name="p">
<div id="ysearchcontainer"></div>
</div>
</form>
<script type="text/javascript">
YAHOO.example.ACScriptNode = new function(){
// Instantiate an Script Node DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
this.oACDS = new YAHOO.widget.DS_ScriptNode("http://search.yahooapis.com/AudioSearchService/V1/artistSearch?appid=YahooDemo&output=json", ["ResultSet.Result","Name","Thumbnail"]);
this.oACDS.scriptQueryParam = "artist";
// Instantiate AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
this.oAutoComp.formatResult = function(oResultItem, sQuery) {
var img = "", nonimg = "";
var oThumbnail = oResultItem[1];
if(oThumbnail && (oThumbnail !== "")) {
img = "<img src=\""+ oThumbnail.Url + "\">";
}
else {
img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>";
}
return "<div class=\"result\">" + img + "&nbsp;<span class=\"name\">" + oResultItem[0] + "</span></div>";
};
// Stub for form validation
this.validateForm = function() {
// Validation code goes here
return true;
};
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

268
www/extras/yui/examples/autocomplete/ac_proxyless_log.html Normal file
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

757
www/extras/yui/examples/autocomplete/ac_states_jsarray.html Normal file
View file

File diff suppressed because one or more lines are too long

563
www/extras/yui/examples/autocomplete/ac_states_jsarray_clean.html Normal file
View file

@ -0,0 +1,563 @@
<!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>Query a JavaScript Array for In-memory 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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for multiple stacked instances */
#statesautocomplete,
#statesautocomplete2 {
width:15em; /* set width here */
padding-bottom:2em;
}
#statesautocomplete {
z-index:9000; /* z-index needed on top instance for ie & sf absolute inside relative issue */
}
#statesinput,
#statesinput2 {
_position:absolute; /* abs pos needed for ie quirks */
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Query a JavaScript Array for In-memory Data</h1>
<div class="exampleIntro">
<p>There are two AutoComplete widgets on this page that each point to a
different DS_JSArray DataSource instance. Driving each DataSource is a local
JavaScript array of strings: <code>statesArray</code> and <code>areaCodesArray</code>.
By pointing to arrays that are already loaded into memory the widget is
very fast to return data.</p>
<p>Enabling the
<code>prehighlightClassName</code> feature provides supplemental visual
feedback for mouse events on results in the container.</p>
<p>The <code>formatResult</code> method of the second AutoComplete instance
has been enhanced to display two data fields in the container, and the
<code>forceSelection</code> property has been enabled to prevent the user from
typing in a free-form selection.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput" type="text">
<div id="statescontainer"></div>
</div>
<h3>Find an area code</h3>
<div id="statesautocomplete2">
<input id="statesinput2" type="text">
<div id="statescontainer2"></div>
</div>
<!-- In-memory JS array begins-->
<script type="text/javascript">
YAHOO.example.statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Dakota",
"North Carolina",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
YAHOO.example.areacodesArray = [
["201", "New Jersey"],
["202", "Washington, DC"],
["203", "Connecticut"],
["204", "Manitoba, Canada"],
["205", "Alabama"],
["206", "Washington"],
["207", "Maine"],
["208", "Idaho"],
["209", "California"],
["210", "Texas"],
["212", "New York"],
["213", "California"],
["214", "Texas"],
["215", "Pennsylvania"],
["216", "Ohio"],
["217", "Illinois"],
["218", "Minnesota"],
["219", "Indiana"],
["224", "Illinois"],
["225", "Louisiana"],
["227", "Maryland"],
["228", "Mississippi"],
["229", "Georgia"],
["231", "Michigan"],
["234", "Ohio"],
["239", "Florida"],
["240", "Maryland"],
["242", "Bahamas"],
["246", "Barbados"],
["248", "Michigan"],
["250", "British Columbia"],
["251", "Alabama"],
["252", "North Carolina"],
["253", "Washington"],
["254", "Texas"],
["256", "Alabama"],
["260", "Indiana"],
["262", "Wisconsin"],
["264", "Anguilla"],
["267", "Pennsylvania"],
["268", "Antigua and Barbuda"],
["269", "Michigan"],
["270", "Kentucky"],
["276", "Virginia"],
["281", "Texas"],
["283", "Ohio"],
["284", "British Virgin Islands"],
["289", "Ontario"],
["301", "Maryland"],
["302", "Delaware"],
["303", "Colorado"],
["304", "West Virginia"],
["305", "Florida"],
["306", "Saskatchewan, Canada"],
["307", "Wyoming"],
["308", "Nebraska"],
["309", "Illinois"],
["310", "California"],
["312", "Illinois"],
["313", "Michigan"],
["314", "Missouri"],
["315", "New York"],
["316", "Kansas"],
["317", "Indiana"],
["318", "Louisiana"],
["319", "Iowa"],
["320", "Minnesota"],
["321", "Florida"],
["323", "California"],
["330", "Ohio"],
["331", "Illinois"],
["334", "Alabama"],
["336", "North Carolina"],
["337", "Louisiana"],
["339", "Massachusetts"],
["340", "US Virgin Islands"],
["345", "Cayman Islands"],
["347", "New York"],
["351", "Massachusetts"],
["352", "Florida"],
["360", "Washington"],
["361", "Texas"],
["386", "Florida"],
["401", "Rhode Island"],
["402", "Nebraska"],
["403", "Alberta, Canada"],
["404", "Georgia"],
["405", "Oklahoma"],
["406", "Montana"],
["407", "Florida"],
["408", "California"],
["409", "Texas"],
["410", "Maryland"],
["412", "Pennsylvania"],
["413", "Massachusetts"],
["414", "Wisconsin"],
["415", "California"],
["416", "Ontario, Canada"],
["417", "Missouri"],
["418", "Quebec, Canada"],
["419", "Ohio"],
["423", "Tennessee"],
["424", "California"],
["425", "Washington"],
["434", "Virginia"],
["435", "Utah"],
["440", "Ohio"],
["441", "Bermuda"],
["443", "Maryland"],
["445", "Pennsylvania"],
["450", "Quebec, Canada"],
["464", "Illinois"],
["469", "Texas"],
["470", "Georgia"],
["473", "Grenada"],
["475", "Connecticut"],
["478", "Georgia"],
["479", "Arkansas"],
["480", "Arizona"],
["484", "Pennsylvania"],
["501", "Arkansas"],
["502", "Kentucky"],
["503", "Oregon"],
["504", "Louisiana"],
["505", "New Mexico"],
["506", "New Brunswick, Canada"],
["507", "Minnesota"],
["508", "Massachusetts"],
["509", "Washington"],
["510", "California"],
["512", "Texas"],
["513", "Ohio"],
["514", "Quebec, Canada"],
["515", "Iowa"],
["516", "New York"],
["517", "Michigan"],
["518", "New York"],
["519", "Ontario, Canada"],
["520", "Arizona"],
["530", "California"],
["540", "Virginia"],
["541", "Oregon"],
["551", "New Jersey"],
["557", "Missouri"],
["559", "California"],
["561", "Florida"],
["562", "California"],
["563", "Iowa"],
["564", "Washington"],
["567", "Ohio"],
["570", "Pennsylvania"],
["571", "Virginia"],
["573", "Missouri"],
["574", "Indiana"],
["580", "Oklahoma"],
["585", "New York"],
["586", "Michigan"],
["601", "Mississippi"],
["602", "Arizona"],
["603", "New Hampshire"],
["604", "British Columbia, Canada"],
["605", "South Dakota"],
["606", "Kentucky"],
["607", "New York"],
["608", "Wisconsin"],
["609", "New Jersey"],
["610", "Pennsylvania"],
["612", "Minnesota"],
["613", "Ontario, Canada"],
["614", "Ohio"],
["615", "Tennessee"],
["616", "Michigan"],
["617", "Massachusetts"],
["618", "Illinois"],
["619", "California"],
["620", "Kansas"],
["623", "Arizona"],
["626", "California"],
["630", "Illinois"],
["631", "New York"],
["636", "Missouri"],
["641", "Iowa"],
["646", "New York"],
["647", "Ontario, Canada"],
["649", "Turks and Caicos Islands"],
["650", "California"],
["651", "Minnesota"],
["660", "Missouri"],
["661", "California"],
["662", "Mississippi"],
["664", "Montserrat"],
["667", "Maryland"],
["670", "CNMI"],
["671", "Guam"],
["678", "Georgia"],
["682", "Texas"],
["701", "North Dakota"],
["702", "Nevada"],
["703", "Virginia"],
["704", "North Carolina"],
["705", "Ontario, Canada"],
["706", "Georgia"],
["707", "California"],
["708", "Illinois"],
["709", "Newfoundland, Canada"],
["712", "Iowa"],
["713", "Texas"],
["714", "California"],
["715", "Wisconsin"],
["716", "New York"],
["717", "Pennsylvania"],
["718", "New York"],
["719", "Colorado"],
["720", "Colorado"],
["724", "Pennsylvania"],
["727", "Florida"],
["731", "Tennessee"],
["732", "New Jersey"],
["734", "Michigan"],
["737", "Texas"],
["740", "Ohio"],
["754", "Florida"],
["757", "Viriginia"],
["758", "St. Lucia"],
["760", "California"],
["763", "Minnesota"],
["765", "Indiana"],
["767", "Dominica"],
["770", "Georgia"],
["772", "Florida"],
["773", "Illinois"],
["774", "Massachusetts"],
["775", "Nevada"],
["778", "British Columbia, Canada"],
["780", "Alberta, Canada"],
["781", "Massachusetts"],
["784", "St. Vincent &amp; Gren."],
["785", "Kansas"],
["786", "Florida"],
["787", "Puerto Rico"],
["801", "Utah"],
["802", "Vermont"],
["803", "South Carolina"],
["804", "Virginia"],
["805", "California"],
["806", "Texas"],
["807", "Ontario, Canada"],
["808", "Hawaii"],
["809", "Dominican Republic"],
["810", "Michigan"],
["812", "Indiana"],
["813", "Florida"],
["814", "Pennsylvania"],
["815", "Illinois"],
["816", "Missouri"],
["817", "Texas"],
["818", "California"],
["819", "Quebec, Canada"],
["828", "North Carolina"],
["830", "Texas"],
["831", "California"],
["832", "Texas"],
["835", "Pennsylvania"],
["843", "South Carolina"],
["845", "New York"],
["847", "Illinois"],
["848", "New Jersey"],
["850", "Florida"],
["856", "New Jersey"],
["857", "Massachusetts"],
["858", "California"],
["859", "Kentucky"],
["860", "Connecticut"],
["862", "New Jersey"],
["863", "Florida"],
["864", "South Carolina"],
["865", "Tennessee"],
["867", "Yukon, NW Territories, Canada"],
["868", "Trinidad and Tobago"],
["869", "St. Kitts &amp; Nevis"],
["870", "Arkansas"],
["872", "Illinois"],
["876", "Jamaica"],
["878", "Pennsylvania"],
["901", "Tennessee"],
["902", "Nova Scotia, Canada"],
["903", "Texas"],
["904", "Florida"],
["905", "Ontario, Canada"],
["906", "Michigan"],
["907", "Alaska"],
["908", "New Jersey"],
["909", "California"],
["910", "North Carolina"],
["912", "Georgia"],
["913", "Kansas"],
["914", "New York"],
["915", "Texas"],
["916", "California"],
["917", "New York"],
["918", "Oklahoma"],
["919", "North Carolina"],
["920", "Wisconsin"],
["925", "California"],
["928", "Arizona"],
["931", "Tennessee"],
["936", "Texas"],
["937", "Ohio"],
["939", "Puerto Rico"],
["940", "Texas"],
["941", "Florida"],
["947", "Michigan"],
["949", "California"],
["952", "Minnesota"],
["954", "Florida"],
["956", "Texas"],
["959", "Connecticut"],
["970", "Colorado"],
["971", "Oregon"],
["972", "Texas"],
["973", "New Jersey"],
["975", "Missouri"],
["978", "Massachusetts"],
["979", "Texas"],
["980", "North Carolina"],
["984", "North Carolina"],
["985", "Louisiana"],
["989", "Michigan"]
];
</script>
<!-- In-memory JS array ends-->
<script type="text/javascript">
YAHOO.example.ACJSArray = new function() {
// Instantiate first JS Array DataSource
this.oACDS = new YAHOO.widget.DS_JSArray(YAHOO.example.statesArray);
// Instantiate first AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp.typeAhead = true;
this.oAutoComp.useShadow = true;
this.oAutoComp.minQueryLength = 0;
this.oAutoComp.textboxFocusEvent.subscribe(function(){
var sInputValue = YAHOO.util.Dom.get('statesinput').value;
if(sInputValue.length === 0) {
var oSelf = this;
setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
}
});
// Instantiate second JS Array DataSource
this.oACDS2 = new YAHOO.widget.DS_JSArray(YAHOO.example.areacodesArray);
// Instantiate second AutoComplete
this.oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', this.oACDS2);
this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp2.typeAhead = true;
this.oAutoComp2.useShadow = true;
this.oAutoComp2.forceSelection = true;
this.oAutoComp2.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

761
www/extras/yui/examples/autocomplete/ac_states_jsarray_log.html Normal file
View file

File diff suppressed because one or more lines are too long

313
www/extras/yui/examples/autocomplete/ac_states_jsfunction.html Normal file
View file

File diff suppressed because one or more lines are too long

117
www/extras/yui/examples/autocomplete/ac_states_jsfunction_clean.html Normal file
View file

@ -0,0 +1,117 @@
<!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>Query a JavaScript Function for In-memory 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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for scrolling container */
#statesautocomplete {
width:15em; /* set width of widget here*/
height:12em; /* define height for container to appear inline */
}
#statescontainer .yui-ac-content {
max-height:11em;overflow:auto;overflow-x:hidden; /* scrolling */
_height:11em; /* ie6 */
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Query a JavaScript Function for In-memory Data</h1>
<div class="exampleIntro">
<p>This example uses a DS_JSFunction DataSource pointing to a JavaScript function
that returns data as an array of strings. Since the data for this example is
already loaded into memory, queries should be very fast to return data,
and since there is no server load concern, the AutoComplete instance can be
configured to have a query delay of zero seconds.</p>
<p>In this example, the AutoComplete instance is able to keep its container
always open by customizing the appropriate CSS styles and enabling the
<code>alwaysShowContainer</code> property. We hook into the custom events
<code>containerExpandEvent</code> and <code>containerCollapseEvent</code>
and calling the <code>setHeader()</code>, <code>setBody()</code>, and
<code>setFooter()</code> methods to dynamically update the contents of the open
container. Finally, the AutoComplete's <code>formatResults()</code> method
has been customized to display multiple data fields in the container.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3>Filter the US states:</h3>
<div id="statesautocomplete">
<input id="statesinput" type="text">
<div id="statescontainer"></div>
</div>
<!-- In-memory JS dataset begins-->
<script type="text/javascript" src="assets/js/states_jsfunction.js"></script>
<!-- In-memory JS dataset ends-->
<script type="text/javascript">
YAHOO.example.ACJSFunction = new function(){
// Instantiate JS Function DataSource
this.oACDS = new YAHOO.widget.DS_JSFunction(getStates);
this.oACDS.maxCacheEntries = 0;
// Instantiate AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', this.oACDS);
this.oAutoComp.alwaysShowContainer = true;
this.oAutoComp.minQueryLength = 0;
this.oAutoComp.maxResultsDisplayed = 50;
this.oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
return (sMarkup);
};
// Show custom message if no results found
this.myOnDataReturn = function(sType, aArgs) {
var oAutoComp = aArgs[0];
var sQuery = aArgs[1];
var aResults = aArgs[2];
if(aResults.length == 0) {
oAutoComp.setBody("<div id=\"statescontainerdefault\">No matching results</div>");
}
};
this.oAutoComp.dataReturnEvent.subscribe(this.myOnDataReturn);
// Preload content in the container
this.oAutoComp.sendQuery("");
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

317
www/extras/yui/examples/autocomplete/ac_states_jsfunction_log.html Normal file
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,137 @@
<!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>Use AutoComplete to access flat-file data from a web service</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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for multiple stacked instances with custom formatting */
#example0 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
#example1 { 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*/
.autocomplete .yui-ac-highlight .sample-quantity,
.autocomplete .yui-ac-highlight .sample-result,
.autocomplete .yui-ac-highlight .sample-query { color:#FFF; }
.autocomplete .sample-quantity { float:right; } /* push right */
.autocomplete .sample-result { color:#A4A4A4; }
.autocomplete .sample-query { color:#000; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Use AutoComplete to access flat-file data from a web service</h1>
<div class="exampleIntro">
<p>This example's XHR DataSource instance points to a custom PHP script that
returns data from tab-delimited text file. For maximum cache performance, the
DataSource property <code>queryMatchSubset</code> has been enabled, and the cache
itself has been turned up to 60 entries for fewer round trips to the server.</p>
<p>On this page there are three separate AutoComplete instances that all
point to a single DataSource, which further maximizes cache efficiency.
Queries can be delimited using the semi-colon (;) character. For
demonstration purposes, each instance decreases the query delay slightly,
and each instance formats the return data in the container with slightly
different markup.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="autocomplete_examples">
<p><strong>Note:</strong> The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return &mdash; if you type a full, highly-specifc phrase (such as your name) you'll probably get no results from the small dataset.</p>
<h2>Sample Search (1 sec query delay):</h2>
<div id="example0" class="autocomplete">
<input id="ysearchinput0" type="text">
<div id="ysearchcontainer0"></div>
</div>
<h2>Sample Search (0.2 sec query delay):</h2>
<div id="example1" class="autocomplete">
<input id="ysearchinput1" type="text">
<div id="ysearchcontainer1"></div>
</div>
<h2>Sample Search (0 sec query delay):</h2>
<div id="example2" class="autocomplete">
<input id="ysearchinput2" type="text">
<div id="ysearchcontainer2"></div>
</div>
</div>
<script type="text/javascript">
YAHOO.example.ACFlatData = new function(){
// Define a custom formatter function
this.fnCustomFormatter = function(oResultItem, sQuery) {
var sKey = oResultItem[0];
var nQuantity = oResultItem[1];
var sKeyQuery = sKey.substr(0, sQuery.length);
var sKeyRemainder = sKey.substr(sQuery.length);
var aMarkup = ["<div class='sample-result'><div class='sample-quantity'>",
nQuantity,
"</div><span class='sample-query'>",
sKeyQuery,
"</span>",
sKeyRemainder,
"</div>"];
return (aMarkup.join(""));
};
// Instantiate one XHR DataSource and define schema as an array:
// ["Record Delimiter",
// "Field Delimiter"]
this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_flat.php", ["\n", "\t"]);
this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
this.oACDS.maxCacheEntries = 60;
this.oACDS.queryMatchSubset = true;
// Instantiate first AutoComplete
var myInput = document.getElementById('ysearchinput0');
var myContainer = document.getElementById('ysearchcontainer0');
this.oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,this.oACDS);
this.oAutoComp0.delimChar = ";";
this.oAutoComp0.queryDelay = 1;
this.oAutoComp0.formatResult = this.fnCustomFormatter;
// Instantiate second AutoComplete
this.oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', this.oACDS);
this.oAutoComp1.delimChar = ";";
this.oAutoComp1.formatResult = this.fnCustomFormatter;
// Instantiate third AutoComplete
this.oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', this.oACDS);
this.oAutoComp2.queryDelay = 0;
this.oAutoComp2.delimChar = ";";
this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp2.formatResult = this.fnCustomFormatter;
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,107 @@
<!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>Use AutoComplete to access the Yahoo! Search JSON API</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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for centered example */
body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */
#ysearch { text-align:center; }
#ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */
#ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Use AutoComplete to access the Yahoo! Search JSON API</h1>
<div class="exampleIntro">
<p>This example's DataSource instance points to Yahoo! Search Web Services,
which returns JSON data via a simple PHP proxy. The DataSource schema will
parse the return data for fields named "Title", "Summary", and "Cache". In order
for the Yahoo! Search application to return
valid data, the DataSource property <code>scriptQueryAppend</code> is used
to pass along all the required query parameters, and the property
<code>queryMatchContains</code> has been enabled.</p>
<p>To achieve the shrink-wrapped, centered search module, custom CSS rules have
been applied, and the method <code>doBeforeExpandContainer</code> has been
customized to position the container directly below the input field.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACJson.validateForm();">
<div id="ysearch">
<label>Yahoo! Search: </label>
<input id="ysearchinput" type="text" name="p">
<input id="ysearchsubmit" type="submit" value="Submit Query">
<div id="ysearchcontainer"></div>
</div>
</form>
<script type="text/javascript">
YAHOO.example.ACJson = new function(){
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_proxy.php", ["ResultSet.Result","Title"]);
this.oACDS.queryMatchContains = true;
this.oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
// Instantiate AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
this.oAutoComp.useShadow = true;
this.oAutoComp.formatResult = function(oResultItem, sQuery) {
return oResultItem[1].Title + " (" + oResultItem[1].Url + ")";
};
this.oAutoComp.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;
};
// Stub for form validation
this.validateForm = function() {
// Validation code goes here
return true;
};
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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

File diff suppressed because one or more lines are too long

232
www/extras/yui/examples/autocomplete/ac_ysearch_xml.html Normal file
View file

File diff suppressed because one or more lines are too long

87
www/extras/yui/examples/autocomplete/ac_ysearch_xml_clean.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Use AutoComplete to access the Yahoo! Search XML API</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/autocomplete/autocomplete-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#ysearchautocomplete { margin-bottom:2em;width:25em; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Use AutoComplete to access the Yahoo! Search XML API</h1>
<div class="exampleIntro">
<p>This DataSource instance points to Yahoo! Search Web Services via a
simple PHP proxy. The DataSource schema is defined for XML data. In order
to be compatible with the Yahoo! Search application, the DataSource property
<code>queryMatchContains</code> is enabled, and the <code>scriptQueryAppend</code>
has been defined to pass in additional arguments.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACXml.validateForm();">
<h3>Yahoo! Search:</h3>
<div id="ysearchautocomplete">
<input id="ysearchinput" type="text" name="p">
<div id="ysearchcontainer"></div>
</div>
</form>
<script type="text/javascript">
YAHOO.example.ACXml = new function(){
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_proxy.php", ["Result", "Title"]);
this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
this.oACDS.queryMatchContains = true;
this.oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
// Instantiate AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
// Stub for AutoComplete form validation
this.validateForm = function() {
// Validation code goes here
return true;
};
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

236
www/extras/yui/examples/autocomplete/ac_ysearch_xml_log.html Normal file
View file

File diff suppressed because one or more lines are too long

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

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

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

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

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

File diff suppressed because it is too large Load diff

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 974 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 892 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 176 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 101 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 141 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 612 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 175 B

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,126 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-examples div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#button-examples h2 {
border: none;
margin: 0 0 .5em 0;
padding: 0;
}
#linkbutton2 a,
#linkbutton5 a {
background: url(../button/assets/yahoo.gif) center center no-repeat;
text-indent: -5em;
overflow: hidden;
padding: 0 1em;
*margin-left: 5em; /* IE only */
_padding: 0 2em; /* IE < 7 only */
}
#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>

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

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

352
www/extras/yui/examples/button/btn_example04_log.html Normal file
View file

File diff suppressed because one or more lines are too long

334
www/extras/yui/examples/button/btn_example05.html Normal file
View file

File diff suppressed because one or more lines are too long

172
www/extras/yui/examples/button/btn_example05_clean.html Normal file
View file

@ -0,0 +1,172 @@
<!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>Submit Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-example-form fieldset,
#button-example-form fieldset div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Submit Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Button that functions like an HTML submit button (<code>&#60;input type="submit"/&#62;</code> and <code>&#60;button type="submit"/&#62;</code>).</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "submitbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("submitbuttonsfrommarkup", function () {
// Create a Button using an existing <input> element as a data source
var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1", { value: "submitbutton1value" });
// Create a Button using an existing <button> element as a data source
var oSubmitButton2 = new YAHOO.widget.Button("submitbutton2");
// Create a Button using the YUI Button markup
var oSubmitButton3 = new YAHOO.widget.Button("submitbutton3", { value: "submitbutton3value" });
var oSubmitButton4 = new YAHOO.widget.Button("submitbutton4", { type: "submit", value: "submitbutton4value" });
});
// Create a Button without using existing markup
var oSubmitButton5 = new YAHOO.widget.Button({ type: "submit", label: "Submit Form", id: "submitbutton5", name: "submitbutton5", value: "submitbutton5value", container: "submitbuttonsfromjavascript" });
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
} ();
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset>
<legend>Info</legend>
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
<label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<div>
<label for="male">Gender: </label>
<label for="male">Male </label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="female">Female </label>
<input type="radio" id="female" name="gender" value="female">
</div>
<div>
<label for="month">Birthday: </label>
<select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
<select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
<input type="text" name="year" value="">
</div>
</fieldset>
<fieldset id="submitbuttons">
<legend>Submit Buttons</legend>
<fieldset id="submitbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<input id="submitbutton1" type="submit" name="submitfield1" value="Submit Form">
<button id="submitbutton2" type="submit" name="submitfield2" value="submitfield2value">Submit Form</button>
</div>
<div>
<span id="submitbutton3" class="yui-button yui-submit-button"><span class="first-child"><input type="submit" name="submitfield3" value="Submit Form"></span></span>
<span id="submitbutton4" class="yui-button yui-submit-button"><span class="first-child"><button type="button" name="submitfield4">Submit Form</button></span></span>
</div>
</fieldset>
<fieldset id="submitbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

338
www/extras/yui/examples/button/btn_example05_log.html Normal file
View file

File diff suppressed because one or more lines are too long

301
www/extras/yui/examples/button/btn_example06.html Normal file
View file

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,142 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Reset Buttons</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#button-example-form fieldset,
#button-example-form fieldset div {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Reset Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Button that functions like an HTML reset button (<code>&#60;input type="reset"/&#62;</code> and <code>&#60;button type="reset"/&#62;</code>).</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "resetbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("resetbuttonsfrommarkup", function () {
// Create a Button using an existing <input> element as a data source
var oResetButton1 = new YAHOO.widget.Button("resetbutton1");
// Create a Button using an existing <button> element as a data source
var oResetButton2 = new YAHOO.widget.Button("resetbutton2");
// Create a Button using the YUI Button markup
var oResetButton3 = new YAHOO.widget.Button("resetbutton3");
var oResetButton4 = new YAHOO.widget.Button("resetbutton4", { type: "reset" });
});
// Create a Button without using existing markup
var oResetButton5 = new YAHOO.widget.Button({ type: "reset", label: "Reset Form", id: "resetfield5", container: "resetbuttonsfromjavascript" });
} ();
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset>
<legend>Info</legend>
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
<label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
<div>
<label for="male">Gender: </label>
<label for="male">Male </label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="female">Female </label>
<input type="radio" id="female" name="gender" value="female">
</div>
<div>
<label for="month">Birthday: </label>
<select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
<select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
<input type="text" name="year" value="">
</div>
</fieldset>
<fieldset id="resetbuttons">
<legend>Reset Buttons</legend>
<fieldset id="resetbuttonsfrommarkup">
<legend>From Markup</legend>
<div>
<input id="resetbutton1" type="reset" name="resetfield1" value="Reset Form">
<button id="resetbutton2" type="reset" name="resetfield2">Reset Form</button>
</div>
<div>
<span id="resetbutton3" class="yui-button yui-reset-button"><span class="first-child"><input type="reset" name="resetfield3" value="Reset Form"></span></span>
<span id="resetbutton4" class="yui-button yui-reset-button"><span class="first-child"><button type="button" name="resetfield4">Reset Form</button></span></span>
</div>
</fieldset>
<fieldset id="resetbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

305
www/extras/yui/examples/button/btn_example06_log.html Normal file
View file

File diff suppressed because one or more lines are too long

462
www/extras/yui/examples/button/btn_example07.html Normal file
View file

File diff suppressed because one or more lines are too long

234
www/extras/yui/examples/button/btn_example07_clean.html Normal file
View file

@ -0,0 +1,234 @@
<!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>Menu 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/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#menubutton3menu,
#menubutton5menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Menu Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Menu Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
// Create a Button using an existing <input> element as a data source
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menu", menu: "menubutton1select" });
var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menu", menu: "menubutton2select" });
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
var oMenuButton3 = new YAHOO.widget.Button("menubutton3", { type: "menu", menu: "menubutton3menu" });
});
// "click" event handler for each item in the Button's menu
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
oMenuButton4.set("label", p_oItem.cfg.getProperty("text"));
}
// Create a Button without using existing markup
// Create an array of YAHOO.widget.MenuItem configuration properties
var aMenuButton4Menu = [
{ text: "one", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "three", value: 3, onclick: { fn: onMenuItemClick } }
];
/*
Instantiate a Menu Button using the array of YAHOO.widget.MenuItem
configuration properties as the value for the "menu" configuration
attribute.
*/
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu", label: "one", name: "mymenubutton", menu: aMenuButton4Menu, container: "menubuttonsfromjavascript" });
/*
Search for an element to place the Menu Button into via the
Event utilities "onContentReady" method
*/
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
// Instantiate an Overlay instance
var oOverlay = new YAHOO.widget.Overlay("menubutton5menu", { visible: false });
oOverlay.setBody("Menu Button 5 Menu");
// Instantiate a Menu Button
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu", label: "Menu Button 5", menu: oOverlay });
/*
Append the Menu Button and Overlay to the element with the id
of "menubuttonsfromjavascript"
*/
oMenuButton5.appendTo(this);
oOverlay.render(this);
});
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
} ();
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="menubuttons">
<legend>Menu Buttons</legend>
<fieldset id="menubuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="menubutton1" name="menubutton1_button" value="Menu Button 1">
<select id="menubutton1select" name="menubutton1select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton2" name="menubutton2_button" value="Menu Button 2">
<select id="menubutton2select" name="menubutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton3" name="menubutton3_button" value="Menu Button 3">
<div id="menubutton3menu" class="yui-overlay">
<div class="bd">Menu Button 3 Menu</div>
</div>
</fieldset>
<fieldset id="menubuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

466
www/extras/yui/examples/button/btn_example07_log.html Normal file
View file

File diff suppressed because one or more lines are too long

438
www/extras/yui/examples/button/btn_example08.html Normal file
View file

File diff suppressed because one or more lines are too long

222
www/extras/yui/examples/button/btn_example08_clean.html Normal file
View file

@ -0,0 +1,222 @@
<!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>Split 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/menu/assets/skins/sam/menu.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/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#splitbutton3menu,
#splitbutton5menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Split Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create a Split Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.example.init = function () {
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
// Create a Button using an existing <input> element as a data source
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select" });
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
});
// Create a Button without using existing markup
// Create an array of YAHOO.widget.MenuItem configuration properties
var aSplitButton4Menu = [
{ text: "one", value: 1 },
{ text: "two", value: 2 },
{ text: "three", value: 3 }
];
/*
Instantiate a Split Button using the array of YAHOO.widget.MenuItem
configuration properties as the value for the "menu" configuration
attribute.
*/
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", name: "splitbutton3", menu: aSplitButton4Menu, container: "splitbuttonsfromjavascript" });
/*
Search for an element to place the Split Button into via the
Event utilities "onContentReady" method
*/
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
// Instantiate an Overlay instance
var oOverlay = new YAHOO.widget.Overlay("splitbutton5menu", { visible: false });
oOverlay.setBody("Split Button 5 Menu");
// Instantiate a Split Button
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", menu: oOverlay });
/*
Append the Split Button and Overlay to the element with the id
of "splitbuttonsfromjavascript"
*/
oSplitButton5.appendTo(this);
oOverlay.render(this);
});
function onExampleSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
}
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
} ();
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="splitbuttons">
<legend>Split Buttons</legend>
<fieldset id="splitbuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="splitbutton1" name="splitbutton1_button" value="Split Button 1">
<select id="splitbutton1select" name="splitbutton1select" multiple>
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton2" name="splitbutton2_button" value="Split Button 2">
<select id="splitbutton2select" name="splitbutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton3" name="splitbutton3_button" value="Split Button 3">
<div id="splitbutton3menu" class="yui-overlay">
<div class="bd">Split Button 3 Menu</div>
</div>
</fieldset>
<fieldset id="splitbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

442
www/extras/yui/examples/button/btn_example08_log.html Normal file
View file

File diff suppressed because one or more lines are too long

483
www/extras/yui/examples/button/btn_example09.html Normal file
View file

File diff suppressed because one or more lines are too long

252
www/extras/yui/examples/button/btn_example09_clean.html Normal file
View file

@ -0,0 +1,252 @@
<!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>Calendar Menu Button</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/calendar/assets/skins/sam/calendar.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/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Restore default padding of 10px for the calendar containtainer
that is overridden by the ".example-container .bd .bd" rule
in yui.css.
*/
#calendarcontainer {
padding:10px;
}
#calendarmenu {
position: absolute;
}
#calendarpicker button {
background: url(../button/assets/calendar_icon.gif) center center no-repeat;
text-align: left;
text-indent: -10em;
overflow: hidden;
*margin-left: 10em; /* For IE */
*padding: 0 3em; /* For IE */
white-space: nowrap;
}
#month-field,
#day-field {
width: 2em;
}
#year-field {
width: 3em;
}
#datefields {
border: solid 1px #666;
padding: .5em;
}
#calendarpicker {
vertical-align: baseline;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Calendar Menu Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
function onButtonClick() {
/*
Create an empty body element for the Overlay instance in order
to reserve space to render the Calendar instance into.
*/
oCalendarMenu.setBody("&#32;");
oCalendarMenu.body.id = "calendarcontainer";
// Render the Overlay instance into the Button's parent element
oCalendarMenu.render(this.get("container"));
// Align the Overlay to the Button instance
oCalendarMenu.align();
/*
Create a Calendar instance and render it into the body
element of the Overlay.
*/
var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
oCalendar.render();
/*
Subscribe to the Calendar instance's "changePage" event to
keep the Overlay visible when either the previous or next page
controls are clicked.
*/
oCalendar.changePageEvent.subscribe(function () {
window.setTimeout(function () {
oCalendarMenu.show();
}, 0);
});
/*
Subscribe to the Calendar instance's "select" event to
update the month, day, year form fields when the user
selects a date.
*/
oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
var aDate;
if (p_aArgs) {
aDate = p_aArgs[0][0];
YAHOO.util.Dom.get("month-field").value = aDate[1];
YAHOO.util.Dom.get("day-field").value = aDate[2];
YAHOO.util.Dom.get("year-field").value = aDate[0];
}
oCalendarMenu.hide();
});
/*
Unsubscribe from the "click" event so that this code is
only executed once
*/
this.unsubscribe("click", onButtonClick);
}
// Create an Overlay instance to house the Calendar instance
var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");
// Create a Button instance of type "menu"
var oButton = new YAHOO.widget.Button({
type: "menu",
id: "calendarpicker",
label: "Choose A Date",
menu: oCalendarMenu,
container: "datefields" });
/*
Add a "click" event listener that will render the Overlay, and
instantiate the Calendar the first time the Button instance is
clicked.
*/
oButton.on("click", onButtonClick);
});
</script>
<div>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="datefields">
<legend>Date</legend>
<label for="month-field">Month: </label> <input id="month-field" type="text" name="month">
<label for="day-field">Day:</label> <input id="day-field" type="text" name="day">
<label for="year-field">Year: </label> <input id="year-field" type="text" name="year">
</fieldset>
</form>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

487
www/extras/yui/examples/button/btn_example09_log.html Normal file
View file

File diff suppressed because one or more lines are too long

568
www/extras/yui/examples/button/btn_example10.html Normal file
View file

File diff suppressed because one or more lines are too long

338
www/extras/yui/examples/button/btn_example10_clean.html Normal file
View file

@ -0,0 +1,338 @@
<!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>Calendar Menu Button</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/calendar/assets/skins/sam/calendar.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/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
#calendarmenu {
position: absolute;
}
/*
Restore default padding of 10px for the calendar containtainer
that is overridden by the ".example-container .bd .bd" rule
in yui.css.
*/
#calendarcontainer {
padding:10px;
}
#personalinfo {
border: solid 1px #666;
padding: .5em;
}
#calendarpicker {
vertical-align: baseline;
}
div.field {
padding: .25em;
}
input#year {
width: 4em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Calendar Menu Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu Button whose Menu displays a
Calendar. Selecting a date from the Calendar updates the label of the Button
to reflect the currently selected date.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.util.Event.onContentReady("datefields", function () {
function onButtonClick() {
/*
Create an empty body element for the Overlay instance in order
to reserve space to render the Calendar instance into.
*/
oCalendarMenu.setBody("&#32;");
oCalendarMenu.body.id = "calendarcontainer";
// Render the Overlay instance into the Button's parent element
oCalendarMenu.render(this.get("container"));
// Align the Overlay to the Button instance
oCalendarMenu.align();
/*
Create a Calendar instance and render it into the body
element of the Overlay.
*/
var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
oCalendar.render();
/*
Subscribe to the Calendar instance's "changePage" event to
keep the Overlay visible when either the previous or next page
controls are clicked.
*/
oCalendar.changePageEvent.subscribe(function () {
window.setTimeout(function () {
oCalendarMenu.show();
}, 0);
});
/*
Subscribe to the Calendar instance's "select" event to
update the Button instance's label when the user
selects a date.
*/
oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
var aDate,
nMonth,
nDay,
nYear;
if (p_aArgs) {
aDate = p_aArgs[0][0];
nMonth = aDate[1];
nDay = aDate[2];
nYear = aDate[0];
oButton.set("label", (nMonth + "/" + nDay + "/" + nYear));
// Sync the Calendar instance's selected date with the date form fields
YAHOO.util.Dom.get("month").selectedIndex = (nMonth - 1);
YAHOO.util.Dom.get("day").selectedIndex = (nDay - 1);
YAHOO.util.Dom.get("year").value = nYear;
}
oCalendarMenu.hide();
});
/*
Unsubscribe from the "click" event so that this code is
only executed once
*/
this.unsubscribe("click", onButtonClick);
}
var oDateFields = YAHOO.util.Dom.get("datefields");
oMonthField = YAHOO.util.Dom.get("month"),
oDayField = YAHOO.util.Dom.get("day"),
oYearField = YAHOO.util.Dom.get("year");
/*
Hide the form fields used for the date so that they can be replaced by the
calendar button.
*/
oMonthField.style.display = "none";
oDayField.style.display = "none";
oYearField.style.display = "none";
// Create a Overlay instance to house the Calendar instance
var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");
// Create a Button instance of type "menu"
var oButton = new YAHOO.widget.Button({
type: "menu",
id: "calendarpicker",
label: "Choose A Date",
menu: oCalendarMenu,
container: oDateFields });
/*
Add a listener for the "click" event. This listener will be
used to defer the creation the Calendar instance until the
first time the Button's Overlay instance is requested to be displayed
by the user.
*/
oButton.on("click", onButtonClick);
});
</script>
<form id="button-example-form" name="button-example-form" method="post" action="#">
<fieldset id="personalinfo">
<legend>Personal Information</legend>
<div class="field">
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname" value="">
</div>
<div class="field">
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname" value="">
</div>
<div class="field" id="datefields">
<label for="month">Birthday: </label>
<select id="month" name="month">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="day" name="day">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<input type="text" id="year" name="year" value="">
</div>
<div class="field">
<input type="submit" id="submit-button" name="submit-button" value="Submit Form">
</div>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

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