Jquery参数动态设置滚动高度

时间:2011-12-13 05:01:12

标签: jquery asp.net

我正在使用以下jQuery函数,其中我需要传递一个额外的参数来访问高度作为动态值。有没有办法做到这一点?到目前为止我的代码是:

(需要获取ScrollHeight的值)

(function (cash) {
$.fn.Scrollable = function (options) {
    var defaults = {
        //ScrollHeight: 400,
        //Height:height,
        Width: 0
    };

    var options = $.extend(defaults, options);

    return this.each(function () {
        var grid = $(this).get(0);
        //var doc = this.document.getElementById("height").nodeValue.toString();

        var gridWidth = grid.offsetWidth;

        var ScrollHeight = 400; //$(this).getElementById("height").Value; // height.toString();
        alert("");
        var headerCellWidths = new Array();
        for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
            headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
        }
        grid.parentNode.appendChild(document.createElement("div"));
        var parentDiv = grid.parentNode;

        var table = document.createElement("table");
        for (i = 0; i < grid.attributes.length; i++) {
            if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
            }
        }
        table.style.cssText = grid.style.cssText;
        table.style.width = parseInt(gridWidth + 17) + "px";
        table.appendChild(document.createElement("tbody"));
        table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
        var cells = table.getElementsByTagName("TH");

        var gridRow = grid.getElementsByTagName("TR")[0];
        for (var i = 0; i < cells.length; i++) {
            var width;
            if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                width = headerCellWidths[i];
            }
            else {

                width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
            }

            cells[i].style.width = parseInt(width - 3) + "px";
            gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
        }
        parentDiv.removeChild(grid);

        var dummyHeader = document.createElement("div");
        dummyHeader.appendChild(table);
        parentDiv.appendChild(dummyHeader);
        //            if (options.Width > 0) {
        //                gridWidth = options.Width;
        //            }
        var scrollableDiv = document.createElement("div");

        gridWidth = parseInt(gridWidth) + 17;

        scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";

        scrollableDiv.appendChild(grid);
        parentDiv.appendChild(scrollableDiv);
    });
};})(jQuery); 

我正在调用以下函数:

$(document).ready(function () {
    $('#<%=grdLog.ClientID %>').Scrollable(400);
}).data("height", 400); ;

1 个答案:

答案 0 :(得分:2)

如果我理解正确,你希望能够将高度传递给函数调用。

变化:

var defaults = {
    //ScrollHeight: 400,
    //Height:height,
    Width: 0
};

要:

var defaults = {
    //ScrollHeight: 400,
    Height: 0,
    Width: 0
};

当您调用该功能时,您现在可以像这样设置高度:

$('#<%=grdLog.ClientID %>').Scrollable({
    Width  : 400,
    Height : 400
});

然后,您可以在options.Height方法调用后的jQuery插件中的任意位置访问options.Width$.extend()