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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.