JQuery powerfloat Universal floating layer lower pull layer plug-in use introduction _jquery

First, the reasons for writing Plug-ins

Why want to write this plugin, think about it, boil down to a word: "lazy." Do not want to clearly two similar functions to write code, this should be tea to see the beauty of leisure time sloshing in this can be avoided code, for me, is to waste their youth. So, simply, bang, put these similar functions together, a plug-in to fix, it. This feeling is like "Dahua West Tour" in Wu empty slap dead monk this fly. So, the similar functions mentioned here refer to? When when, is a floating layer that has a position relationship with an element (such as tip class effect, the mouse is shown by a larger image, a drop-down list, and so on).

Second, plug-in overview

The plug-in name is Jquery-powerfloat.js. //zxx: I used to like "." Connection and found that there was a problem when using the combo merge script, and now use the "-" connection name.

Powerfloat as implies meaning is "strong floating". Using library jquery, the size of 20K multiple points, the use of yuicompressor compression after the size of binary, is the largest number of code written by the most of the plug-ins.

Support hover, click, focus and no event triggers, supports up to 12 kinds of positions, automatically adjust out of bounds, support page element loading, Ajax loading, drop-down list, hint layer effect, tip class effect, customizable loading container, built-in UI good loading container, support mouse follow etc.

Third, demo and download

Demo
You can ruthlessly click here: Universal Floating plugin powerfloat test page

Below for the demo page in the mouse through the display large picture effect screenshot:

Download
JS file Download: jquery-powerfloat.js (uncompressed) or jquery-powerfloat-min.js (compressed)
Zip package Download: Jquery-powerfloat.zip

ZXX: Download All right key –[target | link] Save As

Four, how to use

The use of very simple, unified mode, is the $(选择器).powerFloat({..}); specific use of the following:

First, don't forget to load the CSS file as follows:

<link rel= "stylesheet" href= "Http://www.zhangxinxu.com/study/css/powerFloat.css" type= "Text/css"/>

Then, the jquery library is loaded on the page and the Jquery-powerfloat.js file for this article is as follows:

<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" >< /script><script type= "Text/javascript" src= "Http://www.zhangxinxu.com/study/js/jquery-powerFloat.js" > </script>

Let's say there is a link on the page with the HTML as follows:

<a id= "Trigger" href= "javascript:;" rel= "Targetbox" > Passed me </a>

The

$ ("#trigger"). Powerfloat ();

It's OK. The effect of this code implementation is that the mouse through the "I" text link, will be shown below the page id "targetbox" elements (see the first example of the demo page).

If you want to generalize this plugin with a few keywords, it's just the trigger element (trigger, the Selector-bound object), the trigger event (the EventType in the API), the floating element (target, the elements that are captured in various ways), and the location (target location). In the following, the term trigger refers to the trigger element, and target refers to a floating element.

Because the plug-in collection has more functionality, the rules are slightly more specific, as shown in the following API table, followed by a detailed explanation. There's not much to say here.

Five, API parametersJQuery Powerfloat Plug-in API parameters
Name of parameterDefault valueInterpretation notesWidth "Auto" Other optional parameters: "Inherit", Value (px) (percentage, etc.), "Auto" table width automatically, "Inherit" table width is the same as the method trigger element width offsets{x:0, y:0} floating layer offset value. can be positive and negative. If positive, the lower-right element is offset, and the upper-left element is offset. The offset direction is a diffuse zIndex999 floating box level. The plug-in comes with a small triangular level of 999+1, the value is always large 1eventType "hover" other optional parameters: "Click", "Focus", if the parameter is other, the binding trigger floating layer display and positioning ShowDelay0 event type (EventType) is "Hover" when the floating layer shows the delay time, the unit millisecond HideDelay0 mouse out of the object when the floating layer hide Latency hoverholdtrue Boolean, whether the floating layer mouse hover. If False, as long as the mouse moves out of the triggering element, the floating layer is hidden hoverfollowfalse other optional parameters: True, "X", "Y". Whether the mouse follows. "X" indicates that only the horizontal direction follows, "Y" is vertical, true or other parameters follow TargetMode "common" strings in any direction, and keyword parameters include: "Ajax", "List", "remind". Represents the type of floating layer Targetnull floating layer content source, select the source, depending on targetmode, the parameter types are also different targetattr "rel" Custom label properties. It is also a floating layer content source that can be used as an element ID, or as a string Containernulljquery object, to reprint a floating layer container, and if TargetMode is customized, you can use the "plugin" keyword, Represents the use of a plug-in with a container Reversesharpfalse Boolean. The sharp corner shows whether it is reversed. The default Ajax, remind is the display triangle, other such as list and custom form is not displayed position "4-1" floating layer display position. This rule is slightly more complex, with the following detailed Edgeadjusttrue Boolean type. If the floating layer is outside the display, whether to adjust the floating layer position Showcall$.noop floating layer display when the callback function Hidecall$.noop floating layer hidden time callback function

(Create by Zhangxinxu 2010-12-15)

Vi. detailed explanation of API parameters

Plug-ins can be implemented more functions, support more events, but also the use of refined API,API rules naturally more, complex. However, once you know the rules, the work will be very relaxed and you will find that life is beautiful.

1. Width
The width value is the same as some values in the Width property in the CSS.

The width here can also be "auto" (default), "Inherit", and a specific width value. However, what is different here is "inherit", which inherits not the width of the parent label but the width of the inherited trigger element. For example, my mouse moves a label on a text link, the result shows the floating layer, if the width parameter set the value is "inherit", then the width of the floating layer is the width of this a label. This property is useful under the equal-width drop-down list.

2. Offsets
The offset value relative to the target location. The default is {x:0, y:0}, where x represents a horizontal offset, and y indicates a vertical offset. Depending on the position of the floating layer (target) and the trigger element (trigger), the offsets bias is also different, and the left and upper position offsets are shifted above the left, and if the floating layer and the trigger element are in contact with the right and the lower position, The offsets value represents the lower right offset, which is roughly the following figure:

Just realize that the offsets offset here is offset by the trigger element (trigger) as the reference point. Trigger position fixed, target relative offset, centered by trigger, radial offset. For example, if offsets.x = 10, then if the floating layer is on the right, then the right offset 10 pixels, if the floating layer on the left offset 10 pixels.

3. ZIndex
The level of the floating layer, the floating layer is the absolute positioning, so there is a hierarchy, the default size is 999. The small triangle in the plugin's own UI is also absolutely positioned, its level is higher than the floating layer, so the default level of the small triangle is 1000.

4. EventType
Event type, in general, this parameter is nothing more than these: "Hover" (default), "click", "Focus" and null, where "hover" means the mouse hover and move out events, "Click" Means click event, "focal" means to get the focused event, Applies to form elements, null means no event, that is, trigger binds the Powerfloat method to trigger, which is useful for clicking on the a element, but for showing the hint on the B element.

5. Showdelay
Displays the delay. This parameter is only useful when EventType is "hover", "click" and "Focus" are not deferred. The unit millisecond, which takes effect when an integer greater than 0 (using the custom tip effect in the demo).

6. Hidedelay
Mouse move out of delay. This parameter is only useful if EventType is "hover". There are two cases where the default is Hidedelay, and the first is that when the Hoverhold parameter is true, there is a 200-millisecond hidden delay, and the other is when EventType is "focus," and it is hidden, Also has a 200 millisecond delay shutdown (Protection click event).

7. Hoverhold
Whether the floating layer is still displayed when the mouse passes through a floating layer. This parameter is only useful if EventType is "hover". False indicates that once the mouse leaves trigger (the triggering element), target (floating Element) is hidden (using the custom tip effect in the demo).

8. Hoverfollow
Whether the mouse follows. The arguments can be false,true and the keyword "x", "Y", where false is the default value, indicating no mouse follow, "x" means only horizontal mouse follow, "Y" means only vertical direction, whether "X" or "Y", the floating layer does not overlap with the triggering element, Just a one-way position to move. However, if Hoverfollow is true, it is the true meaning of the mouse to follow, Target's upper left corner will be followed by the mouse, will overlap with trigger, note that at this time should be set a certain offsets value, otherwise it will be because of the proximity of the mouse position and the reason, Repeatedly triggers the mouse to move into the move out of the event, if the browser performance is not good enough, watch out for the page is dangling.

9. TargetMode
Floating layer type. The string parameter. Built-in keyword parameters are: "Common", "Ajax", "List", "remind". Where "common" is the default, the element that loads the page is the floating layer itself; "Ajax" is the loading of external elements, such as pictures, HTML fragments, and so on, the default use of built-in containers, including loading effect; "List" is specifically used as a drop-down list; "Remind" is a hint , the content can only be text or a string containing HTML code. The powerful thing about this plug-in is that you can customize the floating layer type. For example, in the demo, my own custom tip type, how to define, how to write style completely depends on your design and page requirements. Then, positioning, loading, and so on all to the plug-in, which will be separately described later.

Target
A very important and most commonly used parameter is the content source of the floating layer, even the floating layer itself (TargetMode is part of the common). The default is NULL, because the target parameter is one of the two floating-layer content acquisition sources of the plug-in and is the preferred source, so when target is null, the plug-in fetches the content from the next parameter targetattr. Depending on the TargetMode parameter, the type of target is also changed.

Targetattr.
Another way to get the contents of a floating layer, if the target parameter is explicitly obtained, then TARGETATTR is implicitly acquired. This parameter gets the order after target, which is the content of the floating layer by triggering the parameters of the element's own label attributes or what the value is. The default is that the Rel,rel property is a legitimate attribute of the a label and is therefore commonly used. Although the targetattr type can only be a string, the value corresponding to the attribute on the label is also associated with TargetMode. For example, in "common" mode, the value can only be an element ID, and "Ajax" mode can only be an address. So, combined with the "target" argument above, I listed a table that explicitly target/targetattr parameter assignable types in different targetmode modes.

The values of target and targetattr parameters under different TargetMode
TargetModeTargetTargetattrCommonjquery object or the ID of the selector elementAjaxPicture or page address picture or page addressListArray, or {href: ", text:"} Format object array is invalidRemindstring, generic text, or HTML fragment string, generic text, or HTML fragment stringOther (others)jquery object or selector, or string, or HTML fragment selector, element ID, or literal string

(Create by Zhangxinxu 2010-12-15)

Container
jquery objects (required on the current page), reprint the floating layer of the container, if TargetMode customization, you can use the "plugin" keyword, indicating the use of plug-ins from the container (will display the triangle).

Reversesharp
A clever way to display and not to display triangles. This parameter means an inversion of the current trigonometric usage rules. Now the default triangulation rule is: The triangle is displayed only when TargetMode is "Ajax" and "remind", and no case shows the triangle pointing effect within the plug-in. However, if you feel that this triangle is very well, you want to use it on your own custom floating layer, you can use the Reversesharp parameter to show that the triangular center positioning plugin has already done it for you. Or if you want to use your new box to load floating content with Ajax, and you don't need the triangle, you can use the Reversesharp argument so that it doesn't show. Here are a number of times the triangle refers to (see the following figure):

Position
Looks simple, actually the most disturbing one parameter. It's a set of rules that you set yourself in order to be more adaptable to all situations. At first I tried to use slide-left as a string keyword to represent each position, but actually found that trigger and target are all too many locations, and that several English strings are not represented at all, and are not very container in implementation. So I developed a set of easy to understand the positioning rules, using digital representation position. Its parameter value format must be a "number-number" format of the string, the middle of the divider line "-" is separated, where the first number represents the trigger element trigger position, the latter number represents the location of the floating element target, that is, "trigger-target." So what's important now is to know what the numbers are for each position of the element. Each position of the element corresponds to the following figure:

The four corners are in the order of the CSS margin/padding properties, followed by 1, 2, 3, 4, while the center of the Quad is 5, 6, 7, 8 in the clockwise direction. Both the trigger element and the target element follow this location rule. Thus, the plugin default position parameter "4-1″ is the position shown in the following figure:

The 4 position of the trigger coincides with the target's 1-bit location. Wow, you're smart. You may realize that there are 64 different ways of setting up each element in 8 locations (mathematically degraded, incorrectly welcomed). It is true that 64 kinds of situations are going to kill people, so considering the actual usage and simplifying the type of layout, you have developed a layout rule to reduce the possible layout, that is, the area has no overlap, the border overlaps, the center is centered on the rule.

Area without overlap refers to the vertical orientation of the layout element body without overlapping (regardless of the offsets offset), for example, the following figure ("1-1″") is not within the rule:

The so-called "border overlap" is to have border lines overlap, so the following situation ("3-1″) is not in the rules:

Centering centered means that the center point of the border is only for the center point of the border, so the following situation is not in the rule:

Therefore, actually the legal layout for the following 12, "4-1″," 1-4″, "5-7″," 2-3″, "2-1″," 6-8″, "3-4″," 4-3″, "8-6″," 1-2″, "7-5″," 3-2″, all other layout types will be reset to the default "4-1″

Edgeadjust
Boolean value, according to the set position parameters, if the position of the floating layer out of the screen, reposition. The default is true, which indicates relocation. The relocation rules here are also more complex, but for the user, there is no point in understanding the rules here, so there is no narrative here. This parameter is greatly weakened when hoverfollow is true, or when the position keyword is positioned.

Showcall
The callback function displayed by the floating layer. Inside the callback function $ (this) represents the current trigger and also supports a parameter that represents the current target.

Hidecall
The callback function that is executed when the floating layer is hidden. Inside the callback function $ (this) represents the current trigger.

Vii. Other important notes

1. Color of Triangle
In order to match the container's border and background colors, the triangle color is automatically looking for a consistent color on the container. Also, the choice of triangular color is directional, such as the triangle shown above, only detects whether there is a bottom border color, but not the wrong selection of the color value of the top border. Therefore, when you use a custom container, you do not have to worry about the color of the container is inconsistent with the color of the triangle of the plug-in, even if you set the top and bottom four border color does not matter. If you cannot find a border color or a background color, the triangle is not displayed.

2. Class name of the secret

Naming rules for ①class
This plug-in is a bit bad, is the class name embedded in the JS code, but, I think it's okay, want to put it all difficult. All plug-in function-related class names are connected by an underscore ("_") and all names are prefixed with "float". For example: "Float_ajax_image", "Float_remind_box" and so on.

Class naming of ② containers
If it is not the "common" type and the following container parameter is NULL, the plug-in automatically creates a container outer frame that automatically comes with an ID, named format "Floatbox_" + TargetMode, and a class, Named format is: "Float_ ' + targetmode + ' _box", for example, if the list type, the container div will be:

<div id= "floatbox_list" class= "Float_list_box" ></div>

You can find styles such as "Float_ajax_box", "Float_remind_box", and so on, in the powerfloat.css that come with the plug-in, which is a floating layer for TargetMode "Ajax" and "remind" types. Of course, the class of the container is supported by customization. For example, if you set the value of TargetMode to tip, you can write your own custom container style for class name Float_tip_box. For example, the following:

. float_tip_box {line-height:18px padding:0 3px; Background-color: #ffffe0;-moz-box-shadow:1px 1px 2px rgba (0, 0, 0, .4); -webkit-box-shadow:1px 1px 2px rgba (0, 0, 0,. 4); box-shadow:1px 1px 2px rgba (0, 0, 0,. 4); border:1px solid #333; Position:absolute;}

This is the custom tip effect of the demo page, the external box style. This effect is only an example, to launch your unlimited creativity, with the help of the Powerfloat plug-in, what kind of floating UI effects to achieve basically can be achieved.

③ Plugin Hidden class
This plugin also hides a lot of available class names, as you can see in the following table:

Class nameRoleFloat_loadingajax request content to wait for prompt content box float_ajax_imageajax The requested picture float_ajax_dataajax the content box loaded after the request to the data float_ajax_ Errorajax request After the problem content box Float_list_ul drop-down list box float_list_li_first The first Li tag in the Drop-down list float_list_li_last the last Li tag in the Drop-down list Float_ List_a a classfloat_list_null drop-down list with a tab in a link drop-down list when no data is included in the box

3. Data for Target parameters in "list" mode
When TargetMode is "list", the data source comes from Target only, and this target parameter must be an array, otherwise no floating layer appears. The contents of an array can be either a string or an object literal. If it is a string, the content is loaded directly into the LI tag, for example:

Target: ["Tang Lixia", "Xu Pillars", "Chengxia", "Wang Qing Hua", "Plum Blossom", "Zhu Xiaoli", "Fang Fangjuan", "Ji Hui Xiu", "Chen Yang", "more >>"]

As you can see, the last "more" links are also loaded directly into the list. If you are using an object literal, the literal property name is set to dead. The fixed format is as follows:

{href: "http://www.zhangxinxu.com/", Text: "Cloud-dwelling community"}

The plugin automatically looks for text content and links, and a piece of a-tag HTML fragment is placed into the Li tag, and the HTML of the object literal shown above will be:

<li><a href= "http://www.zhangxinxu.com/" class= "float_list_a" > Cloud-dwelling Community </a></li>

As a result, an array of objects forms a list of links, so a drop-down menu is formed.

4. The Open API approach
Unlike the previous Zxxbox frame plug-ins, the plug-ins here are basically all of the methods I have private, the outside is inaccessible. In addition to: wrapper. Poaerfloat (); Outside, only one developed API method is reserved, which is $.powerFloat.hide(); to hide the currently displayed floating layer. The use of this method is reflected in the demo page.

Eight, more practical point of instance application

Demo In spite of some examples, but after all, in order to test the plug-in function of the test, whether in the actual application can shine also let people doubt, therefore, I have some large well-known sites in the country casually find a few on the floating layer of interaction, See how this powerfloat plug-in can be implemented conveniently.

1. Taobao's top subordinates pull
The following figure is a screenshot of the Taobao station's pull effect:

And I use my own write Powerfloat plug-in can be more convenient to achieve the above effect, the effect of the following screenshot:

You can ruthlessly click here: powerfloat to realize the list of Taobao dropdown demo

This is where the default "hover" event is used, and the plugin comes with the list dropdown feature. Taobao implementation with the help of the tag nesting (dropdown content div written hidden under the label of the relative attribute), as well as manual position calculation (basically each drop has a certain position positioning), increased the amount of HTML code, CSS code, and workload. If all the floating effect of the same, natural relaxed a lot.

2. QQ Mailbox Custom Dropdown
The following picture for my QQ mailbox in the custom dropdown screenshot:

And I use my own write Powerfloat plug-in can be very convenient to achieve the above effect, the effect of the following screenshot:

You can ruthlessly click here: powerfloat implementation of QQ mailbox Custom dropdown Demo

Here you use the "click" event to load the element content in common mode (or you can use the list mode instead). Compared to the effect without pulling the drawing with the pull up animation, the main thing is to pull the drawing off the animation does not have a good impression, some long-winded; and the position is to be computed and relocated up and down, if the list on the top of the page display, appear Drop-down will be strange, all did not add under pull draw.

3. Everyone Network friend search box translucent hint
The following figure for Renren's original friend search Translucent box screenshot:

And I use my own write powerfloat plug-ins can be very very easy to achieve the same effect.

The calling code is as follows:

$ ("#navSearchInput"). Powerfloat ({eventtype: "Focus", TargetMode: "Search", Target: "Multiple keywords separated by spaces <br/> (example: Wang Yang Beijing University) "});

The final effect is screenshot below:

You can ruthlessly click here: powerfloat to achieve Renren search translucent hint Demo

This is a "focus" event that uses a custom floating mode ("search").

Ix. Conclusion

Some time ago, still in warm yang under the leisurely fishing, today on the snow, a long time this way, a sloshing is gone. This plug-in from the beginning to write to now will be released almost 10 days of time, usually have a lot of work on hand, so recently a period of time is relatively busy. CSS Relative/Absolute (Relative/absolute) Positioning series There are at least three articles backlog is not written, personal sites to do WAP version. So, it was a very busy year ago.

Sorry, every article to the end of the time can not help to make a small grumble, soothing their own little emotions. I make a simple comment on the powerfloat plugin I wrote: Originally conceived when the time will be excited, feel very fork, what floating layer can be a plug-in implementation; But now it's implemented, but it's not exciting because it seems to be powerful, but the rules are complicated, The cost of learning has become higher, at the same time, the plugin itself is limited by a lot of places, for example, due to a variety of layout situation, can not casually add the pull drawing effect. Things have two sides, advantages and disadvantages. Sometimes I feel good things others are not necessarily good, like watching Japanese love action movies people cool, do not necessarily cool people.

In terms of code quality, there are still a number of areas that deserve improvement, such as the handling of this protection. In terms of learning, the harvest is still not small, first of all, the use of this in the object literal has a further understanding of the data properties of jquery (combined with the HTML5 in the data-) has a more perceptual understanding.

Although these two days of continuous testing found a lot of bugs and has been repaired, but after all, is a person, time and energy is limited, and not a professional test engineer, the key is their own JS skill is still very immature, so plug-ins will certainly have a lot of bugs. If you don't want to try out the plugin and find bugs or improvements, you're welcome to ask. You can communicate in the form of comments, or here, without much thanks.
Cloud-dwelling Community package download address Universal floating box plug-in test based on jquery