Page 1/2 of JavaScript floating location prompt implementation code

This effect is not very difficult in itself. It mainly takes some effort in program structure and expansion to make it easier to use and use it in more places.
Program features
1. When the same prompt box is used for multiple trigger elements, only one instance is needed;
2. Click and trigger modes are selected for display and hide respectively;
3. latency display and hiding can be set;
4. There are 25 preset positioning positions;
5. You can customize Positioning Based on preset positioning;
6. You can set adaptive window positioning;
Program description
Tip object]
The Tip object is the container used to display the prompt information, which is represented by the Tip property. There is no requirement for this. The program will perform some settings during initialization.
First, perform the following settings:
Copy codeThe Code is as follows:
Var css = this. _ cssTip;
Css. margin = 0;
Css. position = "absolute"; css. visibility = "hidden ";
Css. display = "block"; css. zIndex = 99;
Css. left = this. _ cssTip. top = "-9999px ";

Here, margin is set to 0 to avoid some locating problems. visibility is used to hide it instead of display because the program needs to obtain the offsetWidth and offsetHeight of the Tip, you also need to set left and top to avoid the scroll bars that appear due to the position occupied by the Tip.
Because Tip may be included in other positioning elements, you need to set two offset Correction parameters:
Copy codeThe Code is as follows:
Var iLeft = 0, iTop = 0, p = this. Tip;
While (p. offsetParent ){
P = p. offsetParent; iLeft + = p. offsetLeft; iTop + = p. offsetTop;
};
This. _ offsetleft = iLeft;
This. _ offsettop = iTop;

Add an event to the mouseover of the Tip.
[Trigger object]
In many cases, a Tip corresponds to multiple prompts, so the program adds an Add Method Based on the Table sorting method.
After a Tip is instantiated, you can use the Add method to Add trigger objects to multiple trigger elements. The _ trigger attribute is used in the program to indicate the current trigger object.
A required parameter of the Add method is the trigger element, that is, the element that triggers the display Tip.
You can also use the options parameter to customize the attributes of the trigger object, including:
Attribute: Default Value // description
Copy codeThe Code is as follows:
ShowType: "both", // Display Mode
HideType: "both", // hide Mode
ShowDelayType: "touch", // display delay Mode
HideDelayType: "touch", // hide the latency Mode
ShowDelay: 300, // display the delay time
HideDelay: 300, // hide the delay time
Fixed: {}, // locate the object
OnShow: function () {}, // executed during display
OnHide: function () {}// run when hiding

You can modify these default values during program initialization.
A classic application modifies the Tip to the corresponding content of each trigger object in onShow.
In addition, the Elem attribute saves the trigger element.
Show and hide]
The focus of the prompt effect is to display and hide the prompt information. The program displays and hides the Tip by setting whether the visibility of the Tip is hidden.
The specific Show and Hide Programs are included in the Show and Hide Programs, as well as the ReadyShow and ReadyHide programs, which are mainly used to handle latency.
One feature of this Tip effect is that when you move the mouse over the Tip, it will remain displayed.
To achieve this effect, write a program to the Tip mouseover:
This. Check (e. relatedTarget) & clearTimeout (this. _ timer );
The Check program is used to determine whether relatedTarget is an external element, that is, whether the elements left by the mouse are external elements.
If it is an external element, it indicates that it is currently a hidden delay phase. You only need to clear the timer to cancel the hidden phase.
The external element here refers to the trigger element and the element other than the Tip object itself and its internal element.
This is a bit difficult to understand. Let's see how the Check program judges:
Copy codeThe Code is as follows:
Return! This. _ trigger |
! (
This. Tip = elem | this. _ trigger. Elem = elem |
Contains (this. Tip, elem) | Contains (this. _ trigger. Elem, elem)
);

First, determine whether the _ trigger exists. If it does not exist, it indicates that it is triggered at the beginning, or as an external trigger.
If it exists, determine whether the transmitted element is a Tip or trigger element, and then use Contains to determine whether it is inside the Tip or trigger element.
Ps: For details about Contains, refer to the comparison document here.
In this way, the internal element is determined, and the inverse is to determine whether the external element is determined.
Click Mode]
Click Display means that the Tip is displayed when the trigger element is clicked.
In the Add program, the following program is bound to the click Event of the trigger element:
Copy codeThe Code is as follows:
AddEvent (elem, "click", BindAsEventListener (this, function (e ){
If (this. IsClick (trigger. ShowType )){
If (this. CheckShow (trigger )){
This. ReadyShow (this. IsClick (trigger. ShowDelayType ));
} Else {
ClearTimeout (this. _ timer );
};
};
}));

First, you can use ClickShow to determine whether to click the display, and then use CheckShow to check whether the same trigger object exists.
The CheckShow program is as follows:
Copy codeThe Code is as follows:
If (trigger! = This. _ trigger ){
This. Hide (); this. _ trigger = trigger; return true;
} Else {return false ;};

If it is not the same trigger object, execute Hide to clear the previous trigger object to prevent conflicts, and then execute ReadyShow to display it.
If it is the same trigger object, it indicates that the current delay is hidden, and the timer is cleared to maintain the display status.
Click mode hiding means to hide the Tip when you click an external element.
In ReadyShow, when hidden by clicking, _ fCH is bound to the click Event of the document:
This. IsTouch (trigger. HideType) & addEvent (this. _ trigger. Elem, "mouseout", this. _ fTH );
Note that the hidden binding event should be put in ReadyShow, rather than Show, because the hidden event may be triggered when the delay is not displayed.
_ FCH is an attribute defined during initialization. It is used to add and remove click-hide events:
Copy codeThe Code is as follows:
This. _ fCH = BindAsEventListener (this, function (e ){
If (this.Check(e.tar get) & this. CheckHide ()){
This. ReadyHide (this. IsClick (this. _ trigger. HideDelayType ));
};
});

Links are different from click-through display. It is determined that the file is hidden and you must first determine whether e.tar get is an external element.
Here, CheckHide is used to check whether the Tip is hidden:
Copy codeThe Code is as follows:
If (this. _ cssTip. visibility = "hidden "){
ClearTimeout (this. _ timer );
RemoveEvent (this. _ trigger. Elem, "mouseout", this. _ fTH );
This. _ trigger = null;
RemoveEvent (document, "click", this. _ fCH );
Return false;
} Else {return true ;};

If it is a hidden state, clear the timer to remove the event and do not need to execute Hide again.
[Trigger method]
The trigger method is for mouseover and mouseout, and the process is similar to the click method.
The trigger mode displays the Tip when the mouse moves from the external element to the trigger element (trigger mouseover.
The Add program binds the following program to the mouseover event of the trigger element:
Copy codeThe Code is as follows:
AddEvent (elem, "mouseover", BindAsEventListener (this, function (e ){
If (this. IsTouch (trigger. ShowType )){
If (this. CheckShow (trigger )){
This. ReadyShow (this. IsTouch (trigger. ShowDelayType ));
} Else if (this. Check (e. relatedTarget )){
ClearTimeout (this. _ timer );
};
};
}));

Similar to the click method, you also need to execute a CheckShow command. However, Check is also used to determine whether e. relatedTarget is an external object.
This is because mouseover may be triggered by entering from the internal elements of the trigger element (including the Tip) or bubbling of the internal element, which does not require any operation.
Correspondingly, trigger mode hiding means that the mouse hides the Tip when the trigger element or Tip leaves.
When TouchHide is true, _ fTH is bound to the mouseout event that triggers the element during ReadyShow:
This. IsTouch (trigger. HideType) & addEvent (this. _ trigger. Elem, "mouseout", this. _ fTH );
Bind to the Tip mouseout during Show:
This. IsClick (trigger. HideType) & addEvent (document, "click", this. _ fCH );
The reason for binding to ReadyShow is the same as that for the above reason, and the Tip is bound only when it is displayed.
_ FTH is similar to _ fCH and is also an attribute defined during initialization. It is used to add and remove hidden events to trigger the event:
Copy codeThe Code is as follows:
This. _ fTH = BindAsEventListener (this, function (e ){
If (this. Check (e. relatedTarget) & this. CheckHide ()){
This. ReadyHide (this. IsTouch (this. _ trigger. HideDelayType ));
};
});

The difference is that mouseout uses e. relatedTarget for Check.
[Trigger principle]
The above describes the process of triggering the display and hiding from the perspective of the program, but a detailed analysis is required to truly understand it.
The following flowchart uses the trigger mode to show hidden information:

The following is a text description:
1. Wait for the trigger to display;
2. Go to the trigger element. If latency is set, go to 3. If no latency is set, go to 4;
3. During the delay time, exit the external element, clear the timer, and return 1. When the delay time is exceeded, jump to 4;
4. Execute the display program;
5. The Tip status is displayed;
6. Exit the trigger element. If the trigger element enters Tip, it jumps to 7. If the trigger element leaves the external element, it jumps to 9;
7. Keep the display status;
8. Leave the Tip. If it is the trigger element, return 5. If it is the external element, jump to 9;
9. If latency is set, skip to 10. If no latency is set, skip to 11;
10. During the delay time, if Tip is entered, the timer is cleared, and 7 is returned. If the trigger element is entered, the timer is cleared, and 5 is returned. If the delay time is exceeded, it is jumped to 11;
11. Execute the hidden program and return 1;

Then compare the program to understand the entire process. Of course, it may not be so easy to understand.
This process is only a single case, and more judgment is required for multiple cases.
It can be said that this process may not be difficult, but if you want to optimize the process, the details to be considered may be unbearable.
The click method is similar to the trigger method, and is simpler.


[Element positioning]

After the display is hidden, another key point of the program is to locate the element.
The program uses a GetRelative function to obtain the location parameter results of {Left: 100, Top: 200} by locating elements, reference elements, and parameter objects.
The calculation results are combined with the following positioning Methods: preset positioning, custom positioning, and adaptive positioning.
The Fixed attribute of the trigger object is used to save the positioning parameter object, including the following attributes:
Attribute: Default Value // description
Align: "clientleft", // horizontal orientation
VAlign: "clienttop", // vertical Positioning
CustomLeft: 0, // custom left Positioning
CustomTop: 0, // custom top Positioning
PercentLeft: 0, // custom left percentage Positioning
PercentTop: 0, // custom top percentage Positioning
Adaptive: false, // Adaptive Positioning
Reset: false // whether to relocate when adaptive Positioning
Next, let's take a look at how to set positioning through these properties.


[Preset positioning and custom positioning]

Preset positioning means positioning using 25 preset positions of the program.
How did 25 locations come from? See the following demo: