helptip.js
上传用户:huijianzhu
上传日期:2009-11-25
资源大小:9825k
文件大小:9k
源码类别:

电子政务应用

开发平台:

Java

  1. /*----------------------------------------------------------------------------
  2. |                               Help Tip 1.12                                 |
  3. |-----------------------------------------------------------------------------|
  4. |                         Created by Erik Arvidsson                           |
  5. |                  (http://webfx.eae.net/contact.html#erik)                   |
  6. |                      For WebFX (http://webfx.eae.net/)                      |
  7. |-----------------------------------------------------------------------------|
  8. |           A tool tip like script that can be used for context help          |
  9. |-----------------------------------------------------------------------------|
  10. |                  Copyright (c) 1999 - 2002 Erik Arvidsson                   |
  11. |-----------------------------------------------------------------------------|
  12. | This software is provided "as is", without warranty of any kind, express or |
  13. | implied, including  but not limited  to the warranties of  merchantability, |
  14. | fitness for a particular purpose and noninfringement. In no event shall the |
  15. | authors or  copyright  holders be  liable for any claim,  damages or  other |
  16. | liability, whether  in an  action of  contract, tort  or otherwise, arising |
  17. | from,  out of  or in  connection with  the software or  the  use  or  other |
  18. | dealings in the software.                                                   |
  19. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  20. | This  software is  available under the  three different licenses  mentioned |
  21. | below.  To use this software you must chose, and qualify, for one of those. |
  22. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  23. | The WebFX Non-Commercial License          http://webfx.eae.net/license.html |
  24. | Permits  anyone the right to use the  software in a  non-commercial context |
  25. | free of charge.                                                             |
  26. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  27. | The WebFX Commercial license           http://webfx.eae.net/commercial.html |
  28. | Permits the  license holder the right to use  the software in a  commercial |
  29. | context. Such license must be specifically obtained, however it's valid for |
  30. | any number of  implementations of the licensed software.                    |
  31. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  32. | GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |
  33. | Permits anyone the right to use and modify the software without limitations |
  34. | as long as proper  credits are given  and the original  and modified source |
  35. | code are included. Requires  that the final product, software derivate from |
  36. | the original  source or any  software  utilizing a GPL  component, such  as |
  37. | this, is also licensed under the GPL license.                               |
  38. |-----------------------------------------------------------------------------|
  39. | 2002-09-27 |                                                                |
  40. | 2001-11-25 | Added a resize to the tooltip if the document width is too     |
  41. |            | small.                                                         |
  42. | 2002-05-19 | IE50 did not recognise the JS keyword undefined so the test    |
  43. |            | for scroll support was updated to be IE50 friendly.            |
  44. | 2002-07-06 | Added flag to hide selects for IE                              |
  45. | 2002-10-04 | (1.1) Restructured and made code more IE garbage collector     |
  46. |            | friendly. This solved the most nasty memory leaks. Also added  |
  47. |            | support for hiding the tooltip if ESC is pressed.              |
  48. | 2002-10-18 | Fixed verrical position in case of scrolled document.          |
  49. | 2002-12-02 | Mozilla bug workaround related to mousedown and move.          |
  50. |-----------------------------------------------------------------------------|
  51. | Dependencies: helptip.css (To set up the CSS of the help-tooltip class)     |
  52. |-----------------------------------------------------------------------------|
  53. | Usage:                                                                      |
  54. |                                                                             |
  55. |   <script type="text/javascript" src="helptip.js">< /script>                |
  56. |   <link type="text/css" rel="StyleSheet" href="helptip.css" />              |
  57. |                                                                             |
  58. |   <a class="helpLink" href="?" onclick="showHelp(event, 'String to show');  |
  59. |      return false">Help</a>                                                 |
  60. |-----------------------------------------------------------------------------|
  61. | Created 2001-09-27 | All changes are in the log above. | Updated 2002-12-02 |
  62. ----------------------------------------------------------------------------*/
  63. function showHelpTip(e, sHtml, bHideSelects) {
  64. // find anchor element
  65. var el = e.target || e.srcElement;
  66. while (el.tagName != "A")
  67. el = el.parentNode;
  68. // is there already a tooltip? If so, remove it
  69. if (el._helpTip) {
  70. helpTipHandler.hideHelpTip(el);
  71. }
  72. helpTipHandler.hideSelects = Boolean(bHideSelects);
  73. // create element and insert last into the body
  74. helpTipHandler.createHelpTip(el, sHtml);
  75. // position tooltip
  76. helpTipHandler.positionToolTip(e);
  77. // add a listener to the blur event.
  78. // When blurred remove tooltip and restore anchor
  79. el.onblur = helpTipHandler.anchorBlur;
  80. el.onkeydown = helpTipHandler.anchorKeyDown;
  81. }
  82. function hideHelpTip(e) {
  83. // find anchor element
  84. var el = e.target || e.srcElement;
  85. while (el.tagName != "A")
  86. el = el.parentNode;
  87. helpTipHandler.hideHelpTip(el);
  88. }
  89. var helpTipHandler = {
  90. hideSelects: false,
  91. helpTip: null,
  92. showSelects: function (bVisible) {
  93. if (!this.hideSelects) return;
  94. // only IE actually do something in here
  95. var selects = [];
  96. if (document.all)
  97. selects = document.all.tags("SELECT");
  98. var l = selects.length;
  99. for (var i = 0; i < l; i++)
  100. selects[i].runtimeStyle.visibility = bVisible ? "" : "hidden";
  101. },
  102. create: function () {
  103. var d = document.createElement("DIV");
  104. d.className = "helpTooltip";
  105. d.onmousedown = this.helpTipMouseDown;
  106. d.onmouseup = this.helpTipMouseUp;
  107. document.body.appendChild(d);
  108. this.helpTip = d;
  109. },
  110. createHelpTip: function (el, sHtml) {
  111. if (this.helpTip == null) {
  112. this.create();
  113. }
  114. var d = this.helpTip;
  115. d.innerHTML = sHtml;
  116. d._boundAnchor = el;
  117. el._helpTip = d;
  118. return d;
  119. },
  120. // Allow clicks on A elements inside tooltip
  121. helpTipMouseDown: function (e) {
  122. var d = this;
  123. var el = d._boundAnchor;
  124. if (!e) e = event;
  125. var t = e.target || e.srcElement;
  126. while (t.tagName != "A" && t != d)
  127. t = t.parentNode;
  128. if (t == d) return;
  129. el._onblur = el.onblur;
  130. el.onblur = null;
  131. },
  132. helpTipMouseUp: function () {
  133. var d = this;
  134. var el = d._boundAnchor;
  135. el.onblur = el._onblur;
  136. el._onblur = null;
  137. el.focus();
  138. },
  139. anchorBlur: function (e) {
  140. var el = this;
  141. helpTipHandler.hideHelpTip(el);
  142. },
  143. anchorKeyDown: function (e) {
  144. if (!e) e = window.event
  145. if (e.keyCode == 27) { // ESC
  146. helpTipHandler.hideHelpTip(this);
  147. }
  148. },
  149. removeHelpTip: function (d) {
  150. d._boundAnchor = null;
  151. d.style.filter = "none";
  152. d.innerHTML = "";
  153. d.onmousedown = null;
  154. d.onmouseup = null;
  155. d.parentNode.removeChild(d);
  156. //d.style.display = "none";
  157. },
  158. hideHelpTip: function (el) {
  159. var d = el._helpTip;
  160. /* Mozilla (1.2+) starts a selection session when moved
  161. and this destroys the mouse events until reloaded
  162. d.style.top = -el.offsetHeight - 100 + "px";
  163. */
  164. d.style.visibility = "hidden";
  165. //d._boundAnchor = null;
  166. el.onblur = null;
  167. el._onblur = null;
  168. el._helpTip = null;
  169. el.onkeydown = null;
  170. this.showSelects(true);
  171. },
  172. positionToolTip: function (e) {
  173. this.showSelects(false);
  174. var scroll = this.getScroll();
  175. var d = this.helpTip;
  176. // width
  177. if (d.offsetWidth >= scroll.width)
  178. d.style.width = scroll.width - 10 + "px";
  179. else
  180. d.style.width = "";
  181. // left
  182. if (e.clientX > scroll.width - d.offsetWidth)
  183. d.style.left = scroll.width - d.offsetWidth + scroll.left + "px";
  184. else
  185. d.style.left = e.clientX - 2 + scroll.left + "px";
  186. // top
  187. if (e.clientY + d.offsetHeight + 18 < scroll.height)
  188. d.style.top = e.clientY + 18 + scroll.top + "px";
  189. else if (e.clientY - d.offsetHeight > 0)
  190. d.style.top = e.clientY + scroll.top - d.offsetHeight + "px";
  191. else
  192. d.style.top = scroll.top + 5 + "px";
  193. d.style.visibility = "visible";
  194. },
  195. // returns the scroll left and top for the browser viewport.
  196. getScroll: function () {
  197. if (document.all && typeof document.body.scrollTop != "undefined") { // IE model
  198. var ieBox = document.compatMode != "CSS1Compat";
  199. var cont = ieBox ? document.body : document.documentElement;
  200. return {
  201. left: cont.scrollLeft,
  202. top: cont.scrollTop,
  203. width: cont.clientWidth,
  204. height: cont.clientHeight
  205. };
  206. }
  207. else {
  208. return {
  209. left: window.pageXOffset,
  210. top: window.pageYOffset,
  211. width: window.innerWidth,
  212. height: window.innerHeight
  213. };
  214. }
  215. }
  216. };