当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jQueryUI插件开发框架解析

发表于: 2013-10-18   作者:songchuanlu   来源:转载   浏览次数:
摘要: 一、用options参数控制插件的创建   定义插件:   // 定义类级别插件btn $.chuanlu = { btn : function(element, options){ this._create(element, options); } } // 定义类级别插件btn的原型 $.chuanlu.btn.pr

一、用options参数控制插件的创建

 

定义插件:

 

// 定义类级别插件btn
$.chuanlu = {
    btn : function(element, options){
        this._create(element, options);
    }
}

// 定义类级别插件btn的原型
$.chuanlu.btn.prototype = {
    // 创建插件
    _create : function(element, options){
        this.element = element;
        this.options = options;
        this._setOptions(options);
    },
    // 设置参数集合
    _setOptions : function(options){
        var key;
        for (key in options) {
            this._setOption(key, options[key]);
        }
        return this;
    },
    // 设置单独参数
    _setOption : function(key, value){
        switch(key){
        case 'backgroundColor':
            this.element.css('backgroundColor', value);
            break;
        case 'text':
            this.elment.html(value);
            break;
        default:
            break;
        }
    }
}

// 定义对象级别插件btn
$.fn.btn = function(options){
    return this.each(function() {
        var opts = $.extend({}, $.fn.btn.defaults, options);
        // 实例化类级别插件对象
        var instance = new $.chuanlu.btn($(this), options);
    });
};

// 定义插件的默认参数
$.fn.btn.defaults = {
    backgroundColor: 'transparent'
}

 

插件调用:

 

$('.btn').btn({
    backgroundColor: '#f00'
});

 

二、给插件追加方法调用

 

比如给上面这个btn按钮插件添加一个destroy方法,按照jQueryUI的插件规范,调用该方法的代码如下:

 

$('.btn').btn('destroy');

 

而这种写法虽然简单,但与插件的创建代码格式冲突,所以我们再给插件添加destroy方法的同时,还要修改创建的代码。

修改后的代码如下:

 

 

// 定义类级别插件btn
$.chuanlu = {
    btn : function(element, options){
        this._create(element, options);
    }
}
// 定义类级别插件btn的原型
$.chuanlu.btn.prototype = {
    // 创建插件
    _create : function(element, options){
        this.element = element;
        this.options = options;
        this._setOptions(options);
    },
    // 设置参数集合
    _setOptions : function(options){
        var key;
        for (key in options) {
            this._setOption(key, options[key]);
        }
        return this;
    },
    // 设置单独参数
    _setOption : function(key, value){
        switch(key){
        case 'backgroundColor':
            this.element.css('backgroundColor', value);
            break;
        case 'text':
            this.elment.html(value);
            break;
        default:
            break;
        }
    },
    // 销毁插件
    destroy : function(){
        alert('插件被销毁');
    }
}
// 定义对象实例级别插件btn
$.fn.btn = function(options){
    var fullName = 'btn.chuanlu';
    // 根据options数据类型,判断是方法调用,还是对象创建
    if(typeof options == 'string'){
        // 如果options参数为字符串对象,那么表示要进行方法调用
        this.each(function(){
            var instance = $.data(this, fullName);
            instance[ options ].apply(instance, arguments);
        });
    } else {
        return this.each(function() {
            var opts = $.extend({}, $.fn.btn.defaults, options);
            // 实例化类级别插件对象
            var instance = new $.chuanlu.btn($(this), options);
            // 将插件的实例引用保存,便于插件方法调用时获取该实例的引用
            $.data(this, fullName, instance);
        });
    }
    
};

// 定义插件的默认参数
$.fn.btn.defaults = {
    backgroundColor: 'transparent'
}

 

插件调用:

 

$('.btn').btn({
    backgroundColor: '#f00'
}).bind('click',function(event){
    $(this).btn('destroy');
});

 

三、用option方法设置和获取插件参数值

 

按照jQueryUI的插件规范,获取和设置插件参数值,是通过调用option方法实现的。option方法是带参数的方法,调用option方法代码格式如下:

 

1、获取参数值

 

$('.btn').btn('option', 'backgroundColor');

 

2、设置参数值

 

$('.btn').btn('option', 'backgroundColor', '#086');

  

为了实现这个带参方法,插件定义代码需要再次修改。

修改后的代码如下:

 

// 定义类级别插件btn
$.chuanlu = {
    btn : function(element, options){
        this._create(element, options);
    }
}
// 定义类级别插件btn的原型
$.chuanlu.btn.prototype = {
    // 创建插件
    _create : function(element, options){
        this.element = element;
        this.options = options;
        this._setOptions(options);
    },
    // 设置参数集合
    _setOptions : function(options){
        var key;
        for (key in options) {
            this._setOption(key, options[key]);
        }
        return this;
    },
    // 设置单独参数
    _setOption : function(key, value){
        switch(key){
        case 'backgroundColor':
            this.element.css('backgroundColor', value);
            break;
        case 'text':
            this.elment.html(value);
            break;
        default:
            break;
        }
    },
    // 销毁插件
    destroy : function(){
        alert('插件被销毁');
    },
    option : function(key, value){
        var options = this.options;
        if ( value === undefined ) {
            return this.options[key] === undefined ? null : this.options[key];
        }
        options[ key ] = value;
        this._setOptions(options);
        return this;
    }
}
// 定义对象实例级别插件btn
$.fn.btn = function(options){
    var fullName = 'btn.chuanlu';
    var isMethodCall = typeof options === "string",
    args = Array.prototype.slice.call(arguments, 1),
    returnValue = this;

    options = !isMethodCall && args.length ? $.extend.apply( null, [ true, options ].concat(args) ) : options;

    // 禁止调用私有方法
    if (isMethodCall && options.charAt( 0 ) === "_") {
        return returnValue;
    }
    
    if (isMethodCall) {
        this.each(function() {
            var instance = $.data(this, fullName),
                methodValue = instance && $.isFunction(instance[options]) ?
                    instance[ options ].apply( instance, args ) :
                    instance;
            if (methodValue !== instance && methodValue !== undefined) {
                returnValue = methodValue;
                return false;
            }
        });
    } else {
        this.each(function() {
            var instance = $.data( this, fullName);
            if ( instance ) {
                instance.option( options || {} )._init();
            } else {
                options = $.extend({}, $.fn.btn.defaults, options);
                $.data(this, fullName, new $.chuanlu.btn($(this), options));
            }
        });
    }
    return returnValue;
    
};

// 定义插件的默认参数
$.fn.btn.defaults = {
    backgroundColor: 'transparent'
}

 

插件调用:

 

$('.btn').btn({
    backgroundColor: '#f00'
}).bind('click',function(event){
    //$(this).btn('destroy');
    // 将背景色修改为#086
    $(this).btn('option', 'backgroundColor', '#086');
    // 获取背景色值
    alert($(this).btn('option', 'backgroundColor'));
});

 

jQueryUI插件开发框架解析

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在一个项目中用到了JqueryUI 1.8 的 datepicker 插件,出现一个怪异问题,留下记录备查. 在应用的过程
先来几张效果图: 1.基于DATASNAP构建的中间件,中间件已经经过实际项目的检验,单台中间件可支持几
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery
下面通过一个示例程序来说明基于ExpressPlugin的开发流程,该示例程序是一个类似于Windows记事本的
特点: 1. 支持多左右滚动,左右拖动。 2. 时间轴可上下两种显示方式。 3. 支持两种模式的平滑滚动/
Winform开发框架之插件化应用框架实现 支持插件化应用的开发框架能给程序带来无穷的生命力,也是目
支持插件化应用的开发框架能给程序带来无穷的生命力,也是目前很多系统、程序追求的重要方向之一,
【一】jQuery 近期推出UI框架 : jQuery MiniUI - 快速开发WebUI。 介绍: 它能缩短开发时间,减少代
 1. 什么是OSGi框架   OSGi(Open Service Gateway Initiative)框架是运行在JavaVM环境里的服务平
自从在《Winform开发框架之插件化应用框架实现》一文中,介绍并总结了Winform开发框架插件化应用框
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号