1. Python技术站首页
  2. jquery

jQWidgets jqxKanban主题属性

• jquery

jQWidgets jqxKanban主题属性攻略

jQWidgets 是一个基于 jQuery 的 UI 组件库，提供了丰富的 UI 组件和工具，可于创建现代化 Web 应用程序。 jqxKanban 是看板组件，用于可视化管理任务和流程。攻略将详细介绍 jqxKanban 的主题属性，该属性用于自定义看板的外观。

主题属性

jqxKanban 组件的主题属性用于自定义看板的外观。主题属性是一个对象，包含多个属性，用于定义看板的颜色、字体、边框等样式。

以下是 jqxKanban 的主题属性的默认值：

{
    background: '#FFFFFF',
    color: '#333333',
    border: 'none',
    borderRadius: '0px',
    itemHeaderBackground: '#FFFFFF',
    itemHeaderColor: '#333333',
    itemHeaderBorder: 'none',
    itemHeaderBorderRadius: '0px',
    itemContentBackground: '#FFFFFF',
    itemContentColor: '#333333',
    itemContentBorder: 'none',
    itemContentBorderRadius: '0px',
    itemFooterBackground: '#FFFFFF',
    itemFooterColor: '#333333',
    itemFooterBorder: 'none',
    itemFooterBorderRadius: '0px',
    columnHeaderBackground: '#FFFFFF',
    columnHeaderColor: '#333333',
    columnHeaderBorder: 'none',
    columnHeaderBorderRadius: '0px',
    columnHeaderHeight: '30px',
    columnItemPadding: '5px',
    columnItemMargin: '5px',
    columnItemBorder: 'none',
    columnItemBorderRadius: '0px',
    columnItemBackground: '#FFFFFF',
    columnItemColor: '#333333',
    columnItemOpacity: 1,
    columnItemOpacityDrag: 0.5,
    columnItemOpacityDrop: 0.5,
    columnItemBorderDrag: 'none',
    columnItemBorderDrop: 'none',
    columnItemBorderRadiusDrag: '0px',
    columnItemBorderRadiusDrop: '0px',
    columnItemBackgroundDrag: '#FFFFFF',
    columnItemBackgroundDrop: '#FFFFFF',
    columnItemColorDrag: '#333333',
    columnItemColorDrop: '#333333',
    columnItemZIndex: 100,
    columnItemZIndexDrag: 100,
    columnItemZIndexDrop: 100,
    columnItemTransition: 'none',
    columnItemTransitionDuration: '0s',
    columnItemTransitionTimingFunction: 'ease',
    columnItemTransitionDelay: '0s',
    columnItemCursor: 'default',
    columnItemCursorDrag: 'default',
    columnItemCursorDrop: 'default',
    columnItemOpacityTransition: 'none',
    columnItemOpacityTransitionDuration: '0s',
    columnItemOpacityTransitionTimingFunction: 'ease',
    columnItemOpacityTransitionDelay: '0s',
    columnItemTransformTransition: 'none',
    columnItemTransformTransitionDuration: '0s',
    columnItemTransformTransitionTimingFunction: 'ease',
    columnItemTransformTransitionDelay: '0s',
    columnItemTransform: 'none',
    columnItemTransformOrigin: '50% 50%',
    columnItemTransformRotate: '0deg',
    columnItemTransformScale: '1',
    columnItemTransformSkew: '0deg',
    columnItemTransformTranslateX: '0px',
    columnItemTransformTranslateY: '0px',
    columnItemTransformTranslateZ: '0px',
    columnItemTransformPerspective: '0px',
    columnItemTransformOriginDrag: '50% 50%',
    columnItemTransformRotateDrag: '0deg',
    columnItemTransformScaleDrag: '1',
    columnItemTransformSkewDrag: '0deg',
    columnItemTransformTranslateXDrag: '0px',
    columnItemTransformTranslateYDrag: '0px',
    columnItemTransformTranslateZDrag: '0px',
    columnItemTransformPerspectiveDrag: '0px',
    columnItemTransformOriginDrop: '50% 50%',
    columnItemTransformRotateDrop: '0deg',
    columnItemTransformScaleDrop: '1',
    columnItemTransformSkewDrop: '0deg',
    columnItemTransformTranslateXDrop: '0px',
    columnItemTransformTranslateYDrop: '0px',
    columnItemTransformTranslateZDrop: '0px',
    columnItemTransformPerspectiveDrop: '0px',
    columnItemOpacityDragTransition: 'none',
    columnItemOpacityDragTransitionDuration: '0s',
    columnItemOpacityDragTransitionTimingFunction: 'ease',
    columnItemOpacityDragTransitionDelay: '0s',
    columnItemOpacityDropTransition: 'none',
    columnItemOpacityDropTransitionDuration: '0s',
    columnItemOpacityDropTransitionTimingFunction: 'ease',
    columnItemOpacityDropTransitionDelay: '0s',
    columnItemTransformDragTransition: 'none',
    columnItemTransformDragTransitionDuration: '0s',
    columnItemTransformDragTransitionTimingFunction: 'ease',
    columnItemTransformDragTransitionDelay: '0s',
    columnItemTransformDropTransition: 'none',
    columnItemTransformDropTransitionDuration: '0s',
    columnItemTransformDropTransitionTimingFunction: 'ease',
    columnItemTransformDropTransitionDelay: '0s',
    columnHeaderHeight: '30px',
    columnHeaderPadding: '5px',
    columnHeaderMargin: '5px',
    columnHeaderBorderDrag: 'none',
    columnHeaderBorderDrop: 'none',
    columnHeaderBorderRadiusDrag: '0px',
    columnHeaderBorderRadiusDrop: '0px',
    columnHeaderBackgroundDrag: '#FFFFFF',
    columnHeaderBackgroundDrop: '#FFFFFF',
    columnHeaderColorDrag: '#333333',
    columnHeaderColorDrop: '#333333',
    columnHeaderZIndex: 100,
    columnHeaderZIndexDrag: 100,
    columnHeaderZIndexDrop: 100,
    columnHeaderTransition: 'none',
    columnHeaderTransitionDuration: '0s',
    columnHeaderTransitionTimingFunction: 'ease',
    columnHeaderTransitionDelay: '0s',
    columnHeaderCursor: 'default',
    columnHeaderCursorDrag: 'default',
    columnHeaderCursorDrop: 'default',
    columnHeaderOpacityTransition: 'none',
    columnHeaderOpacityTransitionDuration: '0s',
    columnHeaderOpacityTransitionTimingFunction: 'ease',
    columnHeaderOpacityTransitionDelay: '0s',
    columnHeaderTransformTransition: 'none',
    columnHeaderTransformTransitionDuration: '0s',
    columnHeaderTransformTransitionTimingFunction: 'ease',
    columnHeaderTransformTransitionDelay: '0s',
    columnHeaderTransform: 'none',
    columnHeaderTransformOrigin: '50% 50%',
    columnHeaderTransformRotate: '0deg',
    columnHeaderTransformScale: '1',
    columnHeaderTransformSkew: '0deg',
    columnHeaderTransformTranslateX: '0px',
    columnHeaderTransformTranslateY: '0px',
    columnHeaderTransformTranslateZ: '0px',
    columnHeaderTransformPerspective: '0px',
    columnHeaderTransformOriginDrag: '50% 50%',
    columnHeaderTransformRotateDrag: '0deg',
    columnHeaderTransformScaleDrag: '1',
    columnHeaderTransformSkewDrag: '0deg',
    columnHeaderTransformTranslateXDrag: '0px',
    columnHeaderTransformTranslateYDrag: '0px',
    columnHeaderTransformTranslateZDrag: '0px',
    columnHeaderTransformPerspectiveDrag: '0px',
    columnHeaderTransformOriginDrop: '50% 50%',
    columnHeaderTransformRotateDrop: '0deg',
    columnHeaderTransformScaleDrop: '1',
    columnHeaderTransformSkewDrop: '0deg',
    columnHeaderTransformTranslateXDrop: '0px',
    columnHeaderTransformTranslateYDrop: '0px',
    columnHeaderTransformTranslateZDrop: '0px',
    columnHeaderTransformPerspectiveDrop: '0px',
    columnHeaderOpacityDragTransition: 'none',
    columnHeaderOpacityDragTransitionDuration: '0s',
    columnHeaderOpacityDragTransitionTimingFunction: 'ease',
    columnHeaderOpacityDragTransitionDelay: '0s',
    columnHeaderOpacityDropTransition: 'none',
    columnHeaderOpacityDropTransitionDuration: '0s',
    columnHeaderOpacityDropTransitionTimingFunction: 'ease',
    columnHeaderOpacityDropTransitionDelay: '0s',
    columnHeaderTransformDragTransition: 'none',
    columnHeaderTransformDragTransitionDuration: '0s',
    columnHeaderTransformDragTransitionTimingFunction: 'ease',
    columnHeaderTransformDragTransitionDelay: '0s',
    columnHeaderTransformDropTransition: 'none',
    columnHeaderTransformDropTransitionDuration: '0s',
    columnHeaderTransformDropTransitionTimingFunction: 'ease',
    columnHeaderTransformDropTransitionDelay: '0s'
}

示例1：自定义看板的主题属性

以下是一个示例，演示如何使用 jqxKanban 的主题属性自定义看板的外观：

<!DOCTYPE html>
<html>
<head>
    <title>jqxKanban</title>
    <link rel="stylesheet" href="jq/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jq/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxkanban.js"></script>
</head>
<body>
    <div id="jqxKanban"></div>
    <script>
        var source = {
            localData: [
                { text: '任务1', state: 'new' },
                { text: '任务2', state: 'new' },
                { text: '任务3', state: 'done' }
            ],
            dataType: 'array',
            dataFields: [
                { name: 'text', type: 'string' },
                { name: 'state', type: 'string' }
            ]
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $('#jqxKanban').jqxKanban({
            source: dataAdapter,
            columns: [
                { text: '新任务', dataField: 'state', maxItems: 3 },
                { text: '已完成任务', dataField: 'state', maxItems: 3 }
            ],
            template: '#template',
            theme: {
                background: '#F5F5F5',
                color: '#333333',
                border: '1px solid #CCCCCC',
                borderRadius: '5px',
                itemHeaderBackground: '#FFFFFF',
                itemHeaderColor: '#333333',
                itemHeaderBorder: 'none',
                itemHeaderBorderRadius: '0px',
                itemContentBackground: '#FFFFFF',
                itemContentColor: '#333333',
                itemContentBorder: 'none',
                itemContentBorderRadius: '0px',
                itemFooterBackground: '#FFFFFF',
                itemFooterColor: '#333333',
                itemFooterBorder: 'none',
                itemFooterBorderRadius: '0px',
                columnHeaderBackground: '#F5F5F5',
                columnHeaderColor: '#333333',
                columnHeaderBorder: 'none',
                columnHeaderBorderRadius: '0px',
                columnHeaderHeight: '30px',
                columnItemPadding: '5px',
                columnItemMargin: '5px',
                columnItemBorder: 'none',
                columnItemBorderRadius: '0px',
                columnItemBackground: '#FFFFFF',
                columnItemColor: '#333333',
                columnItemOpacity: 1,
                columnItemOpacityDrag: 0.5,
                columnItemOpacityDrop: 0.5,
                columnItemBorderDrag: 'none',
                columnItemBorderDrop: 'none',
                columnItemBorderRadiusDrag: '0px',
                columnItemBorderRadiusDrop: '0px',
                columnItemBackgroundDrag: '#FFFFFF',
                columnItemBackgroundDrop: '#FFFFFF',
                columnItemColorDrag: '#333333',
                columnItemColorDrop: '#333333',
                columnItemZIndex: 100,
                columnItemZIndexDrag: 100,
                columnItemZIndexDrop: 100,
                columnItemTransition: 'none',
                columnItemTransitionDuration: '0s',
                columnItemTransitionTimingFunction: 'ease',
                columnItemTransitionDelay: '0s',
                columnItemCursor: 'default',
                columnItemCursorDrag: 'default',
                columnItemCursorDrop: 'default',
                columnItemOpacityTransition: 'none',
                columnItemOpacityTransitionDuration: '0s',
                columnItemOpacityTransitionTimingFunction: 'ease',
                columnItemOpacityTransitionDelay: '0s',
                columnItemTransformTransition: 'none',
                columnItemTransformTransitionDuration: '0s',
                columnItemTransformTransitionTimingFunction: 'ease',
                columnItemTransformTransitionDelay: '0s',
                columnItemTransform: 'none',
                columnItemTransformOrigin: '50% 50%',
                columnItemTransformRotate: '0deg',
                columnItemTransformScale: '1',
                columnItemTransformSkew: '0deg',
                columnItemTransformTranslateX: '0px',
                columnItemTransformTranslateY: '0px',
                columnItemTransformTranslateZ: '0px',
                columnItemTransformPerspective: '0px',
                columnItemTransformOriginDrag: '50% 50%',
                columnItemTransformRotateDrag: '0deg',
                columnItemTransformScaleDrag: '1',
                columnItemTransformSkewDrag: '0deg',
                columnItemTransformTranslateXDrag: '0px',
                columnItemTransformTranslateYDrag: '0px',
                columnItemTransformTranslateZDrag: '0px',
                columnItemTransformPerspectiveDrag: '0px',
                columnItemTransformOriginDrop: '50% 50%',
                columnItemTransformRotateDrop: '0deg',
                columnItemTransformScaleDrop: '1',
                columnItemTransformSkewDrop: '0deg',
                columnItemTransformTranslateXDrop: '0px',
                columnItemTransformTranslateYDrop: '0px',
                columnItemTransformTranslateZDrop: '0px',
                columnItemTransformPerspectiveDrop: '0px',
                columnItemOpacityDragTransition: 'none',
                columnItemOpacityDragTransitionDuration: '0s',
                columnItemOpacityDragTransitionTimingFunction: 'ease',
                columnItemOpacityDragTransitionDelay: '0s',
                columnItemOpacityDropTransition: 'none',
                columnItemOpacityDropTransitionDuration: '0s',
                columnItemOpacityDropTransitionTimingFunction: 'ease',
                columnItemOpacityDropTransitionDelay: '0s',
                columnItemTransformDragTransition: 'none',
                columnItemTransformDragTransitionDuration: '0s',
                columnItemTransformDragTransitionTimingFunction: 'ease',
                columnItemTransformDragTransitionDelay: '0s',
                columnItemTransformDropTransition: 'none',
                columnItemTransformDropTransitionDuration: '0s',
                columnItemTransformDropTransitionTimingFunction: 'ease',
                columnItemTransformDropTransitionDelay: '0s',
                columnHeaderHeight: '30px',
                columnHeaderPadding: '5px',
                columnHeaderMargin: '5px',
                columnHeaderBorderDrag: 'none',
                columnHeaderBorderDrop: 'none',
                columnHeaderBorderRadiusDrag: '0px',
                columnHeaderBorderRadiusDrop: '0px',
                columnHeaderBackgroundDrag: '#F5F5F5',
                columnHeaderBackgroundDrop: '#F5F5F5',
                columnHeaderColorDrag: '#333333',
                columnHeaderColorDrop: '#333333',
                columnHeaderZIndex: 100,
                columnHeaderZIndexDrag: 100,
                columnHeaderZIndexDrop: 100,
                columnHeaderTransition: 'none',
                columnHeaderTransitionDuration: '0s',
                columnHeaderTransitionTimingFunction: 'ease',
                columnHeaderTransitionDelay: '0s',
                columnHeaderCursor: 'default',
                columnHeaderCursorDrag: 'default',
                columnHeaderCursorDrop: 'default',
                columnHeaderOpacityTransition: 'none',
                columnHeaderOpacityTransitionDuration: '0s',
                columnHeaderOpacityTransitionTimingFunction: 'ease',
                columnHeaderOpacityTransitionDelay: '0s',
                columnHeaderTransformTransition: 'none',
                columnHeaderTransformTransitionDuration: '0s',
                columnHeaderTransformTransitionTimingFunction: 'ease',
                columnHeaderTransformTransitionDelay: '0s',
                columnHeaderTransform: 'none',
                columnHeaderTransformOrigin: '50% 50%',
                columnHeaderTransformRotate: '0deg',
                columnHeaderTransformScale: '1',
                columnHeaderTransformSkew: '0deg',
                columnHeaderTransformTranslateX: '0px',
                columnHeaderTransformTranslateY: '0px',
                columnHeaderTransformTranslateZ: '0px',
                columnHeaderTransformPerspective: '0px',
                columnHeaderTransformOriginDrag: '50% 50%',
                columnHeaderTransformRotateDrag: '0deg',
                columnHeaderTransformScaleDrag: '1',
                columnHeaderTransformSkewDrag: '0deg',
                columnHeaderTransformTranslateXDrag: '0px',
                columnHeaderTransformTranslateYDrag: '0px',
                columnHeaderTransformTranslateZDrag: '0px',
                columnHeaderTransformPerspectiveDrag: '0px',
                columnHeaderTransformOriginDrop: '50% 50%',
                columnHeaderTransformRotateDrop: '0deg',
                columnHeaderTransformScaleDrop: '1',
                columnHeaderTransformSkewDrop: '0deg',
                columnHeaderTransformTranslateXDrop: '0px',
                columnHeaderTransformTranslateYDrop: '0px',
                columnHeaderTransformTranslateZDrop: '0px',
                columnHeaderTransformPerspectiveDrop: '0px',
                columnHeaderOpacityDragTransition: 'none',
                columnHeaderOpacityDragTransitionDuration: '0s',
                columnHeaderOpacityDragTransitionTimingFunction: 'ease',
                columnHeaderOpacityDragTransitionDelay: '0s',
                columnHeaderOpacityDropTransition: 'none',
                columnHeaderOpacityDropTransitionDuration: '0s',
                columnHeaderOpacityDropTransitionTimingFunction: 'ease',
                columnHeaderOpacityDropTransitionDelay: '0s',
                columnHeaderTransformDragTransition: 'none',
                columnHeaderTransformDragTransitionDuration: '0s',
                columnHeaderTransformDragTransitionTimingFunction: 'ease',
                columnHeaderTransformDragTransitionDelay: '0s',
                columnHeaderTransformDropTransition: 'none',
                columnHeaderTransformDropTransitionDuration: '0s',
                columnHeaderTransformDropTransitionTimingFunction: 'ease',
                columnHeaderTransformDropTransitionDelay: '0s'
            }
        });
    </script>
    <script id="template" type="text/x-jquery-tmpl">
        <div class="jqx-kanban-item">
            <div class="jqx-kanban-item-color-status"></div>
            <div class="jqx-kanban-item-text">${text}</div>
            <div class="jqx-kanban-item-footer">
                <div class="jqx-kanban-item-state">${state}</div>
            </div>
        </div>
    </script>
</body>
</html>

在此示例中，我们创建了一个 jqxKanban 组件，并

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxKanban主题属性 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月10日
下一篇 2023年5月10日

相关文章

  • jQuery表单选择器用法详解

    来详细讲解一下“jQuery表单选择器用法详解”的完整攻略。如下： jQuery表单选择器用法详解 什么是表单选择器 在jQuery中，表单选择器指的是一系列的选择器，用于选择HTML表单中的表单元素。 表单选择器的语法 通常，表单选择器的语法如下所示： $(":input") 下面我们来详细解读一下这个语法： $：这是jQuery选择器…

    jquery 2023年5月27日
    00

  • jquery进行数组遍历如何跳出当前的each循环

    要在使用jQuery进行数组遍历时跳出当前的each循环，我们可以采用return false或break的方式进行跳出操作，具体操作方式和示例如下： return false方式 使用return false方式可以在当前元素匹配到条件时跳出当前的each循环，具体实现方式如下： $.each(array, function(index, value) {…

    jquery 2023年5月28日
    00

  • jQWidgets jqxQRcode labelFont属性

    以下是关于 jQWidgets jqxQRcode 组件中 labelFont 属性的详细攻略。 jQWidgets jqxQRcode labelFont 属性 jQWidgets jqxQRcode labelFont 属性用于设置二维码标签的字体。 语法 // 设置二维码标签的字体 $(‘#qrcode’).jqxQRCode({ labelFont:…

    jquery 2023年5月12日
    00

  • jQWidgets jqxTreeMap colorRanges属性

    以下是关于 jQWidgets jqxTreeMap 组件中 colorRanges 属性的详细攻略。 jQWidgets jqxTreeMap colorRanges 属性 jQWidgets jqxTreeMap 的 colorRanges 属性用于设置组件中数据项颜色范围。您可以使用此属性来控制数据项的颜色，以便更好地展示数据。 语法 $(‘#tree…

    jquery 2023年5月12日
    00

  • jQWidgets jqxProgressBar min属性

    以下是关于 jQWidgets jqxProgressBar 组件中 min 属性的详细攻略。 jQWidgets jqxProgressBar min 属性 jQWidgets jqxProgressBar 组件的 min 属性用设置进度条的最小值。 语法 $(‘#progressbar’).jqxProgressBar({ min: value }); …

    jquery 2023年5月12日
    00

  • jQWidgets jqxNavigationBar invalidate()方法

    以下是关于 jQWidgets jqxNavigationBar 组件中 invalidate() 方法的详细攻略。 jQWidgets jqxNavigationBar invalidate() 方法 jQWidgets jqxNavigationBar 的 invalidate() 方法用于使导航栏组件无效并强制重新渲染。 语法 // 使导航栏组件无效并…

    jquery 2023年5月12日
    00

  • jQWidgets jqxSwitchButton toggle() 方法

    jQWidgets是一个用于开发跨平台Web和移动应用程序的高级UI组件库，它提供了丰富的Web组件、HTML5 UI控件和数据可视化图表、图像处理和文件上传控件等功能。 jqxSwitchButton控件是jQWidgets中的一个开关按钮控件，它提供了一种用户友好的方式来切换状态。这个控件可以使用toggle()方法来实现切换开关按钮的状态，以下是该方法…

    jquery 2023年5月12日
    00

  • jQWidgets jqxTooltip高度属性

    以下是关于 jQWidgets jqxTooltip 组件中高度属性的详细攻略。 jQWidgets jqxTooltip 高度属性 jQWidgets jqxTooltip 组件的高度属性用于设置提示框的高度。可以使用该属性控制提示框的高度。 语法 $(‘#tooltip’).jqxTooltip({ height: 100 }); 示例 以下两个示例演示…

    jquery 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部