You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
7.7 KiB
234 lines
7.7 KiB
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
|
<head> |
|
<title>A Sample ToolTip using dijit and dojox.gfx</title> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
@import "../../../dijit/themes/tundra/tundra.css"; |
|
.tooltipBody { |
|
color:#fff; |
|
} |
|
</style> |
|
<script type="text/javascript" data-dojo-config="parseOnLoad:true, isDebug:true" src="../../../dojo/dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dijit.form.Button"); |
|
|
|
dojo.require("dojox.gfx"); |
|
dojo.require("dojox.gfx.move"); |
|
dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); |
|
|
|
dojo.declare("demo.Tooltip",[dijit._Widget,dijit._Templated],{ |
|
|
|
// attachId: String|DomNode? |
|
// the Id or domNode to attach this tooltip to |
|
attachId:"", |
|
|
|
// attachHover: Boolean |
|
// disable hover behavior for the target |
|
attachHover:true, |
|
|
|
// attachParent: Boolean |
|
// automatically attach to our parentnode rather than byId or query |
|
attachParent:false, |
|
|
|
// attachQuery: String? |
|
// an optional selector query to attach this tooltip to |
|
attachQuery:"", |
|
|
|
// attachScope: String|DomNode? |
|
// and optional scope to run the query against, passed as the |
|
// second arg to dojo.query() |
|
queryScope:"", |
|
|
|
// hideDelay: Int |
|
// time in my to delay automatically closing the node |
|
hideDelay: 123, // ms |
|
|
|
// persists: Boolean |
|
// if true, the node will stay visible until explicitly closed |
|
// via _hide() or click on closeIcon |
|
persists:false, |
|
|
|
templateString: |
|
'<div class="foo">' |
|
+'<div style="position:relative;">' |
|
+'<div dojoAttachPoint="surfaceNode"></div>' |
|
+'<div class="tooltipBody" dojoAttachPoint="containerNode"></div>' |
|
+'</div>' |
|
+'</div>', |
|
|
|
postCreate:function(){ |
|
// call _Widget postCreate first |
|
this.inherited(arguments); |
|
// gfx version of "_Templated" idea: |
|
this._initSurface(); |
|
|
|
if(this.attachParent){ |
|
// over-ride and reuse attachId as domNode from now on |
|
this.attachId = this.domNode.parentNode; |
|
} |
|
if(this.attachId){ |
|
// domNode again. setup connections |
|
this.attachId = dojo.byId(this.attachId); |
|
if(this.attachHover){ |
|
this.connect(this.attachId,"onmouseenter","_show"); |
|
} |
|
if(!this.persists){ |
|
this.connect(this.attachId,"onmouseleave","_initHide"); |
|
} |
|
}else if(this.attachQuery){ |
|
// setup connections via dojo.query for multi-tooltips |
|
var nl = dojo.query(this.attachQuery,this.queryScope); |
|
if(this.attachHover){ nl.connect("onmouseenter",this,"_show") } |
|
if(!this.persists){ nl.connect("onmouseleave",this,"_initHide") } |
|
} |
|
// place the tooltip |
|
dojo.body().appendChild(this.domNode); |
|
dojo.style(this.domNode,{ |
|
position:"absolute" |
|
}); |
|
// could do this in css: |
|
dojo.style(this.containerNode,{ |
|
position:"absolute", |
|
top:"15px", |
|
left:"12px", |
|
height:"83px", |
|
width:"190px" |
|
}); |
|
// setup our animations |
|
this._hideAnim = dojo.fadeOut({ node:this.domNode, duration:150 }); |
|
this._showAnim = dojo.fadeIn({ node:this.domNode, duration:75 }); |
|
this.connect(this._hideAnim,"onEnd","_postHide"); |
|
if(!this.persists){ |
|
this.connect(this.domNode,"onmouseleave","_initHide"); |
|
} |
|
// hide quickly |
|
this._postHide(); |
|
}, |
|
|
|
_initHide: function(e){ |
|
// summary: start the timer for the hideDelay |
|
if(!this.persists && this.hideDelay){ |
|
this._delay = setTimeout(dojo.hitch(this,"_hide",e||null),this.hideDelay); |
|
} |
|
}, |
|
|
|
_clearDelay: function(){ |
|
// summary: clear our hide delay timeout |
|
if(this._delay){ clearTimeout(this._delay); } |
|
}, |
|
|
|
_show: function(e){ |
|
// summary: show the widget |
|
this._clearDelay(); |
|
var pos = dojo.coords(e.target || this.attachId,true) |
|
// we need to more accurately position the domNode: |
|
dojo.style(this.domNode,{ |
|
top: pos.y - (pos.h / 2) - 50, |
|
left: pos.x + pos.w - 25, |
|
display:"block" |
|
}); |
|
dojo.fadeIn({ node: this.domNode, duration:75 }).play(); |
|
}, |
|
|
|
_hide: function(e){ |
|
// summary: hide the tooltip |
|
this._hideAnim.play(); |
|
}, |
|
|
|
_postHide: function(){ |
|
// summary: after hide animation cleanup |
|
dojo.style(this.domNode,"display","none"); |
|
}, |
|
|
|
_initSurface:function(){ |
|
// made generally from an SVG file: |
|
this.surface = dojox.gfx.createSurface(this.surfaceNode,220,120); |
|
this.tooltip = this.surface.createGroup(); |
|
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") |
|
.setFill("rgba(0,0,0,0.25)"); |
|
|
|
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") |
|
.setStroke({ width:2, color:"#FFF" }) |
|
.setFill("rgba(0,0,0,0.5)") |
|
.connect("onmouseover",dojo.hitch(this,"_clearDelay")); |
|
|
|
if(this.persists){ |
|
// make the close icon |
|
this._toolButton = this.surface.createGroup(); |
|
this._toolButton.createEllipse({ cx:207.25, cy:12.32, rx: 7.866, ry: 7.099 }) |
|
.setFill("#ededed"); |
|
this._toolButton.createCircle({ cx:207.25, cy: 9.25, r:8.25 }) |
|
.setStroke({ width:2, color:"#FFF" }) |
|
.setFill("#000") |
|
; |
|
this._toolButton.connect("onclick",dojo.hitch(this,"_hide")); |
|
// the X |
|
this._toolButton.createLine({ x1:203.618, y1:5.04, x2: 210.89, y2:12.979 }) |
|
.setStroke({ width:2, color:"#d6d6d6" }); |
|
this._toolButton.createLine({ x1:203.539, y1:12.979, x2: 210.89, y2:5.04 }) |
|
.setStroke({ width:2, color:"#d6d6d6" }); |
|
} |
|
} |
|
}); |
|
</script> |
|
|
|
</head> |
|
<body class="tundra"> |
|
|
|
<h1>dojox.gfx: A Sample tooltip</h1> |
|
|
|
<ul style="width:150px; border:2px solid #ededed; cursor:pointer"> |
|
|
|
|
|
<!-- you can put any content you want in there --> |
|
<li id="warn2"> |
|
Tooltip + Button |
|
<div attachId="warn2" id="warn2tt" dojoType="demo.Tooltip"><p style="margin-top:0">Canvas renderer doesn't implement event handling. |
|
<button dojoType="dijit.form.Button"> |
|
Button |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
alert(" woo hoo! "); |
|
dijit.byId("warn2tt")._hide(); |
|
</script> |
|
</button> |
|
</p></div> |
|
</li> |
|
|
|
<!-- a simple tooltip --> |
|
<li id="warn1"> |
|
Hover trigger / persists |
|
<div persists="true" attachId="warn1" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling.</div> |
|
</li> |
|
|
|
<!-- these get the same tooltip from the attachQuery=".multitip" below --> |
|
<li class="multitip">MultiTip trigger 1</li> |
|
<li>I do nothing</li> |
|
<li class="multitip">Trigger two</li> |
|
|
|
<li><a href="#" onclick="dijit.byId('nohover')._show(arguments[0])">show this way |
|
<label dojoType="demo.Tooltip" attachParent="true" attachHover="false" id="nohover">some text</label> |
|
</a> |
|
</li> |
|
|
|
<!-- attachParent makes the tooltip look for domNode.parentNode before moving to body() --> |
|
<li> |
|
Parent Attached Tooltip |
|
<div attachParent="true" persists="true" dojoType="demo.Tooltip"> |
|
<form id="fooForm"> |
|
<p style="margin-top:0;"> |
|
Name:<br> <input type="text" name="username" style="border:1px solid #ededed" /><br> |
|
Pass:<br> <input type="password" name="password" style="border:1px solid #ededed" /> |
|
</p> |
|
</form> |
|
</div> |
|
</li> |
|
|
|
</ul> |
|
|
|
<!-- attach a single tooltip message to a number of nodes at once --> |
|
<div attachQuery=".multitip" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling. (shared tooltip)</div> |
|
|
|
</body> |
|
</html>
|
|
|