Big Bear's JavaScript plugin development------(DXJ UI------processbar)

First, the opening analysis

Hi, hello, everyone! Big Bear June again and everyone met, remember the first two articles. This paper mainly describes how to develop plug-ins in the way of "jquery", and the combination of process design and object-oriented thought design.

How to design a plug-in, the two ways each have advantages and disadvantages, this series of articles are learning-oriented, specific scenarios we decide how to use. So today, starting with this article, let's start with an example

The way with everyone to develop their own plug-in library. Hehe hey, talk less, get to the point. Directly on the actual:

　　　　

You see, this is a progress bar plug-in, in our daily development, sometimes we will have a loading data progress hint, if no response is bound to cause the user

The form of the experience and the user's interactivity is not very good, so today simulation of a hehe hey. Here is a detailed analysis of it.

　　

(ii), case analysis

(1), first determine what the plugin does. Here's a look at how the plug-in is called and the configuration parameter description. The following code:

　　　　

New Processbar ($ ("#pb"), {callback:function () {alert ("Load data complete! ") ;}}). Init ();

I'm just a simple example here, so just one parameter, that is, the progress of loading the things to do, in the callback to do the implementation of the part of the logical processing, such as jump to the relevant page:

New Processbar ($ ("#pb"), {callback:function () {window.location = "xxx.html";}}). Init ();

The first is the DOM node object, which is obtained in jquery, the second is the plug-in Parameter option, "Callback" represents the completion of the process to do, in the callback to do the implementation of the logic of the part.

　　

Three, complete code for learning, this code has been tested, including the directory structure and related files.

(1), HTML code:

　　　　

<div id= "PB" ><span></span><div class= "PC" ></div></div>

　　

(2), CSS code:

　　

#pb {padding:2px;margin:0 auto;width:560px;height:32px;position:relative;border:1px solid #777; text-align:center; Color: #ff3300; font-family: "Microsoft Jas Black"; font-size:24px;font-weight:bold;} #pb span {position:absolute;top:0;left:45%;} #pb. PC {background-color: #00008B; width:0px;height:32px;}

　　

(3), JS code:

　　

New Processbar ($ ("#pb"), {//Call code completed in jquery Ready Callback:function () {alert ("Load data complete! ") ;}}).  init (); function Processbar (elem,opts) {This.elem = Elem; this.opts = opts; this.tid = null; this.tnum = ten; this.precent = 1; this.currentwidth = 0;} var Pbproto = processbar.prototype;p Bproto.getelem = function () {return this.elem;};p bproto.getopts = function () {retur n this.opts;} ;p bproto.init = function () {This._fnprocesshandler ()};p Bproto._fnprocesshandler = function () {var = this; var cb = th Is.getopts () ["Callback"]; This._setprocessincwidth (this.currentwidth= this.currentwidth + this._getincrementnum ()) ; This._setprecenttext (This.precent.toString ()), if (This.precent <) {This.tid = Window.settimeout (function () { That._fnprocesshandler.call (that);},this.tnum);} Else{this._resettimeout (); $.isfunction (CB) && CB ();} This.precent = this.precent + 1;} ;p bproto._getincrementnum = function () {return This.getelem (). Width ()/+,};p bproto._setprecenttext = function (preceNT) {This.getelem (). FIND ("span"). Text ("%" + precent);};p bproto._setprocessincwidth = function (width) {This.getelem () . Find (". PC"). CSS ("width", Width + "px");} ;p bproto._resettimeout = function () {window.cleartimeout (this.tid); this.tid = null;};

　　

　　

(iv), concluding

(1), the object-oriented thinking mode reasonable analysis of functional requirements.

(2) To organize our plug-in logic in a class way.

(3), constantly reconstruct the above example, how to make reasonable reconstruction that? Do not design too much, to ease, the recommended way is the process of design and object-oriented thinking design combination.

(4), the next article will expand the relevant features, such as adding "text" This property, the user to set the relevant text message, so that the experience more perfect.

　　　　 hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress ... To shout ... (*^__^*)　　　　　　

Big Bear's JavaScript plugin development------(DXJ UI------processbar)