您的位置：首页 > 产品设计 > UI/UE

如何自己编写一个easyui插件

2015-06-26 02:22 579 查看

本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件，以及如何拓展插件的功能。

有利于我们理解easyui插件的实现，以及了解如何对easyui插件进行拓展，或者当发现bug时在不修改源码的情况下对bug进行修复。

1. 首先让我们来看看progressbar的源码（已经删除了一些对本文不重要的）。

比较了一下有源码的那几个插件，发现这个只有3KB，最小，所以拿这个学习最好了；而且这个progressbar没有涉及继承其他控件，易于理解。

(function($){
function init(target) {
$(target).addClass('progressbar');
return $(target);
}

$.fn.progressbar = function(options, param){
if (typeof options == 'string'){
var method = $.fn.progressbar.methods[options];
if (method){
return method(this, param);
}
}

options = options || {};
return this.each(function(){
var state = $.data(this, 'progressbar');
if (state){
$.extend(state.options, options);
} else {
state = $.data(this, 'progressbar', {
options: $.extend({}, $.fn.progressbar.defaults, $.fn.progressbar.parseOptions(this), options),
bar: init(this)
});
}
});
};

$.fn.progressbar.methods = {
options: function(jq){
return $.data(jq[0], 'progressbar').options;
},
getValue: function(jq){
return $.data(jq[0], 'progressbar').options.value;
}
};

$.fn.progressbar.parseOptions = function(target){
return $.extend({}, $.parser.parseOptions(target, ['width','height','text',{value:'number'}]));
};

$.fn.progressbar.defaults = {
width: 'auto',
height: 22,
value: 0,	// percentage value
text: '{value}%',
onChange:function(newValue,oldValue){}
};
})(jQuery);

我们倒着看，

①$.fn.progressbar.defaults定义了一些参数的默认值，而且是直接定义在$.fn.progressbar.defaults上的，是全局的。

②$.fn.progressbar.parseOptions是一个对data-options="......"中的属性进行解析的方法，其实$.parser.parseOptions已经帮助我们做了主要工作，我们只需要设置一下参数是什么类型的数据就行，如这里的value设置为number类型。

③$.fn.progressbar.methods定义了这个插件的行为（一些方法），可以看出也是全局的。

④$.fn.progressbar这个是重点了，typeof options == 'string'时就是调用插件的某个方法，如$('#xxx').progressbar('setValue', 10)；否则就相当于调用无参方法$('#xxx').progressbar()，有点像是个构造函数。

2. 实现自己的hello插件

jquery.hello.js

(function($){
function init(target) {
//注：此处还不能获取options

//所以这里可以进行一些如设置样式、绑定事件的事情
$(target).css('cursor', 'pointer');

$(target).bind('click', function (e, preventBubble) {
$.fn.hello.methods.sayHello($(e.target));
return false;
});

return $(target);
}

//easyui插件函数
$.fn.hello = function (options, param) {
//如果options为string，则是方法调用，如$('#divMyPlugin').hello('sayHello');
if (typeof options == 'string'){
var method = $.fn.hello.methods[options];
if (method){
return method(this, param);
}
}

//否则是插件初始化函数，如$('#divMyPlugin').hello();
options = options || {};
return this.each(function(){
var state = $.data(this, 'hello');
if (state){
$.extend(state.options, options);
} else {
//easyui的parser会依次计算options、initedObj
state = $.data(this, 'hello', {
options: $.extend({}, $.fn.hello.defaults, $.fn.hello.parseOptions(this), options),
initedObj: init(this) //这里的initedObj名称随便取的
});
}

$(this).css('color', state.options.myColor);
});
};

//设置hello插件的一些方法的默认实现
//注：第一个参数为当前元素对应的jQuery对象
$.fn.hello.methods = {
options: function(jq){
return $.data(jq[0], 'hello').options;
},
sayHello: function (jq) {
var opts = $.data(jq[0], 'hello').options; //获取配置参数
for (var i = 0; i < opts.repeatTimes; i++) {
opts.howToSay(opts.to);
}
}
};

//设置参数转换方法
$.fn.hello.parseOptions = function (target) {
var opts = $.extend({}, $.parser.parseOptions(target, ['to', 'myColor', { repeatTimes: 'number' }]));//这里可以指定参数的类型
return opts;
};

//设置hello插件的一些默认值
$.fn.hello.defaults = {
to: 'world',
repeatTimes: 1,
myColor: null,
howToSay: function (to) {
alert('Hello, ' + to + "!");
}
};

//注册自定义easyui插件hello
$.parser.plugins.push("hello");
})(jQuery);

3. 给hello插件拓展功能

我们前面已经说了$.fn.hello.methods是全局的，所以所谓拓展就是直接给$.fn.hello.methods加方法。

如果需要改写原有实现，可以直接将原来的方法覆盖掉就可以了，如：$.fn.hello.methods.sayHello = function(jq){ ...... };

jquery.hello.extension.js

(function($){

//拓展方法
$.fn.hello.methods.sayHi = function (jq) {
//var opts = $.data(jq[0], 'hello').options;
alert("Hi");
}

})(jQuery);

4. 使用hello插件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.hello.js"></script>
<script type="text/javascript" src="jquery.hello.extension.js"></script>
</head>
<body>
<div id="divMyPlugin1" class="easyui-hello" data-options="to:'world', myColor:'red' ">点我sayHello一次</div>
<div id="divMyPlugin2" class="easyui-hello" data-options="to:'world', repeatTimes:3, myColor:'green', howToSay:customeHowToSay">点我sayHello三次</div>
<button onclick="invokePluginMethod()">调用插件的方法</button><button onclick="invokePluginExMethod()">调用插件的拓展方法</button><button onclick="$('#divMsg').empty()">Clear</button>
<div id="divMsg">

</div>
<script type="text/javascript">

function invokePluginMethod() {
$('#divMyPlugin2').hello('sayHello');
}

function invokePluginExMethod() {
$('#divMyPlugin2').hello('sayHi');
}

function customeHowToSay(to) {
$('<p></p>').html('你好, <span style="color:red">' + to + '<span>!' + new Date().getTime()).appendTo($('#divMsg'));
}

</script>
</body>
</html>

5. 在线查看

点这里

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航