通过之前所说,我们知道了miniui是通过将控件对象的el属性值替换原先带有mini-class的标签。看一下el属性的处理过程,以mini-button为例。
mini-button控件类继承自oo0OOl:
//mini-button 基类构造函数 oo0OOl = function($) { oo0OOl['superclass']['constructor'].apply(this, arguments); this['_create'](); this.el.uid = this.uid; this['_initEvents'](); if (this._clearBorder) this.el.style.borderWidth = "0"; this['addCls'](this.uiCls); this['setWidth'](this.width); this['setHeight'](this.height); this.el.style.display = this.visible ? this.O0l0 : "none"; if ($) mini.applyTo['call'](this, $) } ;
当创建mini-button对象时,会调用此方法,通过['superclass']['constructor'].apply(this,arguments)。然后会调用创建对象的_create属性对应的方法:
//mini-button - _create Olool = function() { this.el = document.createElement("a"); this.el.className = "mini-button mini-state-default mini-corner-all"; this.el.hideFocus = true; this.el.href = "javascript:void(0)"; this['doUpdate']() } ;
看到我们熟悉的原生js创建元素了。赋值给对象的el属性。
之后调用了doUpdate属性对应的方法:
//mini-button - doUpdate Ol1oO = function() { if (this.ooOO === false) return; var B = "" , C = this.text , _ = this['iconStyle'] || this.iconCls || this.img; if (_ && C) B = " mini-button-icon-text "; else if (_ && C === "") { B = " mini-button-icon-only "; C = " " } else if (C == "") C = " "; var D = this['iconStyle'] || ""; if (!D && this.img) D = "background-image:url(" + this.img + ")"; var A = ""; if (_) A = "<span class="mini-button-icon mini-icon mini-iconfont " + this.iconCls + "" style="" + D + ""></span>"; C = "<span class="mini-button-text">" + C + "</span>"; var $ = "<span class="mini-button-inner " + B + "">" + A + C + "</span>"; if (this.allowCls) $ = $ + "<span class="mini-button-allow mini-icon " + this.allowCls + ""></span>"; this.el.innerHTML = $ }
处理之后,我们最初的:
<input type="textbox" class="mini-button" value="111" id="testButton">
被转变成了:
<a class="mini-button mini-state-default mini-corner-all" href="javascript:void(0)" id="testButton"> <span class="mini-button-inner "> <span class="mini-button-text"> </span> </span> </a>
之后应该就没有些什么了。接下来就对API文档中的一些方法做一些更详细的说明,结合miniui官方的示例和平时遇到的一些问题。