JQuery plugin development study notes

Last Update:2017-01-13 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Class-level plug-in development

I understand it as follows: jQuery is a class, $ is the alias of jQuery, and $ ('selector ') is the jQuery object.

This plug-in is similar to adding a static method to the jQuery class. Then we can use the plug-in just like calling a static method in C. There are two ways to add static methods:

The code is as follows:

Copy code

JQuery. alert = function (){
Alert ("This is a prompt box for jQuery ");
}

JQuery. confirm = function (){
Confirm ("This is a JQuery prompt box ");
}

Corresponding call: $. alert (); $. confirm ();

The code for another method is as follows:

The code is as follows:	Copy code
JQuery. extend ({ Alert: function () {alert ("This is a prompt box for jQuery ");}, Confirm: function () {confirm ("This is a JQuery prompt box ");} });

This function is extended by using the extend method provided by jQuery. The called method is the same as above.

In addition, to avoid conflicts with other jQuery plug-ins, we can add our own namespace:

The code is as follows:	Copy code
JQuery. sample = { Alert: function () {alert ("This is a prompt box for jQuery ");}, Confirm: function () {confirm ("This is a JQuery prompt box ");} };

Call after namespace is added: $. sample. alert (); $. sample. confirm ();

2. Object-level plug-in development

The code is as follows:

Copy code

Note:
Var fn = function (para ){
// Code...
}
Fn (jQuery );

Define a method first, and then immediately execute this method
Advantages of this method: When writing the jQuery plug-in, you can also use the $ alias instead of causing conflicts with prototype.

*/
(Function ($ ){
$. Fn. extend ({
Hilight: function (options ){
Var opts = $. extend ($. fn. hilight. defauts, options );
This.css ("color", opts.color=.css ("background-color", opts. bgcolor );
}
});

$. Fn. hilight. defauts = {
Color: 'red ',
Bgcolor: 'white'
};
}) (JQuery );

This method is recommended by jQuery, and the advantage is in the comments section above.

In this code, we expose ULTS to allow users to directly access and set the defaults value. The advantage of this is that you can use it elsewhere after setting the default value, instead of passing parameters each time. Of course, we can still pass the parameter to change the default value set manually.

We can also use the same method of ULTS to expose some methods that can be extended by others. If we need to privatize a method or attribute, we only need to define it in the closure, instead of providing references

Here is a simple second-level menu plug-in. The html structure is as follows:
Index.html

The code is as follows:

Copy code

<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> jquery Learning </title>
<Link rel = "stylesheet" href = "css/jquery.menu.css" type = "text/css"/>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/jquery. menu. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". Menu"). menu (); // call the custom menu plug-in here
});
</Script>
</Head>
<Body>

<Ul class = "menu">
<Li> Top Menu 1
<Ul class = "list">
<Li> level 2 classification 1 </li>
<Li> level 2 classification 1 </li>
<Li> level 2 classification 1 </li>
<Li> level 2 classification 1 </li>
<Li> level 2 classification 1 </li>
</Ul>
</Li>
<Li> Top Menu 2
<Ul class = "list">
<Li> level 2 </li>
<Li> level 2 </li>
<Li> level 2 </li>
<Li> level 2 </li>
<Li> level 2 </li>
</Ul>
</Li>
<Li> Top Menu 3
<Ul class = "list">
<Li> level 2 Classification 3 </li>
<Li> level 2 Classification 3 </li>
<Li> level 2 Classification 3 </li>
<Li> level 2 Classification 3 </li>
<Li> level 2 Classification 3 </li>
</Ul>
</Li>
<Li> Top Menu 4
<Ul class = "list">
<Li> level 2 classification 4 </li>
<Li> level 2 classification 4 </li>
<Li> level 2 classification 4 </li>
<Li> level 2 classification 4 </li>
<Li> level 2 classification 4 </li>
</Ul>
</Li>
<Li> Top Menu 5
<Ul class = "list">
<Li> level 2 classification 5 </li>
<Li> level 2 classification 5 </li>
<Li> level 2 classification 5 </li>
<Li> level 2 classification 5 </li>
<Li> level 2 classification 5 </li>
</Ul>
</Li>
</Ul>

</Body>
</Html>
Jquery.menu.css
* {Padding: 0; margin: 0 ;}
Ul li {font-size: 12px; text-align: center; list-style-type: none; cursor: pointer ;}
. Menu {width: 500px; color: #000; overflow: hidden ;}
. Menu li {line-height: 30px; width: 100px; float: left; background: #999; color: #333 ;}
. List {display: none ;}
. List li {background: #999; color: #333 ;}
Jquery. menu. js
(Function ($ ){
$. Fn. menu = function (){
This. children ('Lil'). hover (function (){
$ (This). find ('Ul '). slideDown ('normal ');
}, Function (){
$ (This). find ('Ul '). stop (). slideUp ('normal ');
});
};
}) (JQuery );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JQuery plugin development study notes

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support