博客

jQWidgets jqxKanban高度属性

  • Post category:jquery

jQWidgets jqxKanban 高度属性详解

jQWidgets jqxKanban 是一种看板控件，用于在 Web 应用程序中创建看板。height 属性是 jqxKanban 控件的一个属性，用于设置看板的高度。本文将详细讲解 height 属性的使用方法，并提供两个示例说明。

属性

height 用于设置看板的高度。该属性接受一个数字或字符串作为参数，表示看板的高度。如果参数为数字，则表示看板的高度为该数字值。如果参数为字符串，则表示看板的高度为该字符串值，可以是像素值或百分比值。

// 设置看板的高度为 500 像素
$("#jqxKanban").jqxKanban({ height: 500 });

// 设置看板的高度为 80% 的窗口高度
$("#jqxKanban").jqxKanban({ height: "80%" });

在上述代码中，我们使用 height 属性设置了 jqxKanban 控件的高度。第一个示例将看板的高度设置为 500 像素，第二个示例将看板的高度设置为窗口高度的 80%。

示例

以下是两个示例，演示如何使用 height 属性设置看板的高度。

示例 1

在此示例中，我们创建了一个 jqxKanban 控件，并使用 height 属性将看板的高度设置为 500 像素。

<div id="jqxKanban"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxKanban 控件，并设置高度为 500 像素
        $("#jqxKanban").jqxKanban({
            source: new $.jqx.dataAdapter(source),
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ],
            height: 500
        });
    });
</script>

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 height 属性将看板的高度设置为 500 像素。

示例 2

在此示例中，我们创建了一个 jqxKanban 控件，并使用 height 属性将看板的高度设置为窗口高度的 80%。

<div id="jqxKanban"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxKanban 控件，并设置高度为窗口高度的 80%
        $("#jqxKanban").jqxKanban({
            source: new $.jqx.dataAdapter(source),
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ],
            height: "80%"
        });
    });
</script>

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 height 属性将看板的高度设置为窗口高度的 80%。

以上是 jqxKanban 的 height 属性的详细说明，以及两个示例说明。在示例中，我们使用 height 属性设置了看板的高度，分别为 500 像素和窗口高度的 80%。

jQWidgets jqxKanban headerHeight 属性详解

headerHeight 是 jqxKanban 控件的一个属性，用于设置看板列头的高度。本文将详细讲解 headerHeight 属性的使用方法，并提供两个示例说明。

属性

headerHeight 用于设置看板列头的高度。该属性接受一个数字类型的值，表示列头的高度，单位为像素。默认值为 40。

// 设置看板列头的高度为 50 像素
$("#jqxKanban").jqxKanban({
    headerHeight: 50
});

在上述代码中，我们使用 headerHeight 属性将看板列头的高度设置为 50 像素。

示例

以下是两个示例，演示如何使用 headerHeight 属性设置看板列头的高度。

示例 1

在此示例中，我们创建了一个 jqxKanban 控件，并使用 headerHeight 属性将看板列头的高度设置为 50 像素。

<div id="jqxKanban"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxKanban 控件
        $("#jqxKanban").jqxKanban({
            source: new $.jqx.dataAdapter(source),
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ],
            headerHeight: 50
        });
    });
</script>

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 headerHeight 属性将看板列头的高度设置为 50 像素。

示例 2

在此示例中，我们创建了一个 jqxKanban 控件，并使用 headerHeight 属性将看板列头的高度设置为 80 像素。

<div id="jqxKanban"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxKanban 控件
        $("#jqxKanban").jqxKanban({
            source: new $.jqx.dataAdapter(source),
            columns: [
                { text: "Backlog", dataField: "new" },
                { text: "In Progress", dataField: "work" },
                { text: "Done", dataField: "done" }
            ],
            headerHeight: 80
        });
    });
</script>

在上述代码中，我们创建了一个 jqxKanban 控件，并使用 headerHeight 属性将看板列头的高度设置为 80 像素。

以上是 jqxKanban 的 headerHeight 属性的详细说明，以及两个示例说明。在示例中，我们使用 headerHeight 属性将看板列头的高度设置为指定的像素值。

Tags: