Extended a boot plug-in-tooltip & implement a boot-based expression Verification

Online Demo

Local download

(Check the original article if there are too many codes)

I love to work overtime.

This time I sent a form verification with boot when I first came into contact with boot. Let's extend the tooltip plug-in so that he can change the color.

In fact, it is quite simple, mainly focusing on the ability to read code.

The boot code is easy to write, and the ";" can be omitted, and its closure is also very interesting.

1. + Function ($ ){

2. } (Jquery );

This statement is equivalent

1. (Function ($ ){

2. }) (Jquery );

Less than one symbol, more frugal.

The external interface is normal:

....

Return is like a constructor, And. Each sets the method to each Dom instead of the DOM array. Here is a new tooltip method. All operations are mostly in this tooltip. prototype is applied to subdivide the method into segments. As far as possible, atomic methods are used as an object-oriented js method.

The general architecture is like this. What we need to do is add a parameter and then apply it to it.

First, add the following parameter to its default parameter:

....

Then, when we call the method, we also add this attribute:

....

Together:

....

This method will be called in the init method of tooltip:

....

Its internal content and arrows have specific names: $ tip and $ arrow; after searching for a long time, we thought we had the best color when inserting the content, so we had the following code:

....

In this way, the tooltip extension is ready.

Then we can use it for a simple form verification.

For the effect, see the code demonstration.

(Check the original article if there are too many codes)

Read the full text: extend a boot plug-in-tooltip & perform a boot-based expression Verification

Extended a boot plug-in-tooltip & implement a boot-based expression Verification