Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>dijit.focus Test</title><style type="text/css">@import "../../../dojo/resources/dojo.css";@import "../../themes/tundra/tundra.css";@import "../css/dijitTests.css";</style><script type="text/javascript" src="../../../dojo/dojo.js"djConfig="isDebug: true, parseOnLoad: true"></script><script type="text/javascript">dojo.require("dijit.form.DateTextBox");dojo.require("dijit.form.ComboBox");dojo.require("dijit.form.NumberSpinner");dojo.require("dijit.form.Button");dojo.require("dijit.Menu");dojo.require("dijit.layout.ContentPane");var queue=[];var animation;function animateBorderColor(widget, color, startWidth, endWidth){if(animation){queue.push(arguments);return;}with(widget.domNode.style){borderStyle="solid";outlineStyle="solid";}animation = dojo.animateProperty({node: widget.domNode,duration: 400,properties: {// depending on browser and node type, sometimes border or outline is ineffective.// doing both seems to work in all cases though (for at least one of them)borderColor: { end: color },borderWidth: { start: startWidth, end: endWidth },outlineColor: { end: color },outlineWidth: { start: startWidth, end: endWidth }},onEnd: function(){animation=null;if(queue.length){animateBorderColor.apply(null, queue.shift());}}});animation.play();}dojo.addOnLoad(function(){dojo.subscribe("widgetFocus", function(widget){console.log("focused on widget " + (widget?widget:"nothing"));animateBorderColor(widget, "#ff0000", 2, 5);});dojo.subscribe("widgetBlur", function(widget){console.log("blurred widget " + (widget?widget:"nothing"));animateBorderColor(widget, "#0000ff", 5, 2);});dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});});</script><style>div, fieldset, form, input {padding: 10px;margin: 10px;border: 2px solid blue;}</style></head><body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra"><h3>Widget Focus Test</h3><p>This is for testing code to detect onBlur and onFocus on a widget level.<br>Focused widgets' borders will turn red.<br>Also, heck the console log for focus and blur events on widgets.</p><label for="fieldset1">a form ContentPane widget:</label><br><form dojoType="dijit.layout.ContentPane"><label for="first">simple input: </label><input id=first><br><label for="fieldset1">a fieldset ContentPane widget:</label><br><fieldset id=fieldset1 dojoType="dijit.layout.ContentPane"><label for="select">a ComboBox widget:</label><select id=select dojoType="dijit.form.ComboBox"><option>this</option><option>is</option><option>a</option><option>list</option></select><label for="plain">a plain input:</label><input id=plain value=plain></fieldset><br><label for="fieldset1">another fieldset ContentPane:</label><br><fieldset id=fieldset2 dojoType="dijit.layout.ContentPane"><label for="date">a DateTextBox widget:</label><input id=date dojoType="dijit.form.DateTextBox"><br><label for="textarea">a plain textarea:</label><br><textarea id=textarea>hello there!</textarea><br><label for="spinner">a Spinner widget:</label><input id=spinner dojoType="dijit.form.NumberSpinner" value=100><br><label for="button">a Combobutton widget:</label><div id=button dojoType="dijit.form.ComboButton" tabIndex=0><span>push me</span><div id=menu dojoType="dijit.Menu"><div id=mi1 dojoType="dijit.MenuItem">menu item 1</div><div id=mi2 dojoType="dijit.MenuItem">menu item 2</div><div id=popupMenuItem dojoType="dijit.PopupMenuItem"><span>submenu</span><div id=submenu dojoType="dijit.Menu"><div id=smi1 dojoType="dijit.MenuItem">submenu item 1</div><div id=smi2 dojoType="dijit.MenuItem">submenu item 2</div></div></div></div></div></fieldset></form></body></html>