YUI 2
My first experience with YUI I've started from the developer site. Documentation and samples YUI (current version - 2.8), this site has informative RSS. Widgets which I use frequently are: "Button", "Container", "DataTable", "TabView", and in some projects I use "TreeView". Useful non-visual YUI-components: "Connection Manager", "Element", "DataSource", "Paginator".
"Button" sample:
<!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 Button</title>
<!-- YUI loader -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader.js"></script>
</head>
<body class="yui-skin-sam">
<input id="btnCommit" type="button" value="Commit Info" />
<script>
<!--
var indCurModule = 0;
var loader = new YAHOO.util.YUILoader();
loader.filter = 'MIN';
loader.insert
(
{
require:
[
"button"
]
, base: 'http://yui.yahooapis.com/2.8.0r4/build/'
// Configure the Get utility to timeout after 100 seconds for any given node insert
, timeout: 100000
, onSuccess: function(loader)
{
(function ()
{
var btnCommit = new YAHOO.widget.Button("btnCommit", { label: "Commit Info" });
btnCommit.on
(
"click"
, function ()
{
alert('Button Clicked');
}
);
}
)();
}
, onFailure: function(err)
{
alert('Unable load module: ' + err['module']);
}
, onTimeout: function(err)
{
alert('Timeout reached: ' + err['module']);
}
, onProgress: function(state)
{
var countModules = 0;
for (var m in this.required)
{
++countModules;
}
++indCurModule;
var percent = parseInt(indCurModule * 100 / countModules);
if (percent > 100)
{
percent = 100;
}
var status = document.getElementById('status');
//alert('load module:' + YAHOO.lang.dump(state['name']));
}
}
);
-->
</script>
</body>
</html>
http://developer.yahoo.com/yui/button/#buildingfromdatasource - this link contains information how to create "Button" with HTML (and other methods).