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