git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/_base/test_focusWidget.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>dijit.focus Test</title>
   6         <style type="text/css">
   7                 @import "../../../dojo/resources/dojo.css";
   8                 @import "../../themes/tundra/tundra.css";
   9                 @import "../css/dijitTests.css";
  10         </style>
  11
  12         <script type="text/javascript" src="../../../dojo/dojo.js"
  13                 djConfig="isDebug: true, parseOnLoad: true"></script>
  14         <script type="text/javascript">
  15                 dojo.require("dijit.form.DateTextBox");
  16                 dojo.require("dijit.form.ComboBox");
  17                 dojo.require("dijit.form.NumberSpinner");
  18                 dojo.require("dijit.form.Button");
  19                 dojo.require("dijit.Menu");
  20                 dojo.require("dijit.layout.ContentPane");
  21
  22                 var queue=[];
  23                 var animation;
  24                 function animateBorderColor(widget, color, startWidth, endWidth){
  25                         if(animation){
  26                                 queue.push(arguments);
  27                                 return;
  28                         }
  29                         with(widget.domNode.style){
  30                                 borderStyle="solid";
  31                                 outlineStyle="solid";
  32
  33                         }
  34                         animation = dojo.animateProperty({
  35                                 node: widget.domNode,
  36                                 duration: 400,
  37                                 properties: {
  38                                         // depending on browser and node type, sometimes border or outline is ineffective.
  39                                         // doing both seems to work in all cases though (for at least one of them)
  40                                         borderColor: { end: color },
  41                                         borderWidth: { start: startWidth, end: endWidth },
  42                                         outlineColor: { end: color },
  43                                         outlineWidth: { start: startWidth, end: endWidth }
  44                                 },
  45                                 onEnd: function(){
  46                                         animation=null;
  47                                         if(queue.length){
  48                                                 animateBorderColor.apply(null, queue.shift());
  49                                         }
  50                                 }
  51                         });
  52                         animation.play();
  53                 }
  54
  55                 dojo.addOnLoad(function(){
  56                         dojo.subscribe("widgetFocus", function(widget){
  57                                 console.log("focused on widget " + (widget?widget:"nothing"));
  58                                 animateBorderColor(widget, "#ff0000", 2, 5);
  59                         });
  60                         dojo.subscribe("widgetBlur", function(widget){
  61                                 console.log("blurred widget " + (widget?widget:"nothing"));
  62                                 animateBorderColor(widget, "#0000ff", 5, 2);
  63                         });
  64                         dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
  65                 });
  66         </script>
  67         <style>
  68                 div, fieldset, form, input {
  69                         padding: 10px;
  70                         margin: 10px;
  71                         border: 2px solid blue;
  72                 }
  73         </style>
  74 </head>
  75 <body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra">
  76
  77         <h3>Widget Focus Test</h3>
  78         <p>
  79                 This is for testing code to detect onBlur and onFocus on a widget level.<br>
  80                 Focused widgets' borders will turn red.<br>
  81                 Also, heck the console log for focus and blur events on widgets.
  82         </p>
  83
  84         <label for="fieldset1">a form ContentPane widget:</label><br>
  85         <form dojoType="dijit.layout.ContentPane">
  86                 <label for="first">simple input: </label><input id=first><br>
  87
  88                 <label for="fieldset1">a fieldset ContentPane widget:</label><br>
  89                 <fieldset id=fieldset1 dojoType="dijit.layout.ContentPane">
  90                         <label for="select">a ComboBox widget:</label>
  91                         <select id=select dojoType="dijit.form.ComboBox">
  92                                 <option>this</option>
  93                                 <option>is</option>
  94                                 <option>a</option>
  95                                 <option>list</option>
  96                         </select>
  97                         <label for="plain">a plain input:</label>
  98                         <input id=plain value=plain>
  99                 </fieldset>
 100                 <br>
 101                 <label for="fieldset1">another fieldset ContentPane:</label><br>
 102                 <fieldset id=fieldset2 dojoType="dijit.layout.ContentPane">
 103                         <label for="date">a DateTextBox widget:</label>
 104                         <input id=date dojoType="dijit.form.DateTextBox"><br>
 105
 106                         <label for="textarea">a plain textarea:</label><br>
 107                         <textarea id=textarea>hello there!</textarea><br>
 108
 109                         <label for="spinner">a Spinner widget:</label>
 110                         <input id=spinner dojoType="dijit.form.NumberSpinner" value=100><br>
 111
 112                         <label for="button">a Combobutton widget:</label>
 113                         <div id=button dojoType="dijit.form.ComboButton" tabIndex=0>
 114                                 <span>push me</span>
 115                                 <div id=menu dojoType="dijit.Menu">
 116                                         <div id=mi1 dojoType="dijit.MenuItem">menu item 1</div>
 117                                         <div id=mi2 dojoType="dijit.MenuItem">menu item 2</div>
 118                                         <div id=popupMenuItem dojoType="dijit.PopupMenuItem">
 119                                                 <span>submenu</span>
 120                                                 <div id=submenu dojoType="dijit.Menu">
 121                                                         <div id=smi1 dojoType="dijit.MenuItem">submenu item 1</div>
 122                                                         <div id=smi2 dojoType="dijit.MenuItem">submenu item 2</div>
 123                                                 </div>
 124                                         </div>
 125                                 </div>
 126                         </div>
 127                 </fieldset>
 128         </form>
 129 </body>
 130 </html>