正文

轻松学会：用jQuery打造实用甘特图，项目进度一目了然

/0 浏览量
0331

引言

甘特图是一种流行的项目管理工具，它可以帮助我们可视化地展示项目的时间线和进度。在网页上实现一个实用的甘特图，可以让项目管理者、团队成员以及利益相关者都能直观地了解项目的进展情况。今天，我们就来学习如何使用jQuery来制作一个简单的甘特图。

环境准备

在开始制作甘特图之前，我们需要准备以下环境：

  1. HTML文件：用于创建甘特图的基本结构。
  2. CSS文件：用于美化甘特图的外观。
  3. jQuery库：用于简化JavaScript的编写。
  4. JavaScript文件：用于实现甘特图的功能。

1. 创建HTML结构

首先，我们需要在HTML文件中创建甘特图的基本结构。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery甘特图示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gantt-chart">
        <div class="gantt-header">
            <div class="gantt-task">任务名称</div>
            <div class="gantt-duration">持续时间</div>
            <div class="gantt-progress">进度</div>
        </div>
        <div class="gantt-body">
            <!-- 任务项 -->
            <div class="gantt-task" data-task-id="1">
                <div class="gantt-name">任务1</div>
                <div class="gantt-duration">3天</div>
                <div class="gantt-progress" style="width: 50%;"></div>
            </div>
            <!-- 更多任务项 -->
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. 编写CSS样式

接下来，我们需要在CSS文件中编写样式，让甘特图看起来更加美观。以下是一个简单的示例：

body {
    font-family: Arial, sans-serif;
}

#gantt-chart {
    width: 100%;
    border-collapse: collapse;
}

.gantt-header {
    background-color: #f0f0f0;
    display: flex;
    justify-content: space-between;
    padding: 8px;
}

.gantt-task,
.gantt-duration,
.gantt-progress {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.gantt-progress {
    background-color: #4CAF50;
    height: 20px;
    border-radius: 4px;
}

3. 编写JavaScript代码

最后，我们需要在JavaScript文件中编写代码，实现甘特图的功能。以下是一个简单的示例：

$(document).ready(function() {
    // 获取所有任务项
    var tasks = $('.gantt-task');

    // 遍历任务项，为每个任务项绑定鼠标悬停事件
    tasks.each(function() {
        var $this = $(this);
        $this.hover(function() {
            // 鼠标悬停时，显示任务详情
            var taskId = $this.data('task-id');
            console.log('任务ID：' + taskId);
        }, function() {
            // 鼠标离开时，隐藏任务详情
            console.log('鼠标离开任务项');
        });
    });
});

总结

通过以上步骤，我们就成功使用jQuery制作了一个简单的甘特图。当然，这只是一个基础示例，您可以根据自己的需求对其进行扩展和优化。例如，可以添加更多功能，如任务拖动、进度条缩放等。希望这篇文章能帮助您轻松学会使用jQuery打造实用甘特图！

-- 展开阅读全文 --