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/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)); });
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 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);