Gridster.js 教程 - 快速入门与配置指南

2026-01-16 10:22:19作者：段琳惟

1. 项目目录结构及介绍

在 gridster.js 的仓库中，主要的文件和目录包括：

dist/ - 包含编译后的生产版本和开发版本的 CSS 和 JS 文件。
src/ - 源代码目录，存放未压缩的 JavaScript 和 CSS 代码。
demo/ - 示例和演示页面，帮助理解插件的工作方式。
package.json - 项目依赖和构建脚本的信息。
README.md - 项目简介和快速入门指南。

核心文件：

src/js/gridster.js - 主要的 jQuery 插件源代码。
src/css/gridster.css - 样式表文件。

2. 项目的启动文件介绍

Gridster.js 不提供一个典型的 "启动文件"，因为它是作为一个 jQuery 插件来使用的。在你的项目中，你需要引入 jQuery 和 gridster.js 的库文件，然后在合适的时机初始化插件。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Gridster.js 示例</title>
    <link rel="stylesheet" href="path/to/gridster.min.css">

    <!-- 引入jQuery（通常从CDN获取） -->
    <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script>

    <!-- 引入gridster.js -->
    <script src="path/to/gridster.min.js"></script>
</head>
<body>
    <!-- 这里是网格容器 -->
    <div id="gridster"></div>

    <script>
        $(function() {
            // 初始化 gridster
            $('#gridster').gridster({
                // 配置项在这里
            });
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

Gridster.js 并没有特定的配置文件，但它接受一系列配置选项作为参数来初始化插件。这些配置选项可以在初始化时传递给 .gridster() 方法。以下是一些主要配置项：

$(function() {
    $('#gridster').gridster({
        widget_base_dimensions: [70, 70], // 基础单元格大小
        widget_margins: [10, 10], // 单元格之间间距
        min_cols: 5, // 最小列数
        max_cols: null, // 可选最大列数
        draggable: { // 拖动配置
            start: function() {}, // 开始拖动时回调
            stop: function() {} // 结束拖动时回调
        },
        resizable: { // 变形配置
            handles: ['n', 'e', 's', 'w'], // 设置可调整的方向
            start: function() {}, // 开始调整大小时回调
            resize: function() {}, // 调整大小过程中回调
            stop: function() {} // 结束调整大小时回调
        }
    });
});