none
Uso en varias ocasiones de $.widget de jQuery RRS feed

  • Pregunta

  • Buenas,

    En mi código de .net estoy metiendo varias desplegables que con el jQuery-ui y sus widgets estoy consiguiendo que se pueda escribir en ellos y se autocompleten, o bien, puedas abrirlo como el desplegable que es y seleccionar en vez de escribir, el caso es que, por ejemplo, tengo una página en los que tengo que insertar varios y, en uno, por ejemplo, la cabecera es "$.widget("custom.cargoc1proov", {" y después viene todo el código javascript que lo completa. Lo que no se es como volver a crear otra caja de texto igual, puedo duplicar ese chorreo de texto de javascript, cambiando la cabecera por "$.widget("custom.estadoproov", {" y duplicando el texto, pero claro, eso es mucho código y, por supuesto, no lo quiero porque hace la página mas ilegible.

    Estaba pensado que al igual que en las llamadas a objetos de jquery "$("#obj1, obj2, ..")" se puede hacer, aquí a lo mejor también, pero no se hacerlo ¿Me echáis un cable?

    Gracias

    jueves, 26 de septiembre de 2019 9:51

Respuestas

Todas las respuestas

  • Hola   Jesús Prieto

     

    Gracias por levantar tu consulta en los foros de MSDN. Con respecto a la misma,  te comento que para  que la comunidad de foros te pueda asesorar mejor, es necesario que nos compartas el form/code que estás desarrollando

     

     

    Gracias por usar los foros de MSDN.

     

    Pablo Rubio

     ____

     

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde. 

     

    Microsoft ofrece este servicio de forma gratuita, con la finalidad de ayudar a los usuarios y la ampliación de la base de datos de conocimientos relacionados con los productos y tecnologías de Microsoft.  

     

    Este contenido es proporcionado "tal cual" y no implica ninguna responsabilidad de parte de Microsoft.

    jueves, 26 de septiembre de 2019 15:03
    Moderador
  • Este es el código que tengo de script para los widgets como ejemplo

     // WIDGET CARGO 1

                $.widget("custom.cargoc1proov", {
                    _create: function () {
                        this.wrapper = $("<span>")
                            .addClass("custom-combobox")
                            .insertAfter(this.element);

                        this.element.hide();
                        this._createAutocomplete();
                        this._createShowAllButton();
                    },

                    _createAutocomplete: function () {
                        var selected = this.element.children(":selected"),
                            value = selected.val() ? selected.text() : "";

                        this.input = $("<input>")
                            .appendTo(this.wrapper)
                            .val(value)
                            .attr("title", "")
                            .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                            .autocomplete({
                                delay: 0,
                                minLength: 0,
                                source: $.proxy(this, "_source")
                            })
                            .tooltip({
                                classes: {
                                    "ui-tooltip": "ui-state-highlight"
                                }
                            });

                        this._on(this.input, {
                            autocompleteselect: function (event, ui) {
                                ui.item.option.selected = true;
                                this._trigger("select", event, {
                                    item: ui.item.option
                                });
                            },

                            autocompletechange: "_removeIfInvalid"
                        });
                    },

                    _createShowAllButton: function () {
                        var input = this.input,
                            wasOpen = false;

                        $("<a>")
                            .attr("tabIndex", -1)
                            .attr("title", "Mostrar Todo")
                            .tooltip()
                            .appendTo(this.wrapper)
                            .button({
                                icons: {
                                    primary: "ui-icon-triangle-1-s"
                                },
                                text: false
                            })
                            .removeClass("ui-corner-all")
                            .addClass("custom-combobox-toggle ui-corner-right")
                            .on("mousedown", function () {
                                wasOpen = input.autocomplete("widget").is(":visible");
                            })
                            .on("click", function () {
                                input.trigger("focus");

                                // Close if already visible
                                if (wasOpen) {
                                    return;
                                }

                                // Pass empty string as value to search for, displaying all results
                                input.autocomplete("search", "");
                            });
                    },

                    _source: function (request, response) {
                        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                        response(this.element.children("option").map(function () {
                            var text = $(this).text();
                            if (this.value && (!request.term || matcher.test(text)))
                                return {
                                    label: text,
                                    value: text,
                                    option: this
                                };
                        }));
                    },

                    _removeIfInvalid: function (event, ui) {

                        // Selected an item, nothing to do
                        if (ui.item) {
                            return;
                        }

                        // Search for a match (case-insensitive)
                        var value = this.input.val(),
                            valueLowerCase = value.toLowerCase(),
                            valid = false;
                        this.element.children("option").each(function () {
                            if ($(this).text().toLowerCase() === valueLowerCase) {
                                this.selected = valid = true;
                                return false;
                            }
                        });

                        // Found a match, nothing to do
                        if (valid) {
                            return;
                        }

                        // Remove invalid value
                        this.input
                            .val("")
                            .attr("title", value + " no coincide ningún item") //didn't match any item")
                            .tooltip("open");
                        this.element.val("");
                        this._delay(function () {
                            this.input.tooltip("close").attr("title", "");
                        }, 2500);
                        this.input.autocomplete("instance").term = "";
                    },

                    _destroy: function () {
                        this.wrapper.remove();
                        this.element.show();
                    }
                });
                // / WIDGET CARGO

                // WIDGET CARGO 1
                $.widget("custom.cargoc2proov", {
                    _create: function () {
                        this.wrapper = $("<span>")
                            .addClass("custom-combobox")
                            .insertAfter(this.element);

                        this.element.hide();
                        this._createAutocomplete();
                        this._createShowAllButton();
                    },

                    _createAutocomplete: function () {
                        var selected = this.element.children(":selected"),
                            value = selected.val() ? selected.text() : "";

                        this.input = $("<input>")
                            .appendTo(this.wrapper)
                            .val(value)
                            .attr("title", "")
                            .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                            .autocomplete({
                                delay: 0,
                                minLength: 0,
                                source: $.proxy(this, "_source")
                            })
                            .tooltip({
                                classes: {
                                    "ui-tooltip": "ui-state-highlight"
                                }
                            });

                        this._on(this.input, {
                            autocompleteselect: function (event, ui) {
                                ui.item.option.selected = true;
                                this._trigger("select", event, {
                                    item: ui.item.option
                                });
                            },

                            autocompletechange: "_removeIfInvalid"
                        });
                    },

                    _createShowAllButton: function () {
                        var input = this.input,
                            wasOpen = false;

                        $("<a>")
                            .attr("tabIndex", -1)
                            .attr("title", "Mostrar Todo")
                            .tooltip()
                            .appendTo(this.wrapper)
                            .button({
                                icons: {
                                    primary: "ui-icon-triangle-1-s"
                                },
                                text: false
                            })
                            .removeClass("ui-corner-all")
                            .addClass("custom-combobox-toggle ui-corner-right")
                            .on("mousedown", function () {
                                wasOpen = input.autocomplete("widget").is(":visible");
                            })
                            .on("click", function () {
                                input.trigger("focus");

                                // Close if already visible
                                if (wasOpen) {
                                    return;
                                }

                                // Pass empty string as value to search for, displaying all results
                                input.autocomplete("search", "");
                            });
                    },

                    _source: function (request, response) {
                        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                        response(this.element.children("option").map(function () {
                            var text = $(this).text();
                            if (this.value && (!request.term || matcher.test(text)))
                                return {
                                    label: text,
                                    value: text,
                                    option: this
                                };
                        }));
                    },

                    _removeIfInvalid: function (event, ui) {

                        // Selected an item, nothing to do
                        if (ui.item) {
                            return;
                        }

                        // Search for a match (case-insensitive)
                        var value = this.input.val(),
                            valueLowerCase = value.toLowerCase(),
                            valid = false;
                        this.element.children("option").each(function () {
                            if ($(this).text().toLowerCase() === valueLowerCase) {
                                this.selected = valid = true;
                                return false;
                            }
                        });

                        // Found a match, nothing to do
                        if (valid) {
                            return;
                        }

                        // Remove invalid value
                        this.input
                            .val("")
                            .attr("title", value + " no coincide ningún item") //didn't match any item")
                            .tooltip("open");
                        this.element.val("");
                        this._delay(function () {
                            this.input.tooltip("close").attr("title", "");
                        }, 2500);
                        this.input.autocomplete("instance").term = "";
                    },

                    _destroy: function () {
                        this.wrapper.remove();
                        this.element.show();
                    }
                });
                // / WIDGET CARGO

                //$("#combobox").combobox();
                //$("#toggle").on("click", function () {
                //    $("#combobox").toggle();
                //});
                $("#estadoproov").estadoproov();
                $("#toggle").on("click", function () {
                    $("#estadoproov").toggle();
                });
                
                $("#cargoc1proov").cargoc1proov();
                $("#cargoc2proov").cargoc2proov();
                $("#toggle").on("click", function () {
                    $("#cargoc1proov").toggle();
                    $("#cargoc2proov").toggle();
                });

    Y TENGO 2 CAMPOS ASÍ LLAMADOS

    <select id="cargoc1proov"></select>

    <select id="cargoc2proov"></select>

    COMO SE APRECIA ES EL MISMO CAMPO DUPLICADO Y, POR DESCONOCIMIENTO, NO SE COMO TRATAR LOS DOS CAMPOS EN UNA ÚNICA FUNCIÓN EN VEZ DE EN DOS, PORQUE ESO, POR SUPUESTO, OCUPA ESPACIO; ES MAS, TENTO QUE REPLICAR UN PAR DE VECES MAS ESTE CAMPO Y TENDRÉ QUE HACER LOS MISMO CON OTROS ¿COMO SE HACE ESTO?

    GRACIAS

    lunes, 7 de octubre de 2019 11:21
  • hola

    >>Estaba pensado que al igual que en las llamadas a objetos de jquery "$("#obj1, obj2, ..")"

    porque no defines un class para estos tags html, asi seleccionas a todos por medio del . (punto)

    $(".nombreclass")

    Class Selector (“.class”)

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta Jesús Prieto martes, 8 de octubre de 2019 11:37
    lunes, 7 de octubre de 2019 12:04
  • Hola Jesús,

    lo que yo veo es una mala practica y una falta de conocimiento sobre la funcionalidad y uso de los Widgets, solo necesitas crear un Widgets e instanciarlo a los elementos cuya funcionalidad va cambiar.

    asi que mejor te dejo este link para que lo revises. Widget Factory | jQuery UI, ademas de que podras encontrar mucha variedad de ejemplos.

    Salu2,


    Marvin E. Pineda

      ComboBoxMultiColumns

     NetBarControl

      TextEditor

    • Marcado como respuesta Jesús Prieto martes, 8 de octubre de 2019 11:42
    lunes, 7 de octubre de 2019 13:27
    Moderador
  • ¿Sería cambiar  esta línea ?

    $.widget("custom.cargoc2proov", {

    ¿por Esta?

    $.widget(".NombreClase", {

    martes, 8 de octubre de 2019 11:41