jQuery.Gantt 开源项目教程

盛欣凯Ernestine

于 2024-08-21 08:59:55 发布

阅读量313

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00231/article/details/141378108

版权

jQuery.Gantt 开源项目教程

jQuery.GanttjQuery Gantt Chart项目地址:https://gitcode.com/gh_mirrors/jq/jQuery.Gantt

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

jQuery.Gantt 项目的目录结构如下：

jQuery.Gantt/
├── css/
│   ├── images/
│   │   ├── bar.gif
│   │   ├── header.gif
│   │   ├── split.gif
│   │   └── split_hover.gif
│   ├── style.css
│   └── system.css
├── examples/
│   ├── basic.html
│   ├── data.json
│   ├── dynamic.html
│   ├── index.html
│   ├── json.html
│   ├── load_indicator.html
│   ├── milestones.html
│   ├── multiple_events.html
│   ├── no_overlap.html
│   ├── resize.html
│   ├── scroll.html
│   ├── selectable.html
│   ├── sortable.html
│   ├── start_empty.html
│   ├── tooltip.html
│   └── weekends.html
├── js/
│   ├── jquery.fn.gantt.js
│   ├── jquery.gantt.js
│   └── jquery.min.js
└── README.md

目录结构介绍

css/：包含项目的样式文件和图片资源。
- images/：包含用于 Gantt 图表的图像文件。
- style.css：主要样式文件。
- system.css：系统相关的样式文件。
examples/：包含多个示例文件，展示了 Gantt 图表的不同用法和功能。
js/：包含 JavaScript 文件，包括 jQuery 库和 Gantt 插件。
- jquery.fn.gantt.js：Gantt 插件的主要实现文件。
- jquery.gantt.js：Gantt 插件的辅助文件。
- jquery.min.js：压缩后的 jQuery 库文件。
README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 examples/index.html，它是一个示例文件，展示了如何使用 jQuery.Gantt 插件创建一个基本的 Gantt 图表。

启动文件内容

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Gantt</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
    <link rel="stylesheet" href="../css/system.css" type="text/css" />
</head>
<body>
    <div class="gantt"></div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.fn.gantt.js"></script>
    <script>
        $(function() {
            "use strict";
            $(".gantt").gantt({
                source: "data.json",
                scale: "weeks",
                minScale: "weeks",
                maxScale: "months",
                navigate: "scroll",
                itemsPerPage: 10,
                onItemClick: function(data) {
                    alert("Item clicked - show some details");
                },
                onAddClick: function(dt, rowId) {
                    alert("Empty space clicked - add an item!");
                },
                onRender: function() {
                    if (window.console && typeof console.log === "function") {
                        console.log("chart rendered");
                    }
                }
            });
        });
    </script>
</body>
</html>

启动文件介绍

引入了样式文件 style.css 和 system.css。
引入了 jQuery 库文件 jquery.min.js 和 Gantt 插件文件 jquery.fn.gantt.js。
在 <div class="gantt"></div> 中初始化 Gantt 图表，并配置了相关参数，如数据源、时间刻度、点击事件等。

3. 项目的配置文件介绍

项目的配置文件主要是 jquery.fn.gantt.js，它包含了 Gantt 插件的配置选项和功能实现。

配置文件内容

(function($) {
    "use strict";

jQuery.GanttjQuery Gantt Chart项目地址:https://gitcode.com/gh_mirrors/jq/jQuery.Gantt

盛欣凯Ernestine

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery.Gantt 开源项目教程

jQuery.Gantt 开源项目教程 jQuery.GanttjQuery Gantt Chart项目地址:https://gitcode.com/gh_mirrors/jq/jQuery.Gantt 1. 项目的目录结构及介绍jQuery.Gantt 项目的目录结构如下：jQuery.Gantt/├── css/│ ├── images/│ │ ├── bar.gif...
复制链接

扫一扫