YUI 2
Знакомство с библиотекой YUI я начал с сайта для разработчиков. Документация и примеры YUI (современная версия - 2.8), а также познавательная RSS-лента. Наиболее часто я использую такие widget-ы как "Button", "Container", "DataTable", "TabView", а в некоторых проектах "TreeView". Также я использую YUI-компоненты: "Connection Manager", "Element", "DataSource", "Paginator".
Вот пример использования "Button":
<!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 - по этой ссылке находится информация каким образом возможно создать "Button" при помощи HTML-разметки (в том числе есть и другие варианты).