Implementing the jquery Extension summary

Last Update:2015-08-10 Source: Internet

Author: User

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

Develop your own jquery plug-ins to see an example of how
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<title> New Document </title>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "keywords" content= "" >
<meta name= "description" content= "" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
/*
There are two types of jquery plugin development:
One is the development of a class-level plug-in that adds a new global function to jquery, which is equivalent to adding a method to the jquery class itself. The global function of jquery is a function that belongs to the jquery namespace.
The other is the object-level plug-in development that adds methods to jquery objects. The following is a detailed description of the development of the two functions.

1, class-level plug-in development
The most straightforward understanding of plug-in development at the class level is to add a class method to the jquery class, which can be understood as adding a static method. The typical example is $. The AJAX () function, which defines the function in the jquery namespace. Plug-in development at the class level can be extended in the following ways:
*/
1.1 Defining a global function
Jquery.foo = function () {
Alert (' Add a new global function ');
}
Defining multiple global functions
Jquery.bar = function () {
Alert (' Add another global function ');
}
1.2 Defining global functions using Extend
Jquery.extend ({
Foo1:function () {
Alert (' extend defines global function 1 ');
},
Bar1:function () {
Alert (' Extend defines global function 2 ');
}
});
1.3 Defining functions with namespaces
Jquery.plugin = {
Foo2:function () {
Alert (' Use namespace to define function ');
}
}

$ (function () {
$.foo ();
$.bar ();
$.foo1 ();
$.bar1 ();
$.plugin.foo2 ();
});

/*
2, Object-level plug-in development
Plug-in development at the object level requires two forms:
*/
Form One
(function ($) {
$.fn.extend ({
Foo3:function () {
Alert (' Object level plug-in extend Mode 1 ');
},
Bar3:function () {
Alert (' Object level plug-in extend Mode 2 ');
}
})
}) (JQuery);

Form Two
(function ($) {
$.fn.foo4 = function () {
Alert (' Object level plug-in FN mode ');
}
}) (JQuery);

Receive parameters to control plug-in behavior
(function ($) {
$.FN.BAR4 = function (options) {
var defaults = {aaa: ' 1 ', BBB: ' 2 '};
var opts = $.extend (defaults, options);
Alert (' parameter value: AAA: ' +opts.aaa+ '; BBB: ' +opts.bbb ');
}
}) (JQuery);

Provides the configuration item value of the public method access plug-in
(function ($) {
$.fn.foo5 = function (options) {
var opts = $.extend ({}, $.fn.foo5.defaults, options);
Alert (' parameter value: AAA: ' +opts.aaa+ '; BBB: ' +opts.bbb ');
}
$.fn.foo5.defaults = {aaa: ' 1 ', BBB: ' 2 '};
}) (JQuery);

Provide public methods to access other methods in the plug-in
(function ($) {
$.FN.BAR5 = function (options) {
$.fn.bar5.alert (options);
}
$.fn.bar5.alert = function (params) {
alert (params);
}
}) (JQuery);

$ (function () {
$ (' #test '). Foo3 ();
$ (' #test '). BAR3 ();
$ (' #test '). Foo4 ();
$ (' #test '). BAR4 ();
$ (' #test '). BAR4 ({aaa: ' 3 '});
$ (' #test '). BAR4 ({aaa: ' 3 ', BBB: ' 4 '});
$ (' #test '). Foo5 ();
$ (' #test '). Foo5 ({aaa: ' 5 ', BBB: ' 6 '});
$ (' #test '). BAR5 (' aaaa ');
});
</script>

<body>
<div id= "Test" ></div>
</body>

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

Implementing the jquery Extension summary

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support