Create a simple jquery plug-in.

Create a simple jquery plug-in.

Http://mp.weixin.qq.com/s? _ Biz = MzAxMzgwNDU3Mg ==& mid = 401571467 & idx = 1 & sn = tags & scene = 1 & srcid = tags & from = singlemessage & isappinstalled = 0 # wechat_redirect

Http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial:

1. Introduction

For beginners of jquery, making a jquery plug-in is still a relatively advanced topic. In the last month, jquery was released. Therefore, I learned how to separate javascript code from html files. I am not satisfied with the code I have written. Therefore, I decided to learn more about how to create a jquery plug-in to make javascript files more concise.

The plug-in created in this article is based on my last Tutorial: Navigation List menu + jQuery Animate Effect Tutorial (http://www.queness.com/post/68/navigation-list-menujquery-animate-effect-tutorial) Change in the Tutorial I put all js Code to document. in the ready callback function, it is like this:

But this time, the Code is as follows:

It looks much more concise and easy to reuse in other projects.

2. Plug-in Structure

The official jquery website provides a detailed description of the jquery plug-in. However, I think it is too difficult to understand.

In order to make our programming life better and simpler, I studied related documents online. The code below is an elegant jquery plug-in structure.

1. // You need an anonymous function to wrap around your function to avoid conflict

2. The anonymous package function avoids global variables.

3. (Function ($ ){

4.  

5. // Attach this new method to jQuery

6. $. Fn. extend ({

8. // This is where you write your plugin's name

9. // Jquery plug-in name

10. Pluginname: function (){

11.  

12. // Iterate over the current set of matched elements

// The dom element selected by the iteration Selector

1. Return this. each (function (){

3. // Code to be inserted here

// Jquery plug-in code

2. });

3. }

4. });

6. // Pass jQuery to the function,

7. // So that we will able to use any valid Javascript variable name

8. // To replace "$" SIGN. But, we'll stick to $ (I like dollar sign :))

9. }) (JQuery );

3. Plugin With Options

If you have read the first section, the padding value is configurable. It is necessary for users to pass some parameters to the plug-in according to their own business needs. Ensuring that each variable has a default value is a good programming practice. Now, you need the following code:

1. (Function ($ ){

2.  

3. $. Fn. extend ({

5. // Pass the options variable to the function

6. Pluginname: function (options ){

7.  

8.  

9. // Set the default values, use comma to separate the settings, example:

10. Var defaults = {

11. Padding: 20,

12. MouseOverColor: '#000000 ',

13. MouseOutColor: '# ffff'

14. }

16. Var options = $. extend (defaults, options );

17.  

18. Return this. each (function (){

19. Var o = options;

21. // Code to be inserted here

22. // You can access the value like this

23. Alert (o. padding );

25. });

26. }

27. });

29. }) (JQuery );

     

4. The animateMenu Plugin

Now you know the basic structure of the jquery plug-in. The following plug-in is based on a previous tutorial. It receives four parameters:

• AnimatePadding:Set the padding value for the animate effect

• DefaultPadding:Set the default padding value

• EvenColor:Set the color this color if index value is even number

• OddColor:Set the color this color if index value is odd numbe

1. (Function ($ ){

2. $. Fn. extend ({

3. // Plugin name-animatemenu

4. AnimateMenu: function (options ){

5.  

6. // Settings list and the default values

7. Var defaults = {

8. AnimatePadding: 60,

9. DefaultPadding: 10,

10. EvenColor: '# ccc ',

11. OddColor: '# eee'

12. };

14. Var options = $. extend (defaults, options );

16. Return this. each (function (){

17. Var o = options;

19. // Assign current element to variable, in this case is UL element

20. Var obj = $ (this );

22. // Get all LI in the UL

23. Var items = $ ("li", obj );

25. // Change the color according to odd and even rows

26. $ ("Li: even", obj).css ('background-color', o. evenColor );

27. $ ("Li: odd", obj).css ('background-color', o. oddColor );

29. // Attach mouseover and mouseout event to the LI

30. Items. mouseover (function (){

31. $ (This). animate ({paddingLeft: o. animations}, 300 );

33. }). Mouseout (function (){

34. $ (This). animate ({paddingLeft: o. defaultPadding}, 300 );

35. });

37. });

38. }

39. });

40. }) (JQuery );

Note: For web Front-end practitioners, using jquery plug-ins can naturally improve our development efficiency. But we need to know not only about it, but also about it. We need to know not only how it is used, but also how it works. On the one hand, looking at the source code of some excellent jquery plug-ins in the industry can effectively improve our coding capabilities; on the other hand, we have mastered the method for compiling jquery plug-ins, common components in our project can be written as jquery plug-ins in this way to facilitate code reuse and make the code more concise and maintainable. The translator is also a front-end Tom Mo, and his career is not long enough. If something is wrong in this article, I would like to point out that I am very grateful.

Note: If you are interested, you can follow the author's public account and push a dry front-end article every week.