1.1 Boolean Control

If you have a boolean two-state control, triggered by a control element, such as an anchor or button, you often want to change the text of the control element based on the a/b state it is in. The control element should contain two vars, with the text of each state and classes is-state-a or is-state-b.

State AState B
                Y.one('#js-state-toggle').on('click', function(e) {
                  var el = e.target.ancestor('a', true);
                  e.halt();

                  if (el.hasClass('is-state-a')) {
                    el.replaceClass('is-state-a', 'is-state-b');
                  }
                  else {
                    el.replaceClass('is-state-b', 'is-state-a');
                  }
                });
            

1.2 JavaScript Command Classes

There are many simple behaviors that should be available on all site pages, such as toggles. Rather than repeatedly define this reusable behavior in JavaScript, special Command Classes can be attached to elements in the markup, which will automatically attach behavior.

All Command Classes should be in the form of js-cmd-commandName[arg1,arg2,…,kw1=val1,kw2=val2,…], where the commandName will be registered in the JavaScript and the arguments and key word arguments depend on each command implmentation. For example a tab command might require a single argument, which is a selector to find the related container.

It is important to remember that classes cannot have spaces in them, so be aware when using arguments and kwargs for Command Classes.


                    Test Command
                
                // register a new command class
                MSJS.Dispatcher.register('test', function (el, e, args, kwargs) {
                  alert('Test Command with args=' + args.join(',') + ', kwargs=' + kwargs);
                });
            

1.3 Toggle Control

The Toggle Control is an extension of the Boolean Control that can show/hide a container element. It uses a JavaScript Command Class, so it is automatically available on every page. It requires a selector as the first argument, and has several properties for fine tuning, but the anim kwarg is the most frequently use, which can be set to fade or scroll.

No Animation ClosedNo Animation Opened

This content was toggled open without an animation.

Fade Animation ClosedFade Animation Opened

This content was toggled open with a fade animation.

Scroll Animation ClosedScroll Animation Opened

This content was toggled open with a scroll animation.

No Animation ClosedNo Animation Opened

This content was toggled open without an animation.

Fade Animation ClosedFade Animation Opened

This content was toggled open with a fade animation.

Scroll Animation ClosedScroll Animation Opened

This content was toggled open with a scroll animation.

1.4 Tooltips

Any element with a title can be made into a tooltip by applying the YUI tiptip plugin.

I am an element with just an HTML title.
I am an element with a TipTip tooltip, instead of a title.
Test element.
                YUI($YUI).use('yui.tiptip.plugin', function(Y) {
                    Y.all('#js-tooltip-test').tooltip();
                });