首页 > 代码库 > jquery插件开发
jquery插件开发
- jQuery.foo = function() {
- alert(‘This is a test. This is only a test.‘);
- };
- jQuery.foo = function() {
- alert(‘This is a test. This is only a test.‘);
- };
- jQuery.bar = function(param) {
- alert(‘This function takes a parameter, which is "‘ + param + ‘".‘);
- };
- 调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘);
- jQuery.extend({
- foo: function() {
- alert(‘This is a test. This is only a test.‘);
- },
- bar: function(param) {
- alert(‘This function takes a parameter, which is "‘ + param +‘".‘);
- }
- });
- jQuery.myPlugin = {
- foo:function() {
- alert(‘This is a test. This is only a test.‘);
- },
- bar:function(param) {
- alert(‘This function takes a parameter, which is "‘ + param + ‘".‘);
- }
- };
- 采用命名空间的函数仍然是全局函数,调用时采用的方法:
- $.myPlugin.foo();
- $.myPlugin.bar(‘baz‘);
- (function($){
- $.fn.extend({
- pluginName:function(opt,callback){
- // Our plugin implementation code goes here.
- }
- })
- })(jQuery);
- (function($) {
- $.fn.pluginName = function() {
- // Our plugin implementation code goes here.
- };
- })(jQuery);
- $.fn.hilight = function() {
- // Our plugin implementation code goes here.
- };
- 我们的插件通过这样被调用:
- $(‘#myDiv‘).hilight();
- // plugin definition
- $.fn.hilight = function(options) {
- var defaults = {
- foreground: ‘red‘,
- background: ‘yellow‘
- };
- // Extend our default options with those provided.
- var opts = $.extend(defaults, options);
- // Our plugin implementation code goes here.
- };
- 我们的插件可以这样被调用:
- $(‘#myDiv‘).hilight({
- foreground: ‘blue‘
- });
- // plugin definition
- $.fn.hilight = function(options) {
- // Extend our default options with those provided.
- // Note that the first arg to extend is an empty object -
- // this is to keep from overriding our "defaults" object.
- var opts = $.extend({}, $.fn.hilight.defaults, options);
- // Our plugin implementation code goes here.
- };
- // plugin defaults - added as a property on our plugin function
- $.fn.hilight.defaults = {
- foreground: ‘red‘,
- background: ‘yellow‘
- };
- 现在使用者可以包含像这样的一行在他们的脚本里:
- //这个只需要调用一次,且不一定要在ready块中调用
- $.fn.hilight.defaults.foreground = ‘blue‘;
- 接下来我们可以像这样使用插件的方法,结果它设置蓝色的前景色:
- $(‘#myDiv‘).hilight();
如你所见,我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值:
// 覆盖插件缺省的背景颜色
$.fn.hilight.defaults.foreground = ‘blue‘;
// ...
// 使用一个新的缺省设置调用插件
$(‘.hilightDiv‘).hilight();
// ...
// 通过传递配置参数给插件方法来覆盖缺省设置
$(‘#green‘).hilight({
foreground: ‘green‘
});
例如,插件的实现里面可以定义一个名叫“format”的函数来格式化高亮文本。默认的format方法实现部分在hiligth函数下面。
- // plugin definition
- $.fn.hilight = function(options) {
- // iterate and reformat each matched element
- return this.each(function() {
- var $this = $(this);
- // ...
- var markup = $this.html();
- // call our format function
- markup = $.fn.hilight.format(markup);
- $this.html(markup);
- });
- };
- // define our format function
- $.fn.hilight.format = function(txt) {
- return ‘<strong>‘ + txt + ‘</strong>‘;
- };
$.fn.cycle.transitions = {
// ...
};
这个技巧使其他人能定义和传递变换设置到Cycle插件。
- (function($) {
- // plugin definition
- $.fn.hilight = function(options) {
- debug(this);
- // ...
- };
- // private function for debugging
- function debug($obj) {
- if (window.console && window.console.log)
- window.console.log(‘hilight selection count: ‘ + $obj.size());
- };
- // ...
- })(jQuery);
- $.fn.hilight = function(options) {
- // ...
- // build main options before element iteration
- var opts = $.extend({}, $.fn.hilight.defaults, options);
- return this.each(function() {
- var $this = $(this);
- // build element specific options
- var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
- //...
- <!-- markup -->
- <div class="hilight { background: ‘red‘, foreground: ‘white‘ }">
- Have a nice day!
- </div>
- <div class="hilight { foreground: ‘orange‘ }">
- Have a nice day!
- </div>
- <div class="hilight { background: ‘green‘ }">
- Have a nice day!
- </div>
- 现在我们能高亮哪些div仅使用一行脚本:
- $(‘.hilight‘).hilight();
- // 创建一个闭包
- (function($) {
- // 插件的定义
- $.fn.hilight = function(options) {
- debug(this);
- // build main options before element iteration
- var opts = $.extend({}, $.fn.hilight.defaults, options);
- // iterate and reformat each matched element
- return this.each(function() {
- $this = $(this);
- // build element specific options
- var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
- // update element styles
- $this.css({
- backgroundColor: o.background,
- color: o.foreground
- });
- var markup = $this.html();
- // call our format function
- markup = $.fn.hilight.format(markup);
- $this.html(markup);
- });
- };
- // 私有函数:debugging
- function debug($obj) {
- if (window.console && window.console.log)
- window.console.log(‘hilight selection count: ‘ + $obj.size());
- };
- // 定义暴露format函数
- $.fn.hilight.format = function(txt) {
- return ‘<strong>‘ + txt + ‘</strong>‘;
- };
- // 插件的defaults
- $.fn.hilight.defaults = {
- foreground: ‘red‘,
- background: ‘yellow‘
- };
- // 闭包结束
- })(jQuery);
Query为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object); 给jQuery对象添加方法。 jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
3.1 jQuery.fn.extend(object);
fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
3.2 jQuery.extend(object);
为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
add:function(a,b){return a+b;}
});
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,$.add(3,4); //return 7
jquery插件开发