本文深入探讨了前端开发的关键技术和实战经验，包括HTML、CSS、JavaScript等基础语言的应用，以及Vue、React、Angular等现代框架的使用。文章还涵盖了前端性能优化、响应式设计和跨浏览器兼容性等内容。
Files included in the package:
- form-field-tooltip.html = Main demo HTML file
- js/form-field-tooltip.js = Main JS file for the script
- js/rounded-corners.js = JS file created to add rounded corners dynamically to the tooltip
- css/form-field-tooltip.css = Main CSS file for the tooltip
- images/* = Arrows used by teh script.
1. CSS & JS
<style type="text/css">
#DHTMLgoodies_formTooltipDiv{
color:#FFF;
font-family:arial;
font-weight:bold;
font-size:0.8em;
line-height:120%;
}
.DHTMLgoodies_formTooltip_closeMessage{
color:#FFF;
font-weight:normal;
font-size:0.7em;
</style>
<script language = "javascript">
/************************************************************************************************************<br>
<br>
@fileoverview
Rounded corners class<br>
(C) www.dhtmlgoodies.com, September 2006<br>
<br>
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. <br>
<br>
Terms of use:<br>
Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse<br>
<br>
Thank you!<br>
<br>
www.dhtmlgoodies.com<br>
Alf Magne Kalleland<br>
<br>
************************************************************************************************************/
// {{{ Constructor
function DHTMLgoodies_roundedCorners()
{
var roundedCornerTargets;
this.roundedCornerTargets = new Array();
}
var string = '';
// }}}
DHTMLgoodies_roundedCorners.prototype = {
// {{{ addTarget()
/**
*
*
* Add rounded corners to an element
*
* @param String divId = Id of element on page. Example "leftColumn" for <div id="leftColumn">
* @param Int xRadius = Y radius of rounded corners, example 10
* @param Int yRadius = Y radius of rounded corners, example 10
* @param String color = Background color of element, example #FFF or #AABBCC
* @param String color = backgroundColor color of element "behind", example #FFF or #AABBCC
* @param Int padding = Padding of content - This will be added as left and right padding(not top and bottom)
* @param String heightOfContent = Optional argument. You can specify a fixed height of your content. example "15" which means pixels, or "50%".
* @param String whichCorners = Optional argument. Commaseparated list of corners, example "top_left,top_right,bottom_left"
*
* @public
*/
addTarget : function(divId,xRadius,yRadius,color,backgroundColor,padding,heightOfContent,whichCorners)
{
var index = this.roundedCornerTargets.length;
this.roundedCornerTargets[index] = new Array();
this.roundedCornerTargets[index]['divId'] = divId;
this.roundedCornerTargets[index]['xRadius'] = xRadius;
this.roundedCornerTargets[index]['yRadius'] = yRadius;
this.roundedCornerTargets[index]['color'] = color;
this.roundedCornerTargets[index]['backgroundColor'] = backgroundColor;
this.roundedCornerTargets[index]['padding'] = padding;
this.roundedCornerTargets[index]['heightOfContent'] = heightOfContent;
this.roundedCornerTargets[index]['whichCorners'] = whichCorners;
}
// }}}
,
// {{{ init()
/**
*
*
* Initializes the script
*
*
* @public
*/
init : function()
{
for(var targetCounter=0;targetCounter < this.roundedCornerTargets.length;targetCounter++){
// Creating local variables of each option
whichCorners = this.roundedCornerTargets[targetCounter]['whichCorners'];
divId = this.roundedCornerTargets[targetCounter]['divId'];
xRadius = this.roundedCornerTargets[targetCounter]['xRadius'];
yRadius = this.roundedCornerTargets[targetCounter]['yRadius'];
color = this.roundedCornerTargets[targetCounter]['color'];
backgroundColor = this.roundedCornerTargets[targetCounter]['backgroundColor'];
padding = this.roundedCornerTargets[targetCounter]['padding'];
heightOfContent = this.roundedCornerTargets[targetCounter]['heightOfContent'];
whichCorners = this.roundedCornerTargets[targetCounter]['whichCorners'];
// Which corners should we add rounded corners to?
var cornerArray = new Array();
if(!whichCorners || whichCorners=='all'){
cornerArray['top_left'] = true;
cornerArray['top_right'] = true;
cornerArray['bottom_left'] = true;
cornerArray['bottom_right'] = true;
}else{
cornerArray = whichCorners.split(/,/gi);
for(var prop in cornerArray)cornerArray[cornerArray[prop]] = true;
}
var factorX = xRadius/yRadius; // How big is x radius compared to y radius
var obj = document.getElementById(divId); // Creating reference to element
obj.style.backgroundColor=null; // Setting background color blank
obj.style.backgroundColor='transparent';
var content = obj.innerHTML; // Saving HTML content of this element
obj.innerHTML = ''; // Setting HTML content of element blank-
// Adding top corner div.
if(cornerArray['top_left'] || cornerArray['top_right']){
var topBar_container = document.createElement('DIV');
topBar_container.style.height = yRadius + 'px';
topBar_container.style.overflow = 'hidden';
obj.appendChild(topBar_container);
var currentAntialiasSize = 0;
var savedRestValue = 0;
for(no=1;no<=yRadius;no++){
var marginSize = (xRadius - (this.getY((yRadius - no),yRadius,factorX)));
var marginSize_decimals = (xRadius - (this.getY_withDecimals((yRadius - no),yRadius,factorX)));
var restValue = xRadius - marginSize_decimals;
var antialiasSize = xRadius - marginSize - Math.floor(savedRestValue)
var foregroundSize = xRadius - (marginSize + antialiasSize);
var el = document.createElement('DIV');
el.style.overflow='hidden';
el.style.height = '1px';
if(cornerArray['top_left'])el.style.marginLeft = marginSize + 'px';
if(cornerArray['top_right'])el.style.marginRight = marginSize + 'px';
topBar_container.appendChild(el);
var y = topBar_container;
for(var no2=1;no2<=antialiasSize;no2++){
switch(no2){
case 1:
if (no2 == antialiasSize)
blendMode = ((restValue + savedRestValue) /2) - foregroundSize;
else {
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
blendMode = (restValue - foregroundSize - antialiasSize + 1) * (tmpValue - (yRadius - no)) /2;
}
break;
case antialiasSize:
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = 1 - (1 - (tmpValue - (yRadius - no))) * (1 - (savedRestValue - foregroundSize)) /2;
break;
default:
var tmpValue2 = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = ((tmpValue + tmpValue2) / 2) - (yRadius - no);
}
el.style.backgroundColor = this.__blendColors(backgroundColor,color,blendMode);
y.appendChild(el);
y = el;
var el = document.createElement('DIV');
el.style.height = '1px';
el.style.overflow='hidden';
if(cornerArray['top_left'])el.style.marginLeft = '1px';
if(cornerArray['top_right'])el.style.marginRight = '1px';
el.style.backgroundColor=color;
}
y.appendChild(el);
savedRestValue = restValue;
}
}
// Add content
var contentDiv = document.createElement('DIV');
contentDiv.className = obj.className;
contentDiv.style.border='1px solid ' + color;
contentDiv.innerHTML = content;
contentDiv.style.backgroundColor=color;
contentDiv.style.paddingLeft = padding + 'px';
contentDiv.style.paddingRight = padding + 'px';
if(!heightOfContent)heightOfContent = '';
heightOfContent = heightOfContent + '';
if(heightOfContent.length>0 && heightOfContent.indexOf('%')==-1)heightOfContent = heightOfContent + 'px';
if(heightOfContent.length>0)contentDiv.style.height = heightOfContent;
obj.appendChild(contentDiv);
if(cornerArray['bottom_left'] || cornerArray['bottom_right']){
var bottomBar_container = document.createElement('DIV');
bottomBar_container.style.height = yRadius + 'px';
bottomBar_container.style.overflow = 'hidden';
obj.appendChild(bottomBar_container);
var currentAntialiasSize = 0;
var savedRestValue = 0;
var errorOccured = false;
var arrayOfDivs = new Array();
for(no=1;no<=yRadius;no++){
var marginSize = (xRadius - (this.getY((yRadius - no),yRadius,factorX)));
var marginSize_decimals = (xRadius - (this.getY_withDecimals((yRadius - no),yRadius,factorX)));
var restValue = (xRadius - marginSize_decimals);
var antialiasSize = xRadius - marginSize - Math.floor(savedRestValue)
var foregroundSize = xRadius - (marginSize + antialiasSize);
var el = document.createElement('DIV');
el.style.overflow='hidden';
el.style.height = '1px';
if(cornerArray['bottom_left'])el.style.marginLeft = marginSize + 'px';
if(cornerArray['bottom_right'])el.style.marginRight = marginSize + 'px';
bottomBar_container.insertBefore(el,bottomBar_container.firstChild);
var y = bottomBar_container;
for(var no2=1;no2<=antialiasSize;no2++){
switch(no2){
case 1:
if (no2 == antialiasSize)
blendMode = ((restValue + savedRestValue) /2) - foregroundSize;
else {
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
blendMode = (restValue - foregroundSize - antialiasSize + 1) * (tmpValue - (yRadius - no)) /2;
}
break;
case antialiasSize:
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = 1 - (1 - (tmpValue - (yRadius - no))) * (1 - (savedRestValue - foregroundSize)) /2;
break;
default:
var tmpValue2 = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = ((tmpValue + tmpValue2) / 2) - (yRadius - no);
}
el.style.backgroundColor = this.__blendColors(backgroundColor,color,blendMode);
if(y==bottomBar_container)arrayOfDivs[arrayOfDivs.length] = el;
try{ // Need to look closer at this problem which occures in Opera.
var firstChild = y.getElementsByTagName('DIV')[0];
y.insertBefore(el,y.firstChild);
}catch(e){
y.appendChild(el);
errorOccured = true;
}
y = el;
var el = document.createElement('DIV');
el.style.height = '1px';
el.style.overflow='hidden';
if(cornerArray['bottom_left'])el.style.marginLeft = '1px';
if(cornerArray['bottom_right'])el.style.marginRight = '1px';
}
if(errorOccured){ // Opera fix
for(var divCounter=arrayOfDivs.length-1;divCounter>=0;divCounter--){
bottomBar_container.appendChild(arrayOfDivs[divCounter]);
}
}
el.style.backgroundColor=color;
y.appendChild(el);
savedRestValue = restValue;
}
}
}
}
// }}}
,
// {{{ getY()
/**
*
*
* Add rounded corners to an element
*
* @param Int x = x Coordinate
* @param Int maxX = Size of rounded corners
*
*
* @private
*/
getY : function(x,maxX,factorX){
// y = sqrt(100 - x^2)
// Y = 0.5 * ((100 - x^2)^0.5);
return Math.max(0,Math.ceil(factorX * Math.sqrt( (maxX * maxX) - (x*x)) ));
}
// }}}
,
// {{{ getY_withDecimals()
/**
*
*
* Add rounded corners to an element
*
* @param Int x = x Coordinate
* @param Int maxX = Size of rounded corners
*
*
* @private
*/
getY_withDecimals : function(x,maxX,factorX){
// y = sqrt(100 - x^2)
// Y = 0.5 * ((100 - x^2)^0.5);
return Math.max(0,factorX * Math.sqrt( (maxX * maxX) - (x*x)) );
}
,
// {{{ __blendColors()
/**
*
*
* Simply blending two colors by extracting red, green and blue and subtracting difference between colors from them.
* Finally, we multiply it with the blendMode value
*
* @param String colorA = RGB color
* @param String colorB = RGB color
* @param Float blendMode
*
*
* @private
*/
__blendColors : function (colorA, colorB, blendMode) {
if(colorA.length=='4'){ // In case we are dealing with colors like #FFF
colorA = '#' + colorA.substring(1,1) + colorA.substring(1,1) + colorA.substring(2,1) + colorA.substring(2,1) + colorA.substring(3,1) + colorA.substring(3,1);
}
if(colorB.length=='4'){ // In case we are dealing with colors like #FFF
colorB = '#' + colorB.substring(1,1) + colorB.substring(1,1) + colorB.substring(2,1) + colorB.substring(2,1) + colorB.substring(3,1) + colorB.substring(3,1);
}
var colorArrayA = [parseInt('0x' + colorA.substring(1,3)), parseInt('0x' + colorA.substring(3, 5)), parseInt('0x' + colorA.substring(5, 7))]; // Create array of Red, Green and Blue ( 0-255)
var colorArrayB = [parseInt('0x' + colorB.substring(1,3)), parseInt('0x' + colorB.substring(3, 5)), parseInt('0x' + colorB.substring(5, 7))]; // Create array of Red, Green and Blue ( 0-255)
var red = Math.round(colorArrayA[0] + (colorArrayB[0] - colorArrayA[0])*blendMode).toString(16); // Create new Red color ( Hex )
var green = Math.round(colorArrayA[1] + (colorArrayB[1] - colorArrayA[1])*blendMode).toString(16); // Create new Green color ( Hex )
var blue = Math.round(colorArrayA[2] + (colorArrayB[2] - colorArrayA[2])*blendMode).toString(16); // Create new Blue color ( Hex )
if(red.length==1)red = '0' + red;
if(green.length==1)green = '0' + green;
if(blue.length==1)blue = '0' + blue;
return '#' + red + green+ blue; // Return new RGB color
}
}
</script>
<script language = "javascript">
/************************************************************************************************************
Form field tooltip
(C) www.dhtmlgoodies.com, September 2006
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var DHTMLgoodies_globalTooltipObj;
/**
Constructor
**/
function DHTMLgoodies_formTooltip()
{
var tooltipDiv;
var tooltipText;
var tooltipContentDiv; // Reference to inner div with tooltip content
var imagePath; // Relative path to images
var arrowImageFile; // Name of arrow image
var arrowImageFileRight; // Name of arrow image
var arrowRightWidth;
var arrowTopHeight;
var tooltipWidth; // Width of tooltip
var roundedCornerObj; // Reference to object of class DHTMLgoodies_roundedCorners
var tooltipBgColor;
var closeMessage; // Close message
var activeInput; // Reference to currently active input
var tooltipPosition; // Tooltip position, possible values: "below" or "right"
var tooltipCornerSize; // Size of rounded corners
var displayArrow; // Display arrow above or at the left of the tooltip?
var cookieName; // Name of cookie
var disableTooltipPossibility; // Possibility of disabling tooltip
var disableTooltipByCookie; // If tooltip has been disabled, save the settings in cookie, i.e. for other pages with the same cookie name.
var disableTooltipMessage;
var tooltipDisabled;
var isMSIE;
var tooltipIframeObj;
var pageBgColor; // Color of background - used in ie when applying iframe which covers select boxes
var currentTooltipObj; // Reference to form field which tooltip is currently showing for
this.currentTooltipObj = false,
this.tooltipDiv = false,
this.tooltipText = false;
this.imagePath = 'images/';
this.arrowImageFile = 'green-arrow.gif';
this.arrowImageFileRight = 'green-arrow-right.gif';
this.tooltipWidth = 200;
this.tooltipBgColor = '#317082';
this.closeMessage = 'Close';
this.disableTooltipMessage = 'Don\'t show this message again';
this.activeInput = false;
this.tooltipPosition = 'right';
this.arrowRightWidth = 16; // Default width of arrow when the tooltip is on the right side of the inputs.
this.arrowTopHeight = 13; // Default height of arrow at the top of tooltip
this.tooltipCornerSize = 10;
this.displayArrow = true;
this.cookieName = 'DHTMLgoodies_tooltipVisibility';
this.disableTooltipByCookie = false;
this.tooltipDisabled = false;
this.disableTooltipPossibility = true;
this.tooltipIframeObj = false;
this.pageBgColor = '#FFFFFF';
DHTMLgoodies_globalTooltipObj = this;
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('MSIE 9')==-1)this.isMSIE = true; else this.isMSIE = false;
}
DHTMLgoodies_formTooltip.prototype = {
// {{{ initFormFieldTooltip()
/**
*
*
* Initializes the tooltip script. Most set methods needs to be executed before you call this method.
*
* @public
*/
initFormFieldTooltip : function()
{
var formElements = new Array();
var inputs = document.getElementsByTagName('INPUT');
for(var no=0;no<inputs.length;no++){
var attr = inputs[no].getAttribute('tooltipText');
if(!attr)attr = inputs[no].tooltipText;
if(attr)formElements[formElements.length] = inputs[no];
}
var inputs = document.getElementsByTagName('TEXTAREA');
for(var no=0;no<inputs.length;no++){
var attr = inputs[no].getAttribute('tooltipText');
if(!attr)attr = inputs[no].tooltipText;
if(attr)formElements[formElements.length] = inputs[no];
}
var inputs = document.getElementsByTagName('SELECT');
for(var no=0;no<inputs.length;no++){
var attr = inputs[no].getAttribute('tooltipText');
if(!attr)attr = inputs[no].tooltipText;
if(attr)formElements[formElements.length] = inputs[no];
}
window.refToFormTooltip = this;
for(var no=0;no<formElements.length;no++){
formElements[no].onfocus = this.__displayTooltip;
}
this.addEvent(window,'resize',function(){ window.refToFormTooltip.__positionCurrentToolTipObj(); });
this.addEvent(document.documentElement,'click',function(e){ window.refToFormTooltip.__autoHideTooltip(e); });
}
// }}}
,
// {{{ setTooltipPosition()
/**
*
*
* Specify position of tooltip(below or right)
* @param String newPosition (Possible values: "below" or "right")
*
* @public
*/
setTooltipPosition : function(newPosition)
{
this.tooltipPosition = newPosition;
}
// }}}
,
// {{{ setCloseMessage()
/**
*
*
* Specify "Close" message
* @param String closeMessage
*
* @public
*/
setCloseMessage : function(closeMessage)
{
this.closeMessage = closeMessage;
}
// }}}
,
// {{{ setDisableTooltipMessage()
/**
*
*
* Specify disable tooltip message at the bottom of the tooltip
* @param String disableTooltipMessage
*
* @public
*/
setDisableTooltipMessage : function(disableTooltipMessage)
{
this.disableTooltipMessage = disableTooltipMessage;
}
// }}}
,
// {{{ setTooltipDisablePossibility()
/**
*
*
* Specify whether you want the disable link to appear or not.
* @param Boolean disableTooltipPossibility
*
* @public
*/
setTooltipDisablePossibility : function(disableTooltipPossibility)
{
this.disableTooltipPossibility = disableTooltipPossibility;
}
// }}}
,
// {{{ setCookieName()
/**
*
*
* Specify name of cookie. Useful if you're using this script on several pages.
* @param String newCookieName
*
* @public
*/
setCookieName : function(newCookieName)
{
this.cookieName = newCookieName;
}
// }}}
,
// {{{ setTooltipWidth()
/**
*
*
* Specify width of tooltip
* @param Int newWidth
*
* @public
*/
setTooltipWidth : function(newWidth)
{
this.tooltipWidth = newWidth;
}
// }}}
,
// {{{ setArrowVisibility()
/**
*
*
* Display arrow at the top or at the left of the tooltip?
* @param Boolean displayArrow
*
* @public
*/
setArrowVisibility : function(displayArrow)
{
this.displayArrow = displayArrow;
}
// }}}
,
// {{{ setTooltipBgColor()
/**
*
*
* Send true to this method if you want to be able to save tooltip visibility in cookie. If it's set to true,
* It means that when someone returns to the page, the tooltips won't show.
*
* @param Boolean disableTooltipByCookie
*
* @public
*/
setDisableTooltipByCookie : function(disableTooltipByCookie)
{
this.disableTooltipByCookie = disableTooltipByCookie;
}
// }}}
,
// {{{ setTooltipBgColor()
/**
*
*
* This method specifies background color of tooltip
* @param String newBgColor
*
* @public
*/
setTooltipBgColor : function(newBgColor)
{
this.tooltipBgColor = newBgColor;
}
// }}}
,
// {{{ setTooltipCornerSize()
/**
*
*
* Size of rounded corners around tooltip
* @param Int newSize (0 = no rounded corners)
*
* @public
*/
setTooltipCornerSize : function(tooltipCornerSize)
{
this.tooltipCornerSize = tooltipCornerSize;
}
// }}}
,
// {{{ setTopArrowHeight()
/**
*
*
* Size height of arrow at the top of tooltip
* @param Int arrowTopHeight
*
* @public
*/
setTopArrowHeight : function(arrowTopHeight)
{
this.arrowTopHeight = arrowTopHeight;
}
// }}}
,
// {{{ setRightArrowWidth()
/**
*
*
* Size width of arrow when the tooltip is on the right side of inputs
* @param Int arrowTopHeight
*
* @public
*/
setRightArrowWidth : function(arrowRightWidth)
{
this.arrowRightWidth = arrowRightWidth;
}
// }}}
,
// {{{ setPageBgColor()
/**
*
*
* Specify background color of page.
* @param String pageBgColor
*
* @public
*/
setPageBgColor : function(pageBgColor)
{
this.pageBgColor = pageBgColor;
}
// }}}
,
// {{{ __hideTooltip()
/**
*
*
* This method displays the tooltip
*
*
* @private
*/
__displayTooltip : function()
{
if(DHTMLgoodies_globalTooltipObj.disableTooltipByCookie){
var cookieValue = DHTMLgoodies_globalTooltipObj.getCookie(DHTMLgoodies_globalTooltipObj.cookieName) + '';
if(cookieValue=='1')DHTMLgoodies_globalTooltipObj.tooltipDisabled = true;
}
if(DHTMLgoodies_globalTooltipObj.tooltipDisabled)return; // Tooltip disabled
var tooltipText = this.getAttribute('tooltipText');
DHTMLgoodies_globalTooltipObj.activeInput = this;
if(!tooltipText)tooltipText = this.tooltipText;
DHTMLgoodies_globalTooltipObj.tooltipText = tooltipText;
if(!DHTMLgoodies_globalTooltipObj.tooltipDiv)DHTMLgoodies_globalTooltipObj.__createTooltip();
DHTMLgoodies_globalTooltipObj.__positionTooltip(this);
DHTMLgoodies_globalTooltipObj.tooltipContentDiv.innerHTML = tooltipText;
DHTMLgoodies_globalTooltipObj.tooltipDiv.style.display='block';
if(DHTMLgoodies_globalTooltipObj.isMSIE){
if(DHTMLgoodies_globalTooltipObj.tooltipPosition == 'below'){
DHTMLgoodies_globalTooltipObj.tooltipIframeObj.style.height = (DHTMLgoodies_globalTooltipObj.tooltipDiv.clientHeight - DHTMLgoodies_globalTooltipObj.arrowTopHeight);
}else{
DHTMLgoodies_globalTooltipObj.tooltipIframeObj.style.height = (DHTMLgoodies_globalTooltipObj.tooltipDiv.clientHeight);
}
}
}
// }}}
,
// {{{ __hideTooltip()
/**
*
*
* This function hides the tooltip
*
*
* @private
*/
__hideTooltip : function()
{
try{
DHTMLgoodies_globalTooltipObj.tooltipDiv.style.display='none';
}catch(e){
}
}
// }}}
,
// {{{ getSrcElement()
/**
*
*
* Return the source of an event.
*
*
* @private
*/
getSrcElement : function(e)
{
var el;
if (e.target) el = e.target;
else if (e.srcElement) el = e.srcElement;
if (el.nodeType == 3) // defeat Safari bug
el = el.parentNode;
return el;
}
// }}}
,
// {{{ __autoHideTooltip()
/**
*
* Automatically hide the tooltip when users click someplace on the page but not on tooltip inputs
*
* @private
*/
__autoHideTooltip : function(e)
{
if(document.all)e = event;
var src = this.getSrcElement(e);
if(src.tagName.toLowerCase()!='input' && src.tagName.toLowerCase().toLowerCase()!='textarea' && src.tagName.toLowerCase().toLowerCase()!='select')this.__hideTooltip();
var attr = src.getAttribute('tooltipText');
if(!attr)attr = src.tooltipText;
if(!attr){
this.__hideTooltip();
}
}
// }}}
,
// {{{ __hideTooltipFromLink()
/**
*
*
* This function hides the tooltip
*
*
* @private
*/
__hideTooltipFromLink : function()
{
this.activeInput.focus();
window.refToThis = this;
setTimeout('window.refToThis.__hideTooltip()',10);
}
// }}}
,
// {{{ disableTooltip()
/**
*
*
* Hide tooltip and disable it
*
*
* @public
*/
disableTooltip : function()
{
this.__hideTooltipFromLink();
if(this.disableTooltipByCookie)this.setCookie(this.cookieName,'1',500);
this.tooltipDisabled = true;
}
// }}}
,
// {{{ __positionTooltip()
/**
*
*
* This function creates the tooltip elements
*
*
* @private
*/
__createTooltip : function()
{
this.tooltipDiv = document.createElement('DIV');
this.tooltipDiv.style.position = 'absolute';
if(this.displayArrow){
var topDiv = document.createElement('DIV');
if(this.tooltipPosition=='below'){
topDiv.style.marginLeft = '20px';
var arrowDiv = document.createElement('IMG');
arrowDiv.src = this.imagePath + this.arrowImageFile + '?rand='+ Math.random();
arrowDiv.style.display='block';
topDiv.appendChild(arrowDiv);
}else{
topDiv.style.marginTop = '5px';
var arrowDiv = document.createElement('IMG');
arrowDiv.src = this.imagePath + this.arrowImageFileRight + '?rand='+ Math.random();
arrowDiv.style.display='block';
topDiv.appendChild(arrowDiv);
topDiv.style.position = 'absolute';
}
this.tooltipDiv.appendChild(topDiv);
}
var outerDiv = document.createElement('DIV');
outerDiv.style.position = 'relative';
outerDiv.style.zIndex = 1000;
if(this.tooltipPosition!='below' && this.displayArrow){
outerDiv.style.left = this.arrowRightWidth + 'px';
}
outerDiv.id = 'DHTMLgoodies_formTooltipDiv';
outerDiv.className = 'DHTMLgoodies_formTooltipDiv';
outerDiv.style.backgroundColor = this.tooltipBgColor;
this.tooltipDiv.appendChild(outerDiv);
if(this.isMSIE){
this.tooltipIframeObj = document.createElement('IFRAME');
this.tooltipIframeObj.name='tooltipIframeObj';
this.tooltipIframeObj.width = this.tooltipWidth;
this.tooltipIframeObj.frameBorder='no';
this.tooltipIframeObj.src='about:blank';
this.tooltipIframeObj.style.position = 'absolute';
this.tooltipIframeObj.style.top = '0px';
this.tooltipIframeObj.style.left = '0px';
this.tooltipIframeObj.style.width = (this.tooltipWidth) + 'px';
this.tooltipIframeObj.style.zIndex = 100;
this.tooltipIframeObj.background = this.pageBgColor;
this.tooltipIframeObj.style.backgroundColor= this.pageBgColor;
this.tooltipDiv.appendChild(this.tooltipIframeObj);
if(this.tooltipPosition!='below' && this.displayArrow){
this.tooltipIframeObj.style.left = (this.arrowRightWidth) + 'px';
}else{
this.tooltipIframeObj.style.top = this.arrowTopHeight + 'px';
}
setTimeout("self.frames['tooltipIframeObj'].document.documentElement.style.backgroundColor='" + this.pageBgColor + "'",500);
}
this.tooltipContentDiv = document.createElement('DIV');
this.tooltipContentDiv.style.position = 'relative';
this.tooltipContentDiv.id = 'DHTMLgoodies_formTooltipContent';
outerDiv.appendChild(this.tooltipContentDiv);
var closeDiv = document.createElement('DIV');
closeDiv.style.textAlign = 'center';
closeDiv.innerHTML = '<A class="DHTMLgoodies_formTooltip_closeMessage" href="#" onclick="DHTMLgoodies_globalTooltipObj.__hideTooltipFromLink();return false">' + this.closeMessage + '</A>';
if(this.disableTooltipPossibility){
var tmpHTML = closeDiv.innerHTML;
tmpHTML = tmpHTML + ' | <A class="DHTMLgoodies_formTooltip_closeMessage" href="#" onclick="DHTMLgoodies_globalTooltipObj.disableTooltip();return false">' + this.disableTooltipMessage + '</A>';
closeDiv.innerHTML = tmpHTML;
}
outerDiv.appendChild(closeDiv);
document.body.appendChild(this.tooltipDiv);
if(this.tooltipCornerSize>0){
this.roundedCornerObj = new DHTMLgoodies_roundedCorners();
// (divId,xRadius,yRadius,color,backgroundColor,padding,heightOfContent,whichCorners)
this.roundedCornerObj.addTarget('DHTMLgoodies_formTooltipDiv',this.tooltipCornerSize,this.tooltipCornerSize,this.tooltipBgColor,this.pageBgColor,5);
this.roundedCornerObj.init();
}
this.tooltipContentDiv = document.getElementById('DHTMLgoodies_formTooltipContent');
}
// }}}
,
addEvent : function(whichObject,eventType,functionName)
{
if(whichObject.attachEvent){
whichObject['e'+eventType+functionName] = functionName;
whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );}
whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] );
} else
whichObject.addEventListener(eventType,functionName,false);
}
// }}}
,
__positionCurrentToolTipObj : function()
{
if(DHTMLgoodies_globalTooltipObj.activeInput)this.__positionTooltip(DHTMLgoodies_globalTooltipObj.activeInput);
}
// }}}
,
// {{{ __positionTooltip()
/**
*
*
* This function positions the tooltip
*
* @param Obj inputObj = Reference to text input
*
* @private
*/
__positionTooltip : function(inputObj)
{
var offset = 0;
if(!this.displayArrow)offset = 3;
if(this.tooltipPosition=='below'){
this.tooltipDiv.style.left = this.getLeftPos(inputObj)+ 'px';
this.tooltipDiv.style.top = (this.getTopPos(inputObj) + inputObj.offsetHeight + offset) + 'px';
}else{
this.tooltipDiv.style.left = (this.getLeftPos(inputObj) + inputObj.offsetWidth + offset)+ 'px';
this.tooltipDiv.style.top = this.getTopPos(inputObj) + 'px';
}
this.tooltipDiv.style.width=this.tooltipWidth + 'px';
}
,
// {{{ getTopPos()
/**
* This method will return the top coordinate(pixel) of an object
*
* @param Object inputObj = Reference to HTML element
* @public
*/
getTopPos : function(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML'){
returnValue += inputObj.offsetTop;
if(document.all)returnValue+=inputObj.clientTop;
}
}
return returnValue;
}
// }}}
,
// {{{ getLeftPos()
/**
* This method will return the left coordinate(pixel) of an object
*
* @param Object inputObj = Reference to HTML element
* @public
*/
getLeftPos : function(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML'){
returnValue += inputObj.offsetLeft;
if(document.all)returnValue+=inputObj.clientLeft;
}
}
return returnValue;
}
,
// {{{ getCookie()
/**
*
* These cookie functions are downloaded from
* http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*
* This function returns the value of a cookie
*
* @param String name = Name of cookie
* @param Object inputObj = Reference to HTML element
* @public
*/
getCookie : function(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// }}}
,
// {{{ setCookie()
/**
*
* These cookie functions are downloaded from
* http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*
* This function creates a cookie. (This method has been slighhtly modified)
*
* @param String name = Name of cookie
* @param String value = Value of cookie
* @param Int expires = Timestamp - days
* @param String path = Path for cookie (Usually left empty)
* @param String domain = Cookie domain
* @param Boolean secure = Secure cookie(SSL)
*
* @public
*/
setCookie : function(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}
// }}}
}
</script>
2. Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form field tooltip</title>
<style type="text/css">
body{
background-color:#EEE;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
fieldset{
width:720px;
}
</style>
<link rel="stylesheet" href="css/form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="js/rounded-corners.js"></script>
<script type="text/javascript" src="js/form-field-tooltip.js"></script>
</head>
<body>
<div id="mainContainer">
<fieldset>
<legend>Description</legend>
<div>This is a demo of the form field tooltip script. The tooltip is being displayed when you move focus to one of the inputs on the page.</div>
</fieldset>
<fieldset>
<legend>Form field tooltip example</legend>
<table>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box"></td>
</tr>
<tr valign="top">
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" tooltipText="This is the box for the address"></textarea></td>
</tr>
<tr valign="top">
<td>Nationality</td>
<td><select style="width:300px"><option>It covers this select box in IE</option></select></td>
</tr>
</table>
</fieldset>
</div>
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>
</body>
</html>
扫一扫
6
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
