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结合CSS操作打印样式的方法

    下面是详细讲解“JQuery结合CSS操作打印样式的方法”的完整攻略。 什么是“JQuery结合CSS操作打印样式的方法” JQuery结合CSS操作打印样式的方法是使用JQuery库中的CSS方法，对网页中的元素进行样式的操作，从而实现在打印时改变元素的显示效果。 如何使用JQuery结合CSS操作打印样式的方法 下面是JQuery结合CSS操作打印样式的…

    jquery 2023年5月28日
    00

  • 常用的JQuery函数及功能小结

    对于“常用的JQuery函数及功能小结”，我们可以从以下几个方面进行讲解： 1. jQuery概述 首先，简单介绍一下jQuery是什么。jQuery是一个JavaScript库，它已经在许多网站上广泛使用，使得JavaScript编程更加容易和方便。它提供了很多实用的功能，比如操作HTML元素、事件处理、动画、AJAX等等。 为了使用jQuery，我们可以…

    jquery 2023年5月27日
    00

  • jQuery Mobile Pagecontainer禁用选项

    可以使用jQuery Mobile的Pagecontainer插件来实现页面的转换和导航控制。禁用Pagecontainer插件中的选项可以在特定的情况下防止用户对不必要的页面转换发生操作。下面是详细攻略： Pagecontainer插件 Pagecontainer插件在jQuery Mobile中是一个非常重要的组件，它允许我们在单个HTML文件中使用多个…

    jquery 2023年5月12日
    00

  • jquery+ajax验证不通过也提交表单问题处理

    当使用jQuery和Ajax进行表单验证时，我们希望在表单验证未能通过的情况下，不会提交表单以及出现页面刷新等行为。一种常见的解决方案是使用Ajax来发送请求并验证数据，如果验证失败，则阻止表单提交。本文将详细演示如何实现“jquery+ajax验证不通过也提交表单问题处理”这一问题的完整攻略。 步骤一：阻止表单的默认提交行为 在提交表单之前，我们需要阻止掉…

    jquery 2023年5月28日
    00

  • jQWidgets jqxFormattedInput close()方法

    jQWidgets jqxFormattedInput close()方法 jQWidgets是一个基于jQuery的UI组件库，提供了丰富的UI组件和工包括表格、日历下拉单等。jqxFormattedInput是jQWidgets的组件之一，用于创建格式化的输入框。close()方法是jqFormattedInput的一个方法，用于关闭输入框。 close…

    jquery 2023年5月9日
    00

  • jQWidgets jqxValidator animationDuration属性

    jQWidgets jqxValidator 动画时长(animationDuration)属性详解 在一个表单验证工具中，动画特效可以提高用户体验。jQWidgets jqxValidator组件允许应用动画特效来引导用户向正确的输入方式迭代。animationDuration属性就是控制这些动画特效的时间。 属性介绍 属性名称 animationDura…

    jquery 2023年5月12日
    00

  • jQWidgets jqxDraw clear()方法

    以下是关于“jQWidgets jqxDraw clear() 方法”的完整攻略，包含两个示例说明： 简介 jqxDraw 控件的 clear() 方法用于清除绘图区域中的所有元素。该方法可以用于清除绘图区域中的所有元素，以便重新绘制新的元素。 完整攻略 下面是 jqx 控件 clear() 方法的完整攻略： 清除绘图区域中的所有元素 draw.clear(…

    jquery 2023年5月10日
    00

  • jQWidgets jqxTextArea scrollBarSize 属性

    jQWidgets jqxTextArea scrollBarSize 属性 简介 jQWidgets jqxTextArea scrollBarSize 属性是 jqxTextArea 组件的一个属性，用于设置文本框的滚动条大小。 语法 $(selector).jqxTextArea({ scrollBarSize: value }); 属性值 value…

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