The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 2 more by this user. Created: 06/11/10
Last CDN Push: 09/22/10
Build Tag: gallery-2010.09.22-20-15
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.
This module extends YUI3's Node by adding a setDirection method to every YUI node. By calling the method, the node's bidi direction would be explicitly set to the specified direction, setting both the HTML "dir" attribute and the CSS "direction" property.
Additionally, the node would be decorated with a class named "yui3-rtl" or "yui3-ltr" based on its direction. This will help in browsers like IE 6 that do not support CSS attribute selectors, so stylesheets would be able to use E.yui3-rtl instead of E[dir="rtl"].
Finally, an event called "directionChange" will be fired whenever a node changes direction (from LTR to RTL or vice versa). The event would have two properties, "target" that carries the node reference, and "dir" which will have its new direction.
The following code sets two buttons to change direction of the text to RTL and LTR, and shows an alert box whenever an actual change happens.
<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.09.22-20-15'
}).use("gallery-node-setdir", "node-base", "node-style", function(Y) {
var rtlButton = Y.Node.create("<button type='button'>Set to RTL</button>");
var ltrButton = Y.Node.create("<button type='button'>Set to LTR</button>");
var input = Y.Node.create("<div style='width: 20%; border: solid'>A > \u05D0</div>");
Y.one("body").append(rtlButton).append(ltrButton).append(input);
rtlButton.on("click", function(){input.setDirection("rtl")});
ltrButton.on("click", function(){input.setDirection("ltr")});
Y.on("directionChange", function(e){
alert("Direction changed to "+e.dir+".");
});
});
All code on this site is licensed under the BSD License unless stated otherwise.