2

カスタム イベントがトリガーされず、正しく動作しない理由を理解するのに少し問題があります... カスタム イベントは各列にアタッチする必要があります。スライダーを 1 つの列のみにバインドするにはどうすればよいですか (以下の cols オブジェクト)。 ? 現在のコードでは、任意の列をクリックすると、すべての列のサイズが変更されます...

小さな div 内で開くスライダーを使用してテーブル列のサイズを動的に変更しようとしています。テーブルをクリックすると、小さなダイアログが読み込まれ、現在のすべての列幅を取得してイベント ハンドラーを追加するコードは次のとおりです。

//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
    });

});

テーブル：

<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>

スライダー：

<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>
4

1 に答える 1

4

これはドキュメントから（少なくとも私には）あまり明確ではありませんでしたが、修正は次のとおりです。

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

どうやら私が使用したコード (以下) は、単一のハンドラーを使用するすべてのスライダーに対してグローバルであり、上記の修正はスライダーのインスタンスに固有のものですか? （私が正しく理解していれば）

$("#ui-resizer").bind("slide", function(e, ui) { ... }
于 2011-04-30T15:39:04.380 に答える