miniui控件的el属性(自动生成的标签)

通过之前所说，我们知道了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">&nbsp;</span>
    </span>
</a>

之后应该就没有些什么了。接下来就对API文档中的一些方法做一些更详细的说明，结合miniui官方的示例和平时遇到的一些问题。