一、用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 后台框架解析》 在前端开发领域,高效的页面布局是构建用户界面的关键环节。jQuery UI Layout 是一款强大的布局插件,它基于jQuery和jQuery UI库,为开发者提供了一种灵活且功能丰富的后台框架...
### 240多个jQuery UI插件:详细知识点解析 #### 文件上传(Fileupload) - **文件上传(Fileupload)** - **文件上传插件**主要包括: - **Fileupload**: 提供了强大的文件上传功能,支持多文件上传、进度条显示等...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了各种可重用、可定制的UI组件,用于创建交互式的网页元素。本篇文章将深入探讨jQuery UI Demo框架,以及它如何结合JSON实现数据的增删改查...
《jqGrid与jQuery UI Theme深度解析》 jqGrid与jQuery UI Theme是两个在Web开发中广泛应用的工具,它们为创建动态、交互式的数据网格和美观的用户界面提供了强大的支持。jqGrid是一个基于JavaScript的开源网格插件...
标题中的"springmvc+maven+junit+jqueryUI"是一个典型的Web开发技术组合,涉及四个主要组件:Spring MVC、Maven、JUnit和jQuery UI。现在,让我们深入探讨这些技术及其在实际开发中的应用。 1. Spring MVC(Spring ...
《JqueryUI甘特图源码解析与应用》 JqueryUI是一款强大的JavaScript库,它扩展了jQuery的功能,提供了丰富的用户界面组件,其中包括我们今天要讨论的甘特图。甘特图是一种流行的时间线图表,用于展示项目进度、任务...
jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合,提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本,涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...
Tabulator是一款功能强大的jQuery UI插件,专门用于创建交互式、可定制的表格。这款工具以其易用性和灵活性而受到开发者们的青睐。在JavaScript开发领域,特别是在处理数据展示时,Tabulator提供了一种高效的方式,...
【基于jQueryUI的MVC权限管理】是一种将前端交互与后端业务逻辑相结合的Web开发模式,它结合了jQueryUI的用户界面组件和MVC(Model-View-Controller)架构来实现高效且易于维护的权限管理系统。jQueryUI提供了一系列...
jQuery UI是一款基于JavaScript库jQuery的用户界面插件集,它提供了丰富的交互效果、可自定义的主题以及多种可复用的组件,大大提升了网页的用户体验。本教程将深入探讨jQuery UI的核心概念、功能及应用实例。 1. *...
《jQuery UI 1.8.13:深入解析与应用》 jQuery UI 是一个基于 jQuery 库的强大且灵活的用户界面库,它提供了多种可定制的组件和交互效果,极大地丰富了网页的用户体验。本篇文章将围绕“jquery-ui-1.8.13”这一特定...
`jQuery`和`Table UI`插件是实现这一功能的强大工具。本篇文章将详细解析如何使用`jQuery`与相关`CSS`来制作一个具有隔行变色效果的表格。 首先,`jQuery`是一种轻量级的JavaScript库,它简化了JavaScript的DOM操作...
- 官方文档:https://api.jqueryui.com/ 提供详尽的API文档和示例代码。 - 博文链接:https://chinaxxren.iteye.com/blog/591193 这篇博客文章可能包含作者对jQuery UI的使用心得和技巧分享。 - 在线示例:jQuery...
1. jQuery UI Datepicker:这是最著名的jQuery日期插件之一,它集成在jQuery UI框架中。Datepicker提供多种样式和配置选项,可以定制日期格式、日期范围、多语言支持等。 2. Bootstrap Datepicker:基于Bootstrap...
**jQuery UI全方位解析** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的组件和交互效果,让开发者能够轻松构建美观、功能齐全的Web应用程序。本资源包"jquery ui 大全"专注于...
jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可定制的主题以及多种组件。在本压缩包中,重点是日期提取器的效果,这些功能可以帮助开发者在网页应用中轻松处理日期输入...
1. **特效与动画**:jQuery UI包含了多种内置的动画效果,如淡入淡出、滑动、弹跳等,这些效果可以通过简单的API调用来实现,极大地提高了开发效率。此外,还支持自定义动画,满足个性化需求。 2. **交互组件**:...
《jQuery UI 1.8.12:深入解析与应用》 jQuery UI 是一个基于 jQuery JavaScript 库的可扩展框架,它提供了丰富的...同时,与现代前端框架的兼容性确保了jQuery UI在不断变化的Web开发环境中仍具有广泛的应用前景。
以上只是其中的一小部分,实际上这个压缩包中还包含许多其他类型的插件,如图表插件(Chart.js, Flot)、滑块插件(noUiSlider, jQuery UI Slider)、分页插件(Bootstrap Pagination, jQuery Paginate)等,每个都...
《jQuery Easy UI 框架深度解析与应用实践》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它为开发者提供了一系列精美的UI组件,如分页、数据网格、树形结构等,极大地简化了Web应用界面的开发工作。在本篇文章...