添加不同颜色的 Gridster 小部件

Posted 2023-05-07

【中文标题】添加不同颜色的 Gridster 小部件

【英文标题】：Adding Gridster widgets with different color

【发布时间】：2018-08-11 01:42:28

【问题描述】：

我的 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

【参考方案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>

【讨论】：

CSS 中的什么东西使默认颜色变为蓝色？

在demo.css 第 39 行：.gridster .gs-w background: #61A9CF; ... 顺便说一下，您可以使用浏览器的 CSS 检查器查看 DOM 元素样式及其定义位置。例如，在Firefox 和Chrome 中。

哦，这太棒了！