The lazr.base module

lazr.ui

The lazr.base module is home to the lazr.ui namespace. lazr.ui provides HTML templates for common UI elements.

Don't forget to inlude the CSS files when using the module!

The common usage:

  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
  <script type="text/javascript" src="../../build/lazr/assets/skins/sam/lazr-skin.css"></script>

Here's the markup to create a positive and negative button:

<div id="example">
  <span id="ok"></span>
  <span id="cancel"></span>
</div>

And here's the JavaScript to hook it up:

YUI().use('node', 'lazr.base', function(Y) {

    Y.get('#ok').appendChild(
        Y.Node.create(Y.lazr.ui.OK_BUTTON));

    Y.get('#cancel').appendChild(
        Y.Node.create(Y.lazr.ui.CANCEL_BUTTON));

});

Customizing the button text

The easiest way to customize the button text, so the button plays well with screen readers, is to modify the innerHTML attribute:

var yes_button = Y.Node.create(Y.lazr.ui.OK_BUTTON);

yes_button.set('innerHTML', 'yes');

Removing a Widget's tabindex attribute

lazr.ui provides a way to remove the tabindex attribute from a focused widget.

The attribute can be removed by augmenting a Widget with the NoTabIndex class:

Use this with caution. tabindex is intended as an accessibility feature, for keyboard usability, and visual feedback. If you disable it, be sure to have a really good reason, or a replacement ready.

// We need the 'true' parameter for Y.augment() to force overwriting of the
// existing tabindex-associated methods.

Y.augment(MyWidget, Y.lazr.ui.NoTabIndex, true);