git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/gfx/demos/tooltip.html

   1 <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
   2 <head>
   3         <title>A Sample ToolTip using dijit and dojox.gfx</title>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5         <style type="text/css">
   6                 @import "../../../dojo/resources/dojo.css";
   7                 @import "../../../dijit/tests/css/dijitTests.css";
   8                 @import "../../../dijit/themes/tundra/tundra.css";
   9                 .tooltipBody {
  10                         color:#fff;
  11                 }
  12         </style>
  13         <!--
  14         The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
  15         <script type="text/javascript" src="Silverlight.js"></script>
  16         -->
  17         <script type="text/javascript" djConfig="parseOnLoad:true, isDebug:true" src="../../../dojo/dojo.js"></script>
  18         <script type="text/javascript">
  19                 dojo.require("dijit.form.Button");
  20
  21                 dojo.require("dojox.gfx");
  22                 dojo.require("dojox.gfx.move");
  23                 dojo.require("dijit._Widget"); dojo.require("dijit._Templated");
  24
  25                 dojo.declare("demo.Tooltip",[dijit._Widget,dijit._Templated],{
  26
  27                         // attachId: String|DomNode?
  28                         //              the Id or domNode to attach this tooltip to
  29                         attachId:"",
  30
  31                         // attachHover: Boolean
  32                         //              disable hover behavior for the target
  33                         attachHover:true,
  34
  35                         // attachParent: Boolean
  36                         //              automatically attach to our parentnode rather than byId or query
  37                         attachParent:false,
  38
  39                         // attachQuery: String?
  40                         //              an optional selector query to attach this tooltip to
  41                         attachQuery:"",
  42
  43                         // attachScope: String|DomNode?
  44                         //              and optional scope to run the query against, passed as the
  45                         //              second arg to dojo.query()
  46                         queryScope:"",
  47
  48                         // hideDelay: Int
  49                         //              time in my to delay automatically closing the node
  50                         hideDelay: 123, // ms
  51
  52                         // persists: Boolean
  53                         //              if true, the node will stay visible until explicitly closed
  54                         //              via _hide() or click on closeIcon
  55                         persists:false,
  56
  57                         templateString:
  58                                 '<div class="foo">'
  59                                         +'<div style="position:relative;">'
  60                                                 +'<div dojoAttachPoint="surfaceNode"></div>'
  61                                                 +'<div class="tooltipBody" dojoAttachPoint="containerNode"></div>'
  62                                         +'</div>'
  63                                 +'</div>',
  64
  65                         postCreate:function(){
  66                                 // call _Widget postCreate first
  67                                 this.inherited(arguments);
  68                                 // gfx version of "_Templated" idea:
  69                                 this._initSurface();
  70
  71                                 if(this.attachParent){
  72                                         // over-ride and reuse attachId as domNode from now on
  73                                         this.attachId = this.domNode.parentNode;
  74                                 }
  75                                 if(this.attachId){
  76                                         // domNode again. setup connections
  77                                         this.attachId = dojo.byId(this.attachId);
  78                                         if(this.attachHover){
  79                                                 this.connect(this.attachId,"onmouseenter","_show");
  80                                         }
  81                                         if(!this.persists){
  82                                                 this.connect(this.attachId,"onmouseleave","_initHide");
  83                                         }
  84                                 }else if(this.attachQuery){
  85                                         // setup connections via dojo.query for multi-tooltips
  86                                         var nl = dojo.query(this.attachQuery,this.queryScope);
  87                                         if(this.attachHover){ nl.connect("onmouseenter",this,"_show") }
  88                                         if(!this.persists){ nl.connect("onmouseleave",this,"_initHide") }
  89                                 }
  90                                 // place the tooltip
  91                                 dojo.body().appendChild(this.domNode);
  92                                 dojo.style(this.domNode,{
  93                                         position:"absolute"
  94                                 });
  95                                 // could do this in css:
  96                                 dojo.style(this.containerNode,{
  97                                         position:"absolute",
  98                                         top:"15px",
  99                                         left:"12px",
 100                                         height:"83px",
 101                                         width:"190px"
 102                                 });
 103                                 // setup our animations
 104                                 this._hideAnim = dojo.fadeOut({ node:this.domNode, duration:150 });
 105                                 this._showAnim = dojo.fadeIn({ node:this.domNode, duration:75 });
 106                                 this.connect(this._hideAnim,"onEnd","_postHide");
 107                                 if(!this.persists){
 108                                         this.connect(this.domNode,"onmouseleave","_initHide");
 109                                 }
 110                                 // hide quickly
 111                                 this._postHide();
 112                         },
 113
 114                         _initHide: function(e){
 115                                 // summary: start the timer for the hideDelay
 116                                 if(!this.persists && this.hideDelay){
 117                                         this._delay = setTimeout(dojo.hitch(this,"_hide",e||null),this.hideDelay);
 118                                 }
 119                         },
 120
 121                         _clearDelay: function(){
 122                                 // summary: clear our hide delay timeout
 123                                 if(this._delay){ clearTimeout(this._delay); }
 124                         },
 125
 126                         _show: function(e){
 127                                 // summary: show the widget
 128                                 this._clearDelay();
 129                                 var pos = dojo.coords(e.target || this.attachId,true)
 130                                 // we need to more accurately position the domNode:
 131                                 dojo.style(this.domNode,{
 132                                         top: pos.y - (pos.h / 2) - 50,
 133                                         left: pos.x + pos.w - 25,
 134                                         display:"block"
 135                                 });
 136                                 dojo.fadeIn({ node: this.domNode, duration:75 }).play();
 137                         },
 138
 139                         _hide: function(e){
 140                                 // summary: hide the tooltip
 141                                 this._hideAnim.play();
 142                         },
 143
 144                         _postHide: function(){
 145                                 // summary: after hide animation cleanup
 146                                 dojo.style(this.domNode,"display","none");
 147                         },
 148
 149                         _initSurface:function(){
 150                                 // made generally from an SVG file:
 151                                 this.surface = dojox.gfx.createSurface(this.surfaceNode,220,120);
 152                                 this.tooltip = this.surface.createGroup();
 153                                 this.tooltip.createPath("M213,101.072c0,6.675-5.411,12.086-12.086,12.086H13.586 c-6.675,0-12.086-5.411-12.086-12.086V21.004c0-6.675,5.411-12.086,12.086-12.086h187.328c6.675,0,12.086,5.411,12.086,12.086 V101.072z")
 154                                         .setFill("rgba(0,0,0,0.25)");
 155
 156                                 this.tooltip.createPath("M211.5,97.418c0,6.627-5.373,12-12,12 h-186c-6.627,0-12-5.373-12-12v-79.5c0-6.627,5.373-12,12-12h186c6.627,0,12,5.373,12,12V97.418z")
 157                                         .setStroke({ width:2, color:"#FFF" })
 158                                         .setFill("rgba(0,0,0,0.5)")
 159                                         .connect("onmouseover",dojo.hitch(this,"_clearDelay"));
 160
 161                                 if(this.persists){
 162                                         // make the close icon
 163                                         this._toolButton = this.surface.createGroup();
 164                                         this._toolButton.createEllipse({ cx:207.25, cy:12.32, rx: 7.866, ry: 7.099 })
 165                                                 .setFill("#ededed");
 166                                         this._toolButton.createCircle({ cx:207.25, cy: 9.25, r:8.25 })
 167                                                 .setStroke({ width:2, color:"#FFF" })
 168                                                 .setFill("#000")
 169                                         ;
 170                                         this._toolButton.connect("onclick",dojo.hitch(this,"_hide"));
 171                                         // the X
 172                                         this._toolButton.createLine({ x1:203.618, y1:5.04, x2: 210.89, y2:12.979 })
 173                                                 .setStroke({ width:2, color:"#d6d6d6" });
 174                                         this._toolButton.createLine({ x1:203.539, y1:12.979, x2: 210.89, y2:5.04 })
 175                                                 .setStroke({ width:2, color:"#d6d6d6" });
 176                                 }
 177                         }
 178                 });
 179         </script>
 180
 181 </head>
 182 <body class="tundra">
 183
 184         <h1>dojox.gfx: A Sample tooltip</h1>
 185
 186         <ul style="width:150px; border:2px solid #ededed; cursor:pointer">
 187
 188
 189                 <!-- you can put any content you want in there -->
 190                 <li id="warn2">
 191                         Tooltip + Button
 192                         <div attachId="warn2" id="warn2tt" dojoType="demo.Tooltip"><p style="margin-top:0">Canvas renderer doesn't implement event handling.
 193                                 <button dojoType="dijit.form.Button">
 194                                         Button
 195                                         <script type="dojo/method" event="onClick">
 196                                                 alert(" woo hoo! ");
 197                                                 dijit.byId("warn2tt")._hide();
 198                                         </script>
 199                                 </button>
 200                         </p></div>
 201                 </li>
 202
 203                 <!-- a simple tooltip -->
 204                 <li id="warn1">
 205                         Hover trigger / persists
 206                         <div persists="true" attachId="warn1" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling.</div>
 207                 </li>
 208
 209                 <!-- these get the same tooltip from the attachQuery=".multitip" below -->
 210                 <li class="multitip">MultiTip trigger 1</li>
 211                 <li>I do nothing</li>
 212                 <li class="multitip">Trigger two</li>
 213
 214                 <li><a href="#" onclick="dijit.byId('nohover')._show(arguments[0])">show this way
 215                         <label dojoType="demo.Tooltip" attachParent="true" attachHover="false" id="nohover">some text</label>
 216                         </a>
 217                 </li>
 218
 219                 <!-- attachParent makes the tooltip look for domNode.parentNode before moving to body() -->
 220                 <li>
 221                         Parent Attached Tooltip
 222                         <div attachParent="true" persists="true" dojoType="demo.Tooltip">
 223                                 <form id="fooForm">
 224                                         <p style="margin-top:0;">
 225                                         Name:<br> <input type="text" name="username" style="border:1px solid #ededed" /><br>
 226                                         Pass:<br> <input type="password" name="password" style="border:1px solid #ededed" />
 227                                         </p>
 228                                 </form>
 229                         </div>
 230                 </li>
 231
 232         </ul>
 233
 234         <!-- attach a single tooltip message to a number of nodes at once -->
 235         <div attachQuery=".multitip" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling. (shared tooltip)</div>
 236
 237 </body>
 238 </html>