YUI 2

  • Posted on: 10 July 2010
  • By: brovko
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).
Tags: