This effect itself is not very difficult, mainly in the program structure and expansion of some kung Fu, in order to use more convenient, can be used in more places.
Program features
1, the same hint box used in multiple trigger elements, only one instance;
2, display and hide respectively have the click Mode and trigger mode choice;
3, can set the delay display and hide;
4, there are 25 kinds of preset positioning positions;
5, we can customize the positioning on the basis of preset positioning;
6, can set adaptive window positioning;
Program Description
"Tip Object"
A Tip object is a container for displaying hints, which are represented by a tip property. This is not required, the program will be initialized to some of its settings.
First, set the following:
Copy Code code 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";
Where margin set to 0 is to avoid some positioning problems, using visibility to hide rather than display because the program needs to get Tip offsetwidth, offsetheight, You also need to set left and top to avoid scroll bars that appear as tip placeholders.
Because tip may be in other positioning elements, there are two offset correction parameters to be set:
Copy Code code 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;
Finally give the tip of the MouseOver plus an event, specific later to explain.
"Trigger Object"
Because in many cases it is a tip that corresponds to multiple places, the program references the way table is sorted and adds an Add method.
Once a tip is instantiated, the Add method can be used to add trigger objects to multiple triggering elements, with the _trigger property representing the current Trigger object.
An essential parameter of the Add method is the trigger element, which is the element that triggers the display tip.
You can also use the options parameter to customize the properties of the triggering object, including:
Properties: Default value//description
Copy Code code as follows:
ShowType: "Both",//Display mode
Hidetype: "Both",//Hidden Way
Showdelaytype: "Touch",//Show delay mode
Hidedelaytype: "Touch",//Hide delay mode
showdelay:300,//Display delay Time
hidedelay:300,//Hidden delay Time
Fixed: {},//anchored object
Onshow:function () {},//performed when displayed
Onhide:function () {}//when hidden
As a further explanation, these defaults can be modified when the program is initialized.
A classic application is to modify the tip in the onshow to the corresponding content of each trigger object.
There is also a Elem property to save the triggering element.
"Show and Hide"
One focus of the effect is to display and hide the prompts. The program displays and hides tip by setting the tip visibility whether it hidden.
Specific display and hidden programs in show and hide programs, as well as readyshow and readyhide programs, are mainly used to deal with delays.
One feature of this hint effect is that it remains displayed when you move the mouse over the tip.
To achieve this effect, write a mouseover to the tip:
This. Check (E.relatedtarget) && cleartimeout (This._timer);
Where the check program is used to determine relatedtarget is not an external element, that is, the mouse left the element is not an external element.
If it is an external element, it indicates that the current is a hidden delay phase, so just clear the timer to remove the hidden.
The external element here is the trigger element and the tip object itself and its internal elements.
This is a bit clumsy, then look at the check procedure is how to judge the understanding:
Copy Code code as follows:
return!this._trigger | |
! (
This. Tip = = = Elem | | This._trigger. Elem = = Elem | |
Contains (this. Tip, elem) | | Contains (This._trigger. Elem, Elem)
);
First of all, to determine whether the existence of _trigger, does not exist if the description is just beginning to trigger, but also as an external trigger.
The existence of the words to judge the passing of the element is not tip or trigger the element itself, and finally use contains to judge whether the tip or trigger elements inside.
PS: About contains please refer to the comparison document location here.
This is to determine whether the internal elements, the last to take the opposite is to determine whether the external elements.
"Click Mode"
The click Mode display refers to the display tip when the trigger element is clicked.
The following program is bound to the click event of the triggering element in the Add program:
Copy Code code 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, according to Clickshow to determine whether to click on the display, and then use Checkshow to detect whether the same trigger object.
The Checkshow program is this:
Copy Code code as follows:
if (trigger!== This._trigger) {
This. Hide (); This._trigger = trigger; return true;
else {return false;};
If it is not the same trigger object, the first trigger object is performed before the hide is cleaned, preventing the conflict, and then executing the readyshow to display it.
If it is the same trigger object, it indicates that the current is the delay hidden phase, the purge timer remains displayed.
Corresponding, the click of the way to hide is to click on the external elements of the time to hide tip.
In Readyshow, when the click is used to hide, the _fch is bound to the Click event of the document:
This. Istouch (trigger. Hidetype) && addevent (This._trigger. Elem, "Mouseout", this._fth);
Notice that the hidden binding event is placed in the readyshow instead of the show, as the latency may not have been displayed and triggered the hidden event.
Where _fch is a property that is defined during initialization, for adding and removing click-Behind events:
Copy Code code as follows:
THIS._FCH = Bindaseventlistener (this, function (e) {
if (this. Check (E.target) && this. Checkhide ()) {
This. Readyhide (this. Isclick (This._trigger. Hidedelaytype));
};
});
Note different from the click Display, because the binding is document, before hiding to determine whether the e.target is external elements.
Where Checkhide is the effect of checking that tip is currently hidden:
Copy Code code 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 hidden, clear the timer to remove the event on the line, do not need to execute hide.
"Trigger Mode"
The trigger is for mouseover and mouseout, and the process is similar to the way it is clicked.
The trigger display is the display of tip when the mouse enters the trigger element (triggering mouseover) from an external element.
The following program is bound to the MouseOver event of the triggering element in the Add program:
Copy Code code 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 way you click, you need to perform a checkshow, but the difference is that you will also use check to determine whether E.relatedtarget is an external object.
This is because mouseover may be triggered from the internal elements of the triggering element (including tip) or from the internal element bubbling, which does not require any action.
The corresponding, trigger-mode shadowing is when the mouse hides the tip when it leaves the trigger element or tip.
When Touchhide is true, the _fth is bound to the Mouseout event of the triggering element when Readyshow:
This. Istouch (trigger. Hidetype) && addevent (This._trigger. Elem, "Mouseout", this._fth);
At show, then bind to tip mouseout:
This. Isclick (trigger. Hidetype) && addevent (document, "click", This._fch);
The reason for the readyshow binding is as above, and the tip only needs to be bound when displayed.
Where _fth is similar to _FCH, a property that is defined during initialization to add and remove triggers for hidden events:
Copy Code code 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 is using e.relatedtarget when check.
"Trigger principle"
The above is from the point of view of the program to trigger the display and hidden process, but to really understand the words also need to do a detailed analysis.
The following is a flowchart that shows how to hide as an example of a triggered display:
Here is the text description:
1, waiting for the trigger to display;
2, enter the trigger element, if set delay, jump to 3, if not set delay, jump to 4;
3, the delay time, leaving to the external elements, clear the timer, return 1, over the delay time, jump to 4;
4, the implementation of the display program;
5, show tip status;
6, leaving the trigger element, if it is going into tip, jump to 7, if it is left to the external element, jump to 9;
7, keep the display state;
8, leaving tip, if it is to enter the trigger element, return 5, if it is left to the external element, jump to 9;
9, if set delay, jump to 10, if not set delay, jump to 11;
10, delay time, if you enter tip, clear the timer, return 7, if you enter the trigger element, clear the timer, return 5, over the delay time, jump to 11;
11, execute the Hidden program, return 1;
Again, the procedure should be able to understand the whole process, of course, may not be so good understanding.
This process is only a single case, many cases have to add some judgment.
It can be said that the process seems easy, but if you want to do an optimized process, the details of the place to consider may be unbearable.
The process of clicking is similar to that of the triggering method, and it is simpler, and there is no repetition here.
"Element Positioning"
Complete the show hidden, on to this program another focus, element positioning.
The program uses a getrelative function to obtain the results of positional parameters such as {left:100, top:200} by locating elements, reference elements, and Parameter objects.
The results are combined with the following positioning methods: Preset positioning, custom positioning, adaptive positioning.
The fixed property of the trigger object is used to hold the positional parameter object, including the properties:
Properties: Default value//description
Align: "ClientLeft",//Horizontal orientation
valign: "ClientTop",//Vertical orientation
customleft:0,//Custom left Positioning
customtop:0,//Custom Top Positioning
percentleft:0,//custom left percent positioning
percenttop:0,//Custom Top percent positioning
adaptive:false,//is adaptive positioning
reset:false//Relocation when adaptive positioning
Let's look at how to set the positioning through these properties.
"Preset positioning and custom positioning"
Preset positioning means using the 25 preset locations of the program to locate.
How did 25 positions come from? See the following specific demo:
Current 1/2 page 12 Next read the full text
