Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Tag (gallery-tag) on cdn

Last Updated: 07/26/12

+ 1 -

Stephen Murphy

YUI Contributor

See 4 more by this user.

Created: 06/20/12
Last CDN Push: 07/25/12
Build Tag: gallery-2012.07.25-21-36
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0
Free for use.

Docs:
http://twobit.github.com/yui3-gallery/gallery-tag/

Slides:
http://twobit.github.com/yui3-gallery/gallery-tag-slides/

YUI Tag allows you to replace code with simple DOM tags. Replace this:



var button = new Y.Button({

    srcNode:'#myPushButton',

    label: 'Test'

}).render();

With this:



<ybutton data-label="Test"></ybutton>

<ybutton data-label="DISABLE" data-disabled="true"></ybutton>

Things just became a whole lot easier to maintain. In essence it allows you to write "smart" tags backed by YUI modules. Registered tags are initialized whether created dynamically or on page load. There is a plugin on each node (tag) with getters and setters.

Relies on gallery-event-inserted for efficient node insertion events. See gallery-tag-registry for a collection of predefined tags.

Inspired by X-Tag:
http://mozilla.github.com/x-tag/

Compatibility: IE9+, FF5+, Chrome 4+, Safari/iOS 4+, Android 2.1+

Tags:
twobit
tag

Code Sample

<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.25-21-36'
}).use('gallery-tag', 'button', function(Y) {
    // Defining a new tag mixin
    Y.Tag.register('ybutton', {
        created: function(config) {
            this.get('host').setHTML('<button></button>');
            this._widget = new Y.Button(Y.merge(config, {
                srcNode: this.get('host').one('button')
            }));
            this.onHostEvent('tag:inserted', function() {this._widget.render();}, this);
        }
    });
});