-<!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>
projects / eow / blobdiff