dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
156 lines (138 loc) • 5.16 kB
HTML
<!-- Remove in 2.0, replaced by dijit/tests/focus.html -->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit.focus Test</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../../themes/claro/claro.css";
@import "../css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.ComboButton");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.PopupMenuItem");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit._base.focus");
// This code does animation to change border color and width to show
// active vs. non-active widgets.
var queue=[];
var animation;
function animateBorderColor(widget, color, startWidth, endWidth){
if(animation){
queue.push(arguments);
return;
}
var s = widget.domNode.style;
s.borderStyle="solid";
s.outlineStyle="solid";
animation = dojo.animateProperty({
node: widget.domNode,
duration: 50,
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();
}
// This flag controls animation and can be disabled by the test harness in robot/focus_mouse.html
animate = !window.location.search.match("animate=false");
dojo.ready(function(){
dojo.subscribe("widgetFocus", function(widget){
console.log("focused on widget " + (widget?widget:"nothing"));
if(animate){
animateBorderColor(widget, "#ff0000", 1, 3);
}
});
dojo.subscribe("widgetBlur", function(widget){
console.log("blurred widget " + (widget?widget:"nothing"));
if(animate){
animateBorderColor(widget, "#0000ff", 3, 1);
}
});
dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
// Focus notification also comes through watch() on each widget
dijit.registry.forEach(function(widget){
widget.watch("focused", function(name, oldValue, newValue){
console.log(this.id + "." + name + ": " + oldValue + " ---> " + newValue);
});
}, this);
});
</script>
<style>
div, fieldset, form, input {
padding: 3px;
margin: 3px;
border: 1px solid blue;
}
</style>
</head>
<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="claro">
<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, check the console log for focus and blur events on widgets.
</p>
<label>a form ContentPane widget:</label><br>
<form id="form" data-dojo-type="dijit/layout/ContentPane" >
<label for="first">simple input: </label><input id="first"/><br>
<label>a fieldset ContentPane widget:</label><br>
<fieldset id=fieldset1 data-dojo-type="dijit/layout/ContentPane">
<label for="select">a ComboBox widget:</label>
<select id=select data-dojo-type="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>another fieldset ContentPane:</label><br>
<fieldset id=fieldset2 data-dojo-type="dijit/layout/ContentPane">
<label for="date">a DateTextBox widget:</label>
<input id=date data-dojo-type="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 data-dojo-type="dijit/form/NumberSpinner" data-dojo-props='value:100'/><br>
<label>a Combobutton widget:</label>
<div id=button data-dojo-type="dijit/form/ComboButton" data-dojo-props='tabIndex:"0"'>
<span>push me</span>
<div id=menu data-dojo-type="dijit/Menu">
<div id=mi1 data-dojo-type="dijit/MenuItem">menu item 1</div>
<div id=mi2 data-dojo-type="dijit/MenuItem">menu item 2</div>
<div id=popupMenuItem data-dojo-type="dijit/PopupMenuItem">
<span>submenu</span>
<div id=submenu data-dojo-type="dijit/Menu">
<div id=smi1 data-dojo-type="dijit/MenuItem">submenu item 1</div>
<div id=smi2 data-dojo-type="dijit/MenuItem">submenu item 2</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>