jquery - 如何添加关闭以最小化到 Gridster.js 小部件的标题

Question

我正在尝试向股票 gridster.js 小部件添加关闭和最小化图标（按钮）。

他们的网站上有一个例子：http: //gridster.net/demos/custom-drag-handle 但它只是为标题创建背景颜色的一种简单方法，并没有说明如何附加按钮（句柄）关闭并最小化..有什么建议吗？

Answer 1

前段时间有人问过这个问题，但是如果您仍然像我一样在寻找答案，那么这个小提琴应该可以给您一个想法：

JSFIDDLE

不是我的，刚刚发现的。

编辑：我自己想出了一个简单的解决方案。

您可以向要创建的小部件添加标题并在其中放置一个按钮。例如：

<li data-row="1" data-col="1" data-sizex="8" data-sizey="4">
      <header>
        <button class="pure-button" id="close-widget-button" style="font-size: 50%; float: right;">
            <i class="fa fa-remove"></i>
        </button>
      </header>
      <iframe id="myframe" src="web/widgets/basiclinewidget2.html" width="600" height="300" frameborder="0">
      </iframe>
  </li>

此示例中的实际小部件是从服务器获取并加载到 iframe 中的。在这个例子中，我还使用带有字体真棒图标的纯按钮。此外，我使按钮“浮动”到右侧并减小了它的大小。您可以像往常一样使用 javascript 向按钮添加操作（如关闭或调整大小）。