Fork me on GitHub

Example: Adding icons to a widget

This example demonstrates how to create an Adding icons to a widget.

HTML

<div style="position: relative; width: 300px; height: 200px;" id="layer"></div>


<style>

/* Standard Module Widget CSS */
.yui3-my-widget-hidden {
    display:none;
}

.yui3-my-widget {
    margin:10px;
}

.yui3-my-widget-content {
    padding:3px;
    border:1px solid #666;
}

.yui3-my-widget-content .yui3-widget-hd {
    padding:5px;
    border:2px solid #aa0000;
    background-color:#fff;
    overflow:auto;
}

.yui3-my-widget-content .yui3-widget-bd {
    padding:5px;
    border:2px solid #0000aa;
    background-color:#fff;
    overflow:auto;
}

.yui3-my-widget-content .yui3-widget-ft {
    padding:5px;
    border:2px solid #00aa00;
    background-color:#fff;
    overflow:auto;
}

.yui3-my-widget-icon {
    float: right;
}

</style>

JavaScript

Implementation

YUI().use('widget', 'widget-stdmod', 'widget-icons', function(Y) {

    Y.MyWidget = Y.Base.create("my-widget", Y.Widget, [Y.WidgetStdMod, Y.WidgetIcons], {

        _onCloseClick: function () {
            this.destroy();
        }

    }, {

        ATTRS: {
    
            icons: {
                value: [
                    {title: 'close', click: '_onCloseClick', className: 'ui-silk ui-silk-cancel', selector: '.yui3-widget-hd' }
                ]
            }
        }
    });


    new Y.MyWidget({
        render: '#layer',
        headerContent: 'Hello world',
        bodyContent: 'Body Here...',
        footerContent: 'copyright...'
    });


});