jquery Advanced Article Simple tricks learn how to make jquery plug-ins

jquery Advanced Article simple tricks learn how to make jquery plug-ins

In the use of jquery[write less,do more] development process we will summarize a lot of very useful methods or functions, these are an integral part of our work, if you have the spirit of sharing, willing to put your practical methods or functions with the world jquery users share, Then make these methods or functions into a plug-in bar. This article will be an example of how to make a jquery plug-in, perhaps you will have a lot of gains.

Take the Dataforajax plug-in as an example [Dataforajax instance download or view Dataforajax Online instance]

The first trick, make a What kind of plug-in

What kind of plugin do you want to make, you know what it can do. This is the premise that you make jquery plug-in, answer three questions: make what plug-in, what use, how.

Example: When submitting a form using Jquery.ajax, you need to obtain data for the form, if one gets the form data very cumbersome, such as jquery (' username '). Val () get the username, etc., and make a plug-in that can get the form data. Get form data when using Jquery.ajax commit.

second trick, jquery plugin file naming

Give your jquery plugin a name and then go to the jquery website http://plugins.jquery.com/Check to see if there is the same plugin, which is important if you already have a similar plugin, or improve or change the name (suggest if you have a good reference to someone else's, Maybe yours is better than it), file name jquery. [Your plugin name].js, such as: Jquery.dataForAjax.js.

the third trick is to write the plug-in code

One, jquery plug-in architecture

Now formally start your plug-in code writing, using the following format (reference) Jquery.fn. [plugin name in second recruit] = function (options) {Here's your plugin code section this}

Example Description: Jquery.fn. Dataforajax = function (options) {Here's your plugin code section this}

Second, how to pass in the use of parameters and parameters

If you need to pass in parameters such as the options, can be arrays, characters, etc.

Use the jquery built-in jquery.extend to extend the jquery object itself this way, such as the Dataforajax plug-in needs to pass in two parameters, an ID (character) and error message (array) that displays the error hint, which is implemented as follows: setting = Jquery. Extend ({ showmessage: ' ShowMessage ', message: Message,},options);

You can set a default value, such as the default ID for ShowMessage on showmessage,message, which indicates an array, and the default is null.
Of course, if you have very few parameters, you can just pass in the parameters

How the parameters passed in are used.

Using parameters is very simple, directly referencing Setting.showmessage

The next step is to start your jquery plugin code writing process!

Precautions:
1,this objects
Where this object, which represents the current reference object, is described as follows: <div id= "biuuu" ></div> jQuery ("#biuuu"). Dataforajax (options)

So this represents the <div id= "biuuu" ></div> This object

2, learn to use This.each
Loop to get each object

3, try to replace the $ into jquery, consider versatility and conflict

fourth recruit, test jquery plugin

When your plugin is finished, you need to test your plugin and test it in different browsers, such as IE7, IE8, Firefox, Safari, Google Chrome and opera, and so on.

Fifth recruit, release jquery plugin

1, open jquery.com.
2, the new registration of a user Http://plugins.jquery.com/user
3, add a plugin, pay attention to select categories (Ajax, Animation and effects, Browser tweaks, etc.), plug-in name, plug-in introduction, etc.
4, Upload JS file, if conditions allow you can make an online demo page (can increase your website access OH), and you can also publish in the http://code.google.com
5, do you need to continue to refine and improve bugs and optimizations
6, perfect version (with improvement or repair can be increased version of the way)

Summarize
Learn how to make a jquery plugin with the above steps, and it's not very simple, so just wait and see what you can do to start your jquery plugin trip.

Original articles such as reprint, please specify: reprinted from the http://www.biuuu.com/blog

This article link address: http://www.biuuu.com/p846.html