jKanban 项目使用教程

jKanban 项目使用教程

jkanbanVanilla Javascript plugin for manage kanban boards项目地址:https://gitcode.com/gh_mirrors/jk/jkanban

1. 项目的目录结构及介绍

jKanban 项目的目录结构如下：

jkanban/
├── dist/
│   ├── jkanban.min.css
│   ├── jkanban.min.js
├── examples/
│   ├── basic.html
│   ├── custom-board.html
│   ├── rich-content.html
├── src/
│   ├── jKanban.js
│   ├── jKanban.scss
├── .gitignore
├── LICENSE
├── README.md

目录结构介绍

• dist/: 包含项目的编译后的文件，包括 jkanban.min.css 和 jkanban.min.js。
• examples/: 包含项目的示例文件，如 basic.html、custom-board.html 和 rich-content.html。
• src/: 包含项目的源代码文件，包括 jKanban.js 和 jKanban.scss。
• .gitignore: Git 忽略文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。

2. 项目的启动文件介绍

项目的启动文件主要是 dist/ 目录下的 jkanban.min.js 和 jkanban.min.css。

启动文件介绍

• jkanban.min.js: 这是 jKanban 的核心 JavaScript 文件，包含了所有的功能和 API。
• jkanban.min.css: 这是 jKanban 的样式文件，定义了 Kanban 板的外观和布局。

使用方法

在你的 HTML 文件中引入这两个文件：

<link rel="stylesheet" href="path/to/jkanban.min.css">
<script src="path/to/jkanban.min.js"></script>

然后初始化 jKanban：

var kanban = new jKanban({
    element: '#kanban-board', // 选择器，指定 Kanban 板的容器
    gutter: '15px',
    widthBoard: '250px',
    responsivePercentage: false,
    dragItems: true,
    boards: []
});

3. 项目的配置文件介绍

jKanban 的配置主要通过初始化时的选项对象来完成。

配置文件介绍

以下是一些常用的配置选项：

• element: 指定 Kanban 板的容器选择器。
• gutter: 指定板与板之间的间距。
• widthBoard: 指定每个板的宽度。
• responsivePercentage: 是否使用百分比来设置板的宽度。
• dragItems: 是否允许拖动项目。
• boards: 初始化的板数据。

示例配置

var kanban = new jKanban({
    element: '#kanban-board',
    gutter: '15px',
    widthBoard: '250px',
    responsivePercentage: false,
    dragItems: true,
    boards: [
        {
            id: 'board-1',
            title: 'To Do',
            item: [
                {
                    id: 'item-1',
                    title: 'Task 1'
                },
                {
                    id: 'item-2',
                    title: 'Task 2'
                }
            ]
        }
    ]
});

通过这些配置选项，你可以自定义 Kanban 板的外观和行为。

jkanbanVanilla Javascript plugin for manage kanban boards项目地址:https://gitcode.com/gh_mirrors/jk/jkanban