How to compile an easyui plug-in and an easyui plug-in

How to compile an easyui plug-in and an easyui plug-in

This article describes how to compile a HelloWorld-level easyui plug-in by referring to the progressbar source code of version 1.4.2 and how to expand the plug-in functions.

This helps us understand the implementation of the easyui plug-in and how to expand the easyui plug-in, or fix the bug without modifying the source code.

 

1. First, let's take a look at the source code of progressbar (some that are not important to this article have been deleted ).

After comparing the plug-ins with the source code, we found that the plug-in is only 3 kb, which is the smallest, so it is the best to learn it. Moreover, this progressbar does not involve inheritance of other controls, which is easy to understand.

(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 valuetext: '{value}%',onChange:function(newValue,oldValue){}};})(jQuery);

Let's look backwards,

① $. Fn. progressbar. defaults defines the default values of some parameters, which are directly defined on $. fn. progressbar. defaults and are global.

② $. Fn. progressbar. parseOptions is a pair of data-options = "...... ", in fact, $. parser. parseOptions has already helped us do our main work. We only need to set the Data Type of the parameter. For example, set the value to the number type.

③ $. Fn. progressbar. methods defines the behavior of this plug-in (some methods). It can be seen that it is also global.

④ $. Fn. progressbar is the focus. When typeof options = 'string', a method of the plug-in is called, such as $ ('# XXX '). progressbar ('setvalue', 10); otherwise, it is equivalent to calling the method without parameters $ ('# XXX '). progressbar () is a bit like a constructor.

 

2. Implement your own hello plug-in

Jquery. hello. js

(Function ($) {function init (target) {// note: options // cannot be obtained here. Therefore, you can perform some operations such as setting styles and binding events (target).css ('cursor ', 'pointer'); $ (target ). bind ('click', function (e, preventBubble) {developer.fn.hello.methods.sayhello((e.tar get); return false ;}); return $ (target) ;}// easyui plug-in function $. fn. hello = function (options, param) {// If options is string, it is a method call, for example, $ ('# divmyin in '). hello ('sayhello'); if (typeof options = 'string '){ Var method = $. fn. hello. methods [options]; if (method) {return method (this, param) ;}// otherwise it is a plug-in Initialization function, such as $ ('# divmyin in '). hello (); options = options | |{}; return this. each (function () {var state = $. data (this, 'Hello'); if (state) {$. extend (state. options, options);} the parser of else {// easyui calculates options and initedObj state =$. data (this, 'Hello', {options: $. extend ({}, $. fn. hello. defaults, $. fn. hello. parseOptions (This), options), initedObj: init (this) // here, the initedobjname is used to retrieve the desired Variable (this%.css ('color', state. options. myColor) ;};}; // sets the default implementation of some methods of the hello plug-in. // note: the first parameter is the jQuery object corresponding to the current element $. fn. hello. methods = {options: function (jq) {return $. data (jq [0], 'Hello '). options ;}, sayHello: function (jq) {var opts =$. data (jq [0], 'Hello '). options; // obtain the configuration parameter for (var I = 0; I <opts. repeatTimes; I ++) {opts. howToSay (opts. to) ;}}; // set Parameter conversion method $. fn. hello. parseOptions = function (target) {var opts = $. extend ({}, $. parser. parseOptions (target, ['to', 'mycolor', {repeatTimes: 'number'}]); // return opts ;}; // set some default values for the hello plug-in $. fn. hello. defaults = {to: 'World', repeatTimes: 1, myColor: null, howToSay: function (to) {alert ('hello, '+ to + "! ") ;}}; // Register the custom easyui plug-in hello $. parser. plugins. push (" hello ") ;}( jQuery );

 

3. Extend functions for the hello plug-in

We have already mentioned that $. fn. hello. methods is global, so the so-called extension is to directly add a method to $. fn. hello. methods.

If you need to rewrite the original implementation, you can directly overwrite the original method, such as: $. fn. hello. methods. sayHello = function (jq ){......};

Jquery. hello. extension. js

(Function ($) {// extended method $. fn. hello. methods. sayHi = function (jq) {// var opts = $. data (jq [0], 'Hello '). options; alert ("Hi") ;}) (jQuery );

 

 

4. Use the hello plug-in

<! DOCTYPE html> 
 
5. view online
Click here