jquery ui- (control deslizante) el enlace de eventos personalizados no funciona

Question

Tengo un pequeño problema para entender por qué mi evento personalizado no se activa y funciona correctamente ... Mi evento personalizado debe adjuntarse a cada columna, ¿cómo puedo hacer que el control deslizante esté vinculado a una sola columna (colsobjeto a continuación)?Con mi código actual, si hago clic en cualquier columna, todas las columnas cambian de tamaño ...

Estoy tratando de cambiar dinámicamente el tamaño de una columna de la tabla usando un control deslizante que se abre dentro de un pequeño div, si se hace clic en una tabla, mi pequeño diálogo se carga y luego para obtener todo el ancho de columna actual y agregar un controlador de eventos, mi código es:

//param: data = current table
function DisplayColumnData(data) {

    var cols = $(data).find("col");

   //attach slider to each col
    $(cols).each(function(i) {

            var that = this;

            var coldata = $("<div class='ui-col-data' />"); 
            var colvalue = $("<span class='ui-col-value' />");
                colvalue.text($(that).attr("width"));

            coldata.text(" >col" + i + ": ").append(colvalue);

            $(".ui-resizer-cols").append(coldata);

            //handle column resizing, bind each col to the slider...
            $(coldata).click(function() {
                $(".ui-col-data").unbind("resizehandler");
                //remove all other binded events then trigger the new event only...
                $(coldata).trigger("resizehandler", that);
            });

    });

}

$(".ui-col-data").live("resizehandler", function(event, data) {
    var $parent = $(this).closest(".ui-resizer-cols");

    //remove classes from all other cols so only the clicked col is resized
    $parent.find(".ui-col-data").removeClass("ui-col-border");
    $parent.find(".ui-col-value").removeClass("ui-resizer-val");

    $(this).addClass("ui-col-border"); //now the active col   

    var valfield = $(this).find("span.ui-col-value");
    valfield.addClass("ui-resizer-val");


    //update whatever...
    $("#ui-resizer").slider('value', valfield.text() );
    $("#ui-resizer").bind("slide", function(e, ui) {
        valfield.text(ui.value);
        $(data).attr("width", ui.value); //update col
    });

});

TABLA:

<table>
<colgroup>
      <col width="25%">
      <col width="25%">
      <col width="25%">
      <col width="25%">
</colgroup>
<tbody>
<tr>...</tr>// 4 td's here as normal
<tr>...</tr>
</tbody>
</table>

Control deslizante:

<div class="ui-resizer-content">
        <div id="ui-resizer" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <div class="ui-slider-range ui-slider-range-max ui-widget-header" style="width: 100%;"></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
        <div class="ui-resizer-cols"></div>

           <p> <a href="#" id="lnkResizer" style="float: right;">close</a>
        </p>
    </div>

Answer 1

Esto no estaba tan claro (al menos para mí) en la documentación, pero la solución es:

 $("#ui-resizer").slider({
                    slide: function(e, ui) {
                        valfield.text(ui.value + "%");
                        $(column).attr("width", ui.value); //update col
                    }
                });

Aparentemente, el código que usé (a continuación) es global para todos los controles deslizantes que usan un solo controlador, y la solución anterior es específica para una instancia de un control deslizante.(si he entendido bien)

$("#ui-resizer").bind("slide", function(e, ui) { ... }