如何在点击按钮时动态/静态加载gridster？

在点击按钮时动态/静态加载gridster可以通过以下步骤实现：

首先，确保你已经引入了gridster的相关库文件和依赖。
创建一个按钮元素，并为其添加一个点击事件的监听器。
在点击事件的回调函数中，进行动态/静态加载gridster的操作。
- 动态加载gridster：
  - 创建一个空的div容器，用于承载gridster。
  - 使用JavaScript动态生成gridster的配置项，包括行数、列数、宽度、高度等。
  - 实例化gridster，并将其绑定到div容器中。
  - 将div容器添加到页面中的适当位置，以显示gridster。
- 静态加载gridster：
  - 在HTML页面中预先定义一个空的div容器，用于承载gridster。
  - 使用JavaScript生成gridster的配置项，包括行数、列数、宽度、高度等。
  - 实例化gridster，并将其绑定到div容器中。

根据需要，可以在加载gridster之前或之后进行其他操作，例如设置gridster的布局、添加/删除gridster的项等。

以下是一个示例代码，演示如何在点击按钮时动态加载gridster：

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Gridster Loading</title>
  <link rel="stylesheet" href="gridster.css">
  <script src="gridster.js"></script>
</head>
<body>
  <button id="loadGridsterBtn">Load Gridster</button>
  <div id="gridsterContainer"></div>

  <script>
    document.getElementById('loadGridsterBtn').addEventListener('click', function() {
      // 动态加载gridster
      var gridsterContainer = document.getElementById('gridsterContainer');
      var gridsterConfig = {
        rows: 3,
        cols: 3,
        width: 'auto',
        height: 'auto'
      };
      var gridster = new Gridster(gridsterContainer, gridsterConfig);
      // 添加到页面中显示
      document.body.appendChild(gridsterContainer);
    });
  </script>
</body>
</html>

请注意，上述示例中的代码仅用于演示目的，实际使用时需要根据具体情况进行适当的修改和调整。

关于gridster的更多信息和使用方法，你可以参考腾讯云的相关产品和文档：