添加不同颜色的 Gridster 小部件

Question

我的 JavaScript 代码使用 Gridster 加载小部件。每次我使用“添加”按钮添加小部件时，它都会以 CSS 中定义的默认颜色（蓝色）加载。

我想加载不同颜色的小部件。我想让用户选择颜色（下拉菜单），并且根据选择的颜色，小部件应该加载。

如何在 JavaScript 中做到这一点？

var gridster;

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

$(document).on("click", ".delete-button", function() {
  var gridster = $(".gridster ul").gridster().data('gridster');
  gridster.remove_widget($(this).parent());
});

$(document).on("click", ".add-button", function() {
  var gridster = $(".gridster ul").gridster().data('gridster');
  gridster.add_widget('<li><button class="delete-button" style="float: right;">-</button><h3></h3></li>', 1, 1);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link href="//dsmorse.github.io/gridster.js/demos/assets/css/demo.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet" />

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>1</h3>
    </li>
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>2</h3>
    </li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>3</h3>
    </li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>4</h3>
    </li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>5</h3>
    </li>
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>6</h3>
    </li>
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>7</h3>
    </li>
    <li data-row="2" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>8</h3>
    </li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>9</h3>
    </li>
    <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>10</h3>
    </li>
    <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>11</h3>
    </li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>12</h3>
    </li>



</div>


<button class="add-button" style="float:top;">Add Widget</button>

View on JSFiddle

Answer 1

一种方法是在添加小部件时从<select> 列表中获取选定的值。构建一个类名来引用所选颜色的 CSS 样式并将该类应用到要添加的小部件。

var gridster;
var $color_picker = $('#color_picker');

gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [50, 50],
  widget_margins: [5, 5],
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

$('.gridster').on("click", ".delete-button", function() {
  gridster.remove_widget($(this).parent());
});

$(".add-button").on("click", function() {

  // get selected color value
  var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text':'-'
    }))
    .append($('<h3>', {
      'text': '#'
    }));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);

});

.gridster {
  margin: 0 0 3em;
}

.delete-button {
  float: right;
}

.gridster .gs-w.color_lightblue {
  background-color: lightblue;
}
.gridster .gs-w.color_lightgreen {
  background-color: lightgreen;
}
.gridster .gs-w.color_salmon {
  background-color: salmon;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link href="//dsmorse.github.io/gridster.js/demos/assets/css/demo.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet" />

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button">-</button>
      <h3>1</h3>
    </li>
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button">-</button>
      <h3>2</h3>
    </li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button">-</button>
      <h3>3</h3>
    </li>
  </ul>
</div>

<select id="color_picker">
  <option value="lightgreen">Light Green</option>
  <option value="lightblue">Light Blue</option>
  <option value="salmon">Salmon</option>
</select>

<button class="add-button">Add Widget</button>