esCampo normal esCampo js

Benchmark created by Mauricio on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
js
$.widget("ui.esCampo", {
    options: {version: '3.1.0.0', modo: "edicion", nVersion: false, tipo: 'text', id: '', nombre: '', valor: '', etiqueta: '', obligatorio: false, validar: '', clase: '', identificador: true, maxLength: '', disabled: false, idCampo: '', ancho: '', boton: '', etiquetaInterna: '', tooltip: false, anchoFijo: ''},
    _init: function() {
        var $this = this,
        o = this.options;

        this.element.className += this.element.className+' tipoCampoTexto ';

        if(o.modo.toUpperCase() == "NA"){return;}
        if(typeof o.obligatorio != 'boolean'){ o.obligatorio = Boolean(o.obligatorio)};
         
        var llevaEtiqueta = true,
            labelDom = document.createElement('label'),
            legendDom = document.createElement('legend'),
            inputDom = document.createElement('input'),
            clsCampo = ' esCampo ' + o.modo + ' ' + o.clase + ' ';

            labelDom.className = 'TextoEtiqueta';
            labelDom.innerHTML = o.etiqueta;


        if((o.identificador != null && !o.identificador) ||  o.etiqueta == ''){
            llevaEtiqueta = false;
        }

        if (typeof o.tooltip == 'object') {
            var spanTooltip = document.createElement('span');

            labelDom.style.position = 'static';
            legendDom.style.position = 'static';

            legendDom.appendChild($(spanTooltip).esInfo(o.tooltip));
        }

        if(o.idCampo != ''){
            legendDom.id = o.idCampo;
        }
        
        if(o.obligatorio){ 
            var emDom = document.createElement('em');
            emDom.innerHTML = '*';
            legendDom.appendChild(emDom);
            
            clsCampo += ' campoObligatorio';
            
        }

        if(o.id != (o.nombre + o.id)){
            if(o.id == o.nombre){
                o.id += o.nombre
            }else{
                if(!o.id || o.id == ''){
                    o.nombre += o.nombre;
                }
            }
        }

        switch (o.modo) {
            case 'captura':
            case 'edicion':
                inputDom.id = o.id;
                inputDom.setAttribute('type',o.tipo);
                inputDom.setAttribute('name',o.nombre);
                inputDom.setAttribute('placeholder',o.etiquetaInterna);
                inputDom.className = clsCampo;
                inputDom.value = o.valor;

                labelDom.appendChild(inputDom);

                if(o.anchoFijo != ''){
                    inputDom.style.width = o.anchoFijo
                } 

                if(llevaEtiqueta){
                    labelDom.insertBefore(legendDom,labelDom.firstChild);
                }

                var placeholder = 'placeholder' in document.createElement('input');
                if(!placeholder) {
                    var etiquetaInternaDom = document.createElement = 'label';

                    etiquetaInternaDom.className = 'pHolder';
                    etiquetaInternaDom.innerHTML = o.etiquetaInterna;

                    inputDom.parentNode.insertBefore(etiquetaInternaDom, inputDom.nextSibling);

                    inputDom.onfocus = function() {
                        etiquetaInternaDom.style.display = 'none';
                    };

                    inputDom.onblur = function() {
                        var input = $(this);
                        etiquetaInternaDom.style.display = (input.val() == ''?'block':'none');
                    }

                    inputDom.blur();

                    etiquetaInternaDom.onclick = function(){
                        inputDom.focus();
                        etiquetaInternaDom.style.display = 'none';
                    };
                }
            break;
            case 'visualizacion':
                var spanDom = document.createElement('span');

                spanDom.className = clsCampo;
                spanDom.innerHTML = o.valor == ''?'---':o.valor;

                labelDom.appendchild(spanDom);

                inputDom.type = 'hidden';
                inputDom.id = o.id;
                inputDom.setAttribute('name',o.nombre);
                inputDom.className = clsCampo;
                inputDom.value = o.valor;

                labelDom.appendChild(inputDom);
                if(llevaEtiqueta){
                    labelDom.insertBefore(legendDom,labelDom.firstChild);
                }
            break;
            case 'horizontal':
                var spanDom = document.createElement('span');

                spanDom.className = clsCampo+' esCampoHorizontal ';
                spanDom.innerHTML = o.valor == ''?'---':o.valor;

                labelDom.appendChild(spanDom);

                /*inputDom.type = 'hidden';
                inputDom.id = o.id;
                inputDom.setAttribute('name',o.nombre);
                inputDom.className = clsCampo;
                inputDom.value = o.valor;

                labelDom.appendChild(inputDom);*/
                
                if(llevaEtiqueta){
                    legendDom.className += ' esCampoHorizontallegend ';
                    labelDom.insertBefore(legendDom,labelDom.firstChild);
                }

                this.element.className += ' esCampoHorizontalContenedor ';
            break;

            case 'ticket_visualizacion':
                legendDom.className = legendDom.className.replace(' TextoEtiqueta ',' ');
                legendDom.className += ' ecTicket-textoEtiquetaCampo-jQuery ';

                var spanDom = document.createElement('span');

                spanDom.id = o.id;
                spanDom.className = ' ecTicket-contenidoCampo-jQuery ';
                spanDom.innerHTML = o.valor == ''?'---':o.valor; 

                labelDom.appendChild(spanDom);

                /*inputDom.type = 'hidden';
                inputDom.id = o.id;
                inputDom.setAttribute('name',o.nombre);
                inputDom.className = clsCampo;
                inputDom.value = o.valor;

                labelDom.appendChild(inputDom);*/

                if(llevaEtiqueta){
                    legendDom.className += ' ecTicket-labelCampo-jQuery ';
                    labelDom.insertBefore(legendDom,labelDom.firstChild);
                }

                this.element.className += ' ecTicket-contenedorCampo-jQuery ';
            break;
            case 'ticket_edicion':
                legendDom.className = legendDom.className.replace(' TextoEtiqueta ',' ');
                legendDom.className += ' ecTicket-textoEtiquetaCampo-jQuery ';

                inputDom.type = o.tipo;
                inputDom.id = o.id;
                inputDom.setAttribute('name',o.nombre);
                inputDom.className = 'ecTicket-contenidoCampo-jQuery';
                inputDom.value = o.valor;

                labelDom.appendChild(inputDom);

                labelDom.append(inputDom);

                if(llevaEtiqueta){
                    legendDom.className += ' ecTicket-labelCampo-jQuery ';
                    labelDom.insertBefore(legendDom,labelDom.firstChild);
                }

                this.element.className += ' ecTicket-contenedorCampo-jQuery ';
            break;
        }

        if (typeof o.boton == 'object') {
            for(var b in o.boton){
                var btn = $('<span>')[b](o.boton[b])
                .on('click', '[type=button]', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    var evento = $.Event('esCampo_inputButton');
                    evento.data_set = {
                        campoValor: inputDom.value,
                        nombre: {
                            boton: b,
                            campo: inputDom.getAttribute('name'),
                        },
                        objeto: {
                            boton: $(this),
                            campo: inputDom,
                            elemento : $this.element
                        },
                        cb: function(re) {
                            inputDom.value = re;
                            //inputDom.attr('value', re)
                        }
                    };
                    $this.element.trigger(evento);
                });
                btn.find('label').css('padding','0px');

                $(labelDom).append(btn);
            }
        }
        this.element.append(labelDom);

        if(o.nVersion && inputDom != ""){
            if (o.maxLength != ''){inputDom.maxLength = o.maxLength;}
            if (o.disabled){inputDom.disabled = o.disabled;}
            if (typeof o.validar == 'object'){$(inputDom).validar(o.validar);}
        }    

        if (o.ancho){inputDom.style.minWidth = o.ancho+'px';}

        inputDom.onchange = function(){
            if(inputDom != ''){inputDom.className = inputDom.className.replace(' campoValidado ',' ');}
        }
    },
    cleanValue: function() {
        $(this.element).find("input").val('');
   },
    getOptions: function() {
        return new CloneObject(this.options);
    },
    getValue: function() {
        return (!$(this.element).find('input').val() && $(this.element).find('input').val() != "") ? null : $(this.element).find('input').val();
    },
    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments);
        $(this.element).empty();
    }
});

for(var x=0;x<=100;x++){
$("<div>").esCampo();
}
ready
actual
$.widget("ui.esCampo", {
    options: {version: '3.0.0.4', modo: "edicion", nVersion: false, tipo: 'text', id: '', nombre: '', valor: '', etiqueta: '', obligatorio: false, validar: '', clase: '', identificador: true, maxLength: '', disabled: false, idCampo: '', ancho: '', boton: '', etiquetaInterna: '', tooltip: false, anchoFijo: ''},
    _init: function() {
        var $this = this,
        o = this.options;

        this.element.addClass('tipoCampoTexto');

        if(o.modo.toUpperCase() == "NA"){return;}
        if(typeof o.obligatorio != 'boolean'){ o.obligatorio = Boolean(o.obligatorio)};
         
        var llevaEtiqueta = true,
            labelDom = $('<label>'),
            legendDom = $('<legend>').attr('class','TextoEtiqueta').html(o.etiqueta),
            inputDom = $('<input>'),
            clsCampo = "esCampo " + o.modo + " " + o.clase + " ";

        if((o.identificador != null && !o.identificador) ||  o.etiqueta == ''){
            llevaEtiqueta = false;
        }

        if (typeof o.tooltip == 'object') {
            labelDom.css('position','static');
            legendDom.append($('<span>').esInfo(o.tooltip)).css('position','static');
        }

        if(o.idCampo != ''){
            legendDom.attr('id',o.idCampo);
        }
        
        if(o.obligatorio){ 
            clsCampo += ' campoObligatorio';
            legendDom.append('<em>*</em>');
        }

        if(o.id != (o.nombre + o.id)){
            if(o.id == o.nombre){
                o.id += o.nombre
            }else{
                if(!o.id || o.id == ''){
                    o.nombre += o.nombre;
                }
            }
        }

        switch (o.modo) {
            case 'captura':
            case 'edicion':
                inputDom
                .prop('type', o.tipo)
                .attr('id',o.id)
                .attr('name',o.nombre)
                .attr('placeholder',o.etiquetaInterna)
                .attr('class',clsCampo)
                .attr('value', o.valor);

                labelDom.append(inputDom);
                
                if(o.anchoFijo != ''){inputDom.css('width',o.anchoFijo)} 
                if(llevaEtiqueta){labelDom.prepend(legendDom)}

                var placeholder = 'placeholder' in document.createElement('input');
                if(!placeholder) {
                    var etiquetaInternaDom = $('<label>').attr('class','pHolder').text(o.etiquetaInterna);

                    inputDom.after(etiquetaInternaDom)
                        .focus(function() {
                            etiquetaInternaDom.hide();
                        })
                        .blur(function() {
                            var input = $(this);
                            if(input.val() == ''){etiquetaInternaDom.show();
                            }else{etiquetaInternaDom.hide();}
                        })
                        .blur();

                    etiquetaInternaDom.on('click', function() {
                        inputDom.focus();
                        etiquetaInternaDom.hide();
                    });
                }
            break;
            case 'visualizacion':
                var spanDom = $('<span>')
                .attr("class", clsCampo)
                .html(o.valor == ''?'---':o.valor);
                
                labelDom.append(spanDom);
                inputDom
                .prop("type","hidden")
                .attr("id",o.id)
                .attr("name",o.nombre)
                .attr("class",clsCampo)
                .attr("value",o.valor);                

                labelDom.append(inputDom);

                if(llevaEtiqueta){labelDom.prepend(legendDom);}
            break;
            case 'horizontal':
                var spanDom = $('<span>')
                .attr("class", clsCampo + " esCampoHorizontal")
                .html(o.valor == ''?'---':o.valor);

                labelDom.append(spanDom);
                /*inputDom
                .prop("type","hidden")
                .attr("id",o.id)
                .attr("name",o.nombre)
                .attr("class",clsCampo)
                .attr("value",o.valor);

                labelDom.append(inputDom);*/

                if(llevaEtiqueta){
                    legendDom.addClass('esCampoHorizontallegend');
                    labelDom.prepend(legendDom);
                }

                this.element.addClass('esCampoHorizontalContenedor');
            break;

            case 'ticket_visualizacion':
                legendDom
                .removeClass('TextoEtiqueta')
                .addClass('ecTicket-textoEtiquetaCampo-jQuery');

                var spanDom = $('<span>')
                .attr("id",o.id)
                .attr("class", "ecTicket-contenidoCampo-jQuery")
                .html(o.valor == ''?'---':o.valor);

                labelDom.append(spanDom);
                
                /*inputDom
                .prop("type","hidden")
                .attr("id",o.id)
                .attr("name",o.nombre)
                .attr("class",clsCampo)
                .attr("value",o.valor);

                labelDom.append(inputDom);*/

                if(llevaEtiqueta){
                    legendDom.addClass('ecTicket-labelCampo-jQuery');
                    labelDom.prepend(legendDom);
                }
                
                this.element.addClass('ecTicket-contenedorCampo-jQuery');
            break;
            case 'ticket_edicion':
                legendDom
                .removeClass('TextoEtiqueta')
                .addClass('ecTicket-textoEtiquetaCampo-jQuery');

                inputDom
                .prop('type', o.tipo)
                .attr("id",o.id)
                .attr("name",o.nombre)
                .attr("class",'ecTicket-contenidoCampo-jQuery')
                .attr("value",o.valor);

                labelDom.append(inputDom);
                
                if(llevaEtiqueta){
                    legendDom.addClass('ecTicket-labelCampo-jQuery')
                    labelDom.prepend(legendDom);
                }
                
                this.element.addClass('ecTicket-contenedorCampo-jQuery');
            break;
        }

        if (typeof o.boton == 'object') {
            for(var b in o.boton){
                var btn = $('<span>')[b](o.boton[b])
                .on('click', '[type=button]', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    var evento = $.Event('esCampo_inputButton');
                    evento.data_set = {
                        campoValor: inputDom.attr('value'),
                        nombre: {
                            boton: b,
                            campo: inputDom.attr('name')
                        },
                        objeto: {
                            boton: $(this),
                            campo: inputDom,
                            elemento : $this.element
                        },
                        cb: function(re) {inputDom.attr('value', re)}
                    };
                    $this.element.trigger(evento);
                });
                btn.find('label').css('padding','0px');

                labelDom.append(btn);
            }
        }
        this.element.append(labelDom);

        if(o.nVersion && inputDom != ""){
            if (o.maxLength != ''){inputDom.attr('maxLength', o.maxLength);}
            if (o.disabled){inputDom.prop('disabled', o.disabled);}
            if (typeof o.validar == 'object'){inputDom.validar(o.validar);}
        }    

        if (o.ancho){inputDom.css('min-width', o.ancho + "px");}

        inputDom.on('change',function(){
            if(inputDom != ''){inputDom.removeClass('campoValidado');}
        });

    },
    cleanValue: function() {
        $(this.element).find("input").val('');
   },
    getOptions: function() {
        return new CloneObject(this.options);
    },
    getValue: function() {
        return (!$(this.element).find('input').val() && $(this.element).find('input').val() != "") ? null : $(this.element).find('input').val();
    },
    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments);
        $(this.element).empty();
    }
});
for(var x=0;x<=100;x++){
$("<div>").esCampo();
}
ready
normal
/*
 ** Name: esCampo (Base para crear los Elementos Tipo Input)
 ** Parametros:/
 **  nombre :Opcional - Default nombre del widget de quien lo llama,
 **  id : Opcional - Default nombre del widget de quien lo llama,
 **  clase:Opcional - Default nombre del widget de quien lo llama - Normalmente es igual que el nombre de este,
 **  etiqueta:Opcional - Default vacia - Etiqueta (Placeholder e identificador visual de campo),
 **  valor:Opcional - Default vacia - Valor a mostrar en el Campo,
 **  modo:Opcional - Default edicion (edicion/captura/visualizacion) - Tipo de Campo,
 **  //disabled:Opcional - Default false (false/true),
 **  tipo:Opcional - Default text (text/hidden/submit/button),
 **  obligatorio - Opcional - Default false (false/true),
 **  identificador - Opcional - Default true (true/false) - Si lleva o no Etiqueta
 **  idCampo - Opcional - Default vacio
 **  src - Opcional - DEfault undefined SRC
 ** Salida: < input type="[tipo]" >
 ** Funciones:
 **  cleanValue - Limpia el valor del Elemento
 **  getValue - Regresa el valor del Elemento
 **  destroy - Vacia el Elemento
 */

    $.widget("ui.esCampo", {
        options: {modo: "edicion", nVersion: false, tipo: 'text', id: '', nombre: '', valor: '', etiqueta: '', obligatorio: false, validar: '', clase: '', identificador: true, maxLength: '', disabled: false, idCampo: '', verOp: false, ancho: '', boton: '', etiquetaInterna: '', tooltip: false, anchoFijo: ''},
        _init: function() {
            var thisELement = this.element, 
            $o = this.options,
            content = $('<label>'),
            llevaEtiqueta = $o.identificador,
            campo = "", clsCampo = "";
            
            $o.obligatorio = Boolean($o.obligatorio);

            if ($o.verOp)
                return console.warn(this.options);
            if ($o.modo.toUpperCase() == "NA") {
                return;
            }
            llevaEtiqueta = ((llevaEtiqueta == "false" || !llevaEtiqueta) && llevaEtiqueta != null) ? false : (($o.etiqueta == '') ? false : true);
            $o.id = ($o.id != $o.nombre + $o.id) ? (($o.id == $o.nombre) ? ($o.id + $o.nombre) : (($o.id == null || $o.id == '') ? ($o.nombre + $o.nombre) : $o.id)) : $o.id;
            $o.identificador = ($o.idCampo != "") ? $('<legend id="' + $o.idCampo + '">').addClass('TextoEtiqueta').html($o.etiqueta) : $('<legend>').addClass('TextoEtiqueta').html($o.etiqueta);
            clsCampo = "esCampo " + $o.modo + " " + $o.clase + " " + (($o.obligatorio) ? 'campoObligatorio' : '');
            if ($o.obligatorio)
                $o.identificador.append('<em>*</em>');

            if (typeof $o.tooltip == 'object') {
                $o.identificador.append($('<span>').esInfo($o.tooltip))
                $o.identificador.css('position', 'static');
                $(content).css('position', 'static');
            }

            switch ($o.modo) {
                case 'captura':
                case 'edicion':
                    var ancho = "";
                    if ($o.anchoFijo != ""){
                         ancho = 'max-width:' + $o.anchoFijo + ';min-width:' + $o.anchoFijo;
                    }
                    campo = $('<input>', {'type': $o.tipo, 'id': $o.id, 'name': $o.nombre, 'class': clsCampo, 'value': ($o.modo == 'edicion') ? $o.valor : '', 'placeholder': $o.etiquetaInterna, 'style': ancho});
                    $(content).append(campo);
                    if (llevaEtiqueta) {
                        $(content).prepend($o.identificador);
                    }
                    var placeholder = 'placeholder' in document.createElement('input');
                    if (!placeholder) {
                        var $etiquetaInterna = $('<label>', {'style': 'position: absolute;width: 150px;top: 17px;left: 5px;height: 15px;overflow: hidden;color: #a9a9a9;'}).text($o.etiquetaInterna);
                        campo.after($etiquetaInterna);
                        campo.focus(function() {
                            $etiquetaInterna.hide();
                        }).blur(function() {
                            var input = $(this);
                            if (input.val() == '') {
                                $etiquetaInterna.show();
                            } else {
                                $etiquetaInterna.hide();
                            }
                        }).blur();
                        $etiquetaInterna.on('click', function() {
                            campo.focus();
                            $etiquetaInterna.hide();
                        });
                    }
                    break;
                case 'visualizacion':
                    campo = $('<span>').attr("class", clsCampo).html(($o.valor == '') ? '---' : $o.valor);
                    $(content).append(campo);
                    campo = $('<input>').attr("name", $o.nombre).attr("class", clsCampo).attr("id", $o.id).attr("type", "hidden").attr("value", $o.valor);
                    $(content).append(campo);
                    if (llevaEtiqueta) {
                        $(content).prepend($o.identificador);
                    }
                    break;
                case 'horizontal':
                    campo = $('<span>').attr("class", clsCampo + " " + "esCampoHorizontal").html(($o.valor == '') ? '---' : $o.valor);
                    $(content).append(campo);
                    campo = $('<input>').attr("name", $o.nombre).attr("class", clsCampo).attr("id", $o.id).attr("type", "hidden").attr("value", $o.valor);
                    if (llevaEtiqueta) {
                        $(content).prepend($o.identificador).addClass('esCampoHorizontallegend');
                    }
                    $(this.element).addClass('esCampoHorizontalContenedor');
                    break;
                case 'ticket_visualizacion':
                    $o.identificador.removeClass('TextoEtiqueta').addClass('ecTicket-textoEtiquetaCampo-jQuery');
                    campo = $('<span>').attr('id', $o.id).removeClass('esCampo').attr("class", "ecTicket-contenidoCampo-jQuery").html(($o.valor == '') ? '---' : $o.valor);
                    $(content).append(campo);
                    campo = $('<input>').attr("name", $o.nombre).attr("class", clsCampo).attr("id", $o.id).attr("type", "hidden").attr("value", $o.valor);
                    if (llevaEtiqueta) {
                        $(content).prepend($o.identificador).addClass('ecTicket-labelCampo-jQuery');
                    }
                    $(this.element).addClass('ecTicket-contenedorCampo-jQuery');
                    break;
                case 'ticket_edicion':
                    $o.identificador.removeClass('TextoEtiqueta').addClass('ecTicket-textoEtiquetaCampo-jQuery');
                    campo = $('<input>').attr("id", $o.id).removeClass('esCampo').attr("name", $o.nombre).attr("class", "ecTicket-contenidoCampo-jQuery").attr("value", $o.valor);
                    $(content).append(campo);
                    if (llevaEtiqueta) {
                        $(content).prepend($o.identificador).addClass('ecTicket-labelCampo-jQuery');
                    }
                    $(this.element).addClass('ecTicket-contenedorCampo-jQuery');
                    break;
            }


            if ($o.boton != '') {
                $.each($o.boton, function(k, v) {
                    var btn = $('<span>')[k](v);
                    btn.on('click', '[type=button]', function(ee) {
                        $tbtn = $(this);
                        ee.stopPropagation();
                        ee.preventDefault();
                        var evento = $.Event('esCampo_inputButton')
                        evento.data_set = {
                            campoValor: campo.attr('value'),
                            nombre: {
                                boton: k,
                                campo: campo.attr('name')
                            },
                            objeto: {
                                boton: $tbtn,
                                campo: campo,
                                elemento: thisELement
                            },
                            cb: function(re) {
                                campo.attr('value', re)
                            }
                        }

                        thisELement.trigger(evento);
                    })
                            .find('label').css('padding', '0px');
                    $(content).append(btn);
                });
            }

            $(this.element).append(content);

            if ($o.nVersion) {
                if (campo != "") {
                    if ($o.maxLength != '')
                        campo.attr('maxLength', $o.maxLength)
                    if ($o.disabled)
                        campo.attr('disabled', $o.disabled);
                    campo.validar($o.validar);
                }
            }

            if ($o.ancho != '') {
                $o.ancho = $o.ancho + "px";
                campo.css('min-width', $o.ancho)
            }

            //Se utiliza para quitar la clase del campo obligatorio sin contestar
            campo.on('change',function(){
                if(campo != '')campo.removeClass('campoValidado');
            });

        },
        cleanValue: function() {
            $(this.element).find("input").val('');
        },
        getOptions: function() {
            return new CloneObject(this.options);
        },
        getValue: function() {
            return (!$(this.element).find('input').val() && $(this.element).find('input').val() != "") ? null : $(this.element).find('input').val();
        },
        destroy: function() {
            $.Widget.prototype.destroy.apply(this, arguments);
            $(this.element).empty();
        }
    });


for(var x=0;x<=100;x++){
$("<div>").esCampo();
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Mauricio on