如何向GRidster.js小部件添加close to minimize to header

Question

我试图添加关闭并最小化图标（按钮），例如stock gridster.js小部件。

在他们的网站上有一个例子：http://gridster.net/demos/custom-drag-handle但它只是为标题创建背景颜色的简单方法，并没有说明如何使用按钮（句柄）来关闭并尽量减少..任何建议？

Answer 1

这已经被问过了，但如果你还在寻找答案，就像我一样，这个小提琴应该可以给你一个想法：

<强> JSFIDDLE

这不是我的，只是发现它。

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

您可以向要创建的窗口小部件添加标题，并在其中添加一个按钮。 E.G：

<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中。 在此示例中，我还使用pure按钮和font-awesome图标。此外，我将按钮“浮动”到右侧并缩小其尺寸。 您可以像平常一样使用javascript向按钮添加操作（如关闭或调整大小）。