The lazr.base
module is home to the lazr.ui
namespace. lazr.ui
provides HTML templates for common UI elements.
The common usage:
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></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:
var LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, }; YUI(LAZR_YUI_CONFIG).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)); });
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');
lazr.ui
provides a way to disable the tabindex attribute
from a focused widget.
The tabindex can be disabled by augmenting a Widget with the
disableTabIndex
function. If you need to revert the
behavior in certain instances, you can call my_widget.set('tabIndex', new_value)
before syncUI() is called. If you need to revert the behavior
in subclasses, you can set the WidgetSubclass.ATTRS['tabIndex'].
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.
Y.lazr.ui.disableTabIndex(MyWidget);