`
songchuanlu
  • 浏览: 32228 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQueryUI插件开发框架解析

阅读更多

一、用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'));
});

 

分享到:
评论

相关推荐

    jquery ui layout 后台框架.zip

    《jQuery UI Layout 后台框架解析》 在前端开发领域,高效的页面布局是构建用户界面的关键环节。jQuery UI Layout 是一款强大的布局插件,它基于jQuery和jQuery UI库,为开发者提供了一种灵活且功能丰富的后台框架...

    240多个jQuery UI插件

    ### 240多个jQuery UI插件:详细知识点解析 #### 文件上传(Fileupload) - **文件上传(Fileupload)** - **文件上传插件**主要包括: - **Fileupload**: 提供了强大的文件上传功能,支持多文件上传、进度条显示等...

    Jquery UI Demo 框架

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了各种可重用、可定制的UI组件,用于创建交互式的网页元素。本篇文章将深入探讨jQuery UI Demo框架,以及它如何结合JSON实现数据的增删改查...

    jqgrid+jqueryui.theme

    《jqGrid与jQuery UI Theme深度解析》 jqGrid与jQuery UI Theme是两个在Web开发中广泛应用的工具,它们为创建动态、交互式的数据网格和美观的用户界面提供了强大的支持。jqGrid是一个基于JavaScript的开源网格插件...

    springmvc+maven+junit+jqueryUI

    标题中的"springmvc+maven+junit+jqueryUI"是一个典型的Web开发技术组合,涉及四个主要组件:Spring MVC、Maven、JUnit和jQuery UI。现在,让我们深入探讨这些技术及其在实际开发中的应用。 1. Spring MVC(Spring ...

    JqueryUI甘特图源码_f5d014bf-c4cb-4a76-b825-cdbbdd0fcfc7.rar

    《JqueryUI甘特图源码解析与应用》 JqueryUI是一款强大的JavaScript库,它扩展了jQuery的功能,提供了丰富的用户界面组件,其中包括我们今天要讨论的甘特图。甘特图是一种流行的时间线图表,用于展示项目进度、任务...

    jquery-ui-1.11.4完整版

    jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合,提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本,涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...

    基于jqueryUI的MVC权限管理

    【基于jQueryUI的MVC权限管理】是一种将前端交互与后端业务逻辑相结合的Web开发模式,它结合了jQueryUI的用户界面组件和MVC(Model-View-Controller)架构来实现高效且易于维护的权限管理系统。jQueryUI提供了一系列...

    jquery ui test and examples

    jQuery UI是一款基于JavaScript库jQuery的用户界面插件集,它提供了丰富的交互效果、可自定义的主题以及多种可复用的组件,大大提升了网页的用户体验。本教程将深入探讨jQuery UI的核心概念、功能及应用实例。 1. *...

    jquery-ui-1.8.13

    《jQuery UI 1.8.13:深入解析与应用》 jQuery UI 是一个基于 jQuery 库的强大且灵活的用户界面库,它提供了多种可定制的组件和交互效果,极大地丰富了网页的用户体验。本篇文章将围绕“jquery-ui-1.8.13”这一特定...

    jquery table ui插件制作css表格隔行变色特效代码

    `jQuery`和`Table UI`插件是实现这一功能的强大工具。本篇文章将详细解析如何使用`jQuery`与相关`CSS`来制作一个具有隔行变色效果的表格。 首先,`jQuery`是一种轻量级的JavaScript库,它简化了JavaScript的DOM操作...

    jquery ui

    - 官方文档:https://api.jqueryui.com/ 提供详尽的API文档和示例代码。 - 博文链接:https://chinaxxren.iteye.com/blog/591193 这篇博客文章可能包含作者对jQuery UI的使用心得和技巧分享。 - 在线示例:jQuery...

    jquery日期插件

    1. jQuery UI Datepicker:这是最著名的jQuery日期插件之一,它集成在jQuery UI框架中。Datepicker提供多种样式和配置选项,可以定制日期格式、日期范围、多语言支持等。 2. Bootstrap Datepicker:基于Bootstrap...

    jquery ui 大全

    **jQuery UI全方位解析** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的组件和交互效果,让开发者能够轻松构建美观、功能齐全的Web应用程序。本资源包"jquery ui 大全"专注于...

    jQuery UI框架实现的功能强大的各种常用日期提取器效果.zip

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可定制的主题以及多种组件。在本压缩包中,重点是日期提取器的效果,这些功能可以帮助开发者在网页应用中轻松处理日期输入...

    jquery-ui-1.8.22

    1. **特效与动画**:jQuery UI包含了多种内置的动画效果,如淡入淡出、滑动、弹跳等,这些效果可以通过简单的API调用来实现,极大地提高了开发效率。此外,还支持自定义动画,满足个性化需求。 2. **交互组件**:...

    jquery-ui-1.8.12.rar

    《jQuery UI 1.8.12:深入解析与应用》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展框架,它提供了丰富的...同时,与现代前端框架的兼容性确保了jQuery UI在不断变化的Web开发环境中仍具有广泛的应用前景。

    上千个Jquery常用插件

    以上只是其中的一小部分,实际上这个压缩包中还包含许多其他类型的插件,如图表插件(Chart.js, Flot)、滑块插件(noUiSlider, jQuery UI Slider)、分页插件(Bootstrap Pagination, jQuery Paginate)等,每个都...

    jquery easy ui demo

    《jQuery Easy UI 框架深度解析与应用实践》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列精美的UI组件,如分页、数据网格、树形结构等,极大地简化了Web应用界面的开发工作。在本篇文章...

    jquery后台管理插件

    以"miniui_java_myeclipse"为例,这可能是插件的示例项目或者源码包,其中"miniUI"可能是一个具体的后台管理框架,基于jQuery构建,提供了丰富的UI组件;"java"表明此插件与Java后端技术相结合,适配MyEclipse开发...

Global site tag (gtag.js) - Google Analytics