topical media & game development
lib-present-course-webtechnology-assignments-datatable.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>WT - YUI Datatable example</title>
<link href="lib-present-course-webtechnology-style-note.css"
rel="stylesheet" type="text/css" />
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.4.1/build/datatable/assets/skins/sam/datatable.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/datasource/datasource-beta-min.js"></script>
<!-- Source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/datatable/datatable-beta-min.js"></script>
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/slider/slider-min.js" ></script>
<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/colorpicker/colorpicker-beta-min.js" ></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function map_initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var VU = new GLatLng(52.334,4.864);
var zoom = 14;
map.setCenter(VU, zoom);
VUmarker = new GMarker(VU);
map.addOverlay(VUmarker);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
GEvent.addListener(VUmarker, "click", function() {
VUmarker.openInfoWindowHtml("Web Technology at VU University Amsterdam.");
});
}
}
</script>
</head>
<body class="yui-skin-sam" onload="map_initialize()" onunload="GUnload()">
<div id="mypicker" style="float: left; height:200px;"></div>
<div id="map_canvas" style="float: right; width: 500px; height: 500px"></div>
<div id="mytable" style="clear:both; padding: 2%;">
<table id="tablesrc" border="1">
<thead>
<tr>
<th>Category</th>
<th>CSSFeature</th>
</tr>
</thead>
<tbody>
<tr>
<td>Margins</td>
<td>
<code>margin-top</code>,
<code>margin-bottom</code>,
<code>margin-left</code>,
<code>margin-right</code>,
<code>margin</code> (shorthand notation)
</td>
</tr>
<tr>
<td>Background</td>
<td>
<code>background-color</code>,
<code>background-image</code>,
<code>background-repeat</code>,
<code>background</code> (shorthand notation)
</td></tr>
<tr>
<td>Border</td>
<td>
<code>border-color</code>,
<code>border-style</code>,
<code>border-spacing</code>,
<code>border-width</code>,
<code>border</code> (shorthand notation)
</td></tr>
<tr>
<td>Text</td>
<td>
<code>text-align</code>,
<code>text-decoration</code>,
<code>text-indent</code>,
<code>text-transform</code>
</td></tr>
<tr>
<td>Foreground color</td>
<td>
<code>color</code>
</td></tr>
<tr>
<td>Fonts</td>
<td><code>font-size</code> (absolute/relative),
<code>font-weight</code>,
<code>font-style</code>,
<code>font-variant</code>,
<code>font-family</code>,
<code>font</code> (shorthand notation)
</td>
</tr>
<tr>
<td>Lists</td>
<td>
<code>list-style-type</code>,
<code>list-style-position</code>,
<code>list-style-image</code>,
<code>list-style (shorthand notation)</code>
</td></tr>
<tr>
<td>Properties for paged media</td>
<td>
<code>page-break-before</code>,
<code>page-break-after</code>,
<code>orphans</code>,
<code>widows</code>
</td></tr>
<tr>
<td>Other</td>
<td>
<code>caption-side</code> (in tables),
<code>float</code> (e.g. for images),
<code>vertical-align</code>
</td>
</tr>
<tr>
<td>Link pseudo-classes</td>
<td>
<code>:link</code>
<code>:visited</code>
<code>:hover</code>,
<code>:active</code>,
<code>:focus</code>,
</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
YAHOO.example.wt= [
{name:"Margins",props:"margin-top"},
{name:"Background", props:"background-color"}
];
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("tablesrc"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [{key:"Category"}, {key:"CSSFeature"}]
};
var myColumnDefs = [
{key:"Category", label:"Type", sortable:true},
{key:"CSSFeature", label:"CSS Property", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("mytable", myColumnDefs, myDataSource, {});
var picker = new YAHOO.widget.ColorPicker("mypicker", {
showcontrols: false,
showwebsafe: false,
showhsvcontrols: true,
showhexcontrols: true
});
//a listener for logging RGB color changes;
//this will only be visible if logger is enabled:
var onRgbChange = function(o) {
/*o is an object
{ newValue: (array of R, G, B values),
prevValue: (array of R, G, B values),
type: "rgbChange"
}
*/
r=o.newValue[0];
g=o.newValue[1];
b=o.newValue[2];
document.body.style.backgroundColor= "rgb("+r+","+g+","+b+")";
}
//subscribe to the rgbChange event;
picker.on("rgbChange", onRgbChange);
function f(event) {
document.body.style.backgroundColor = "black";
}
document.body.addEventListener("click", f, false);
</script>
</body>
</html>
(C) Æliens
20/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
