允许用户从几种预定义颜色中进行选择的简单方法

Question

我正在创建一个使用 Bootstrap 进行样式设置的 ASP.NET 网站。

我正在寻找允许用户从预定义的颜色列表中进行选择的最简单方法。我更喜欢下拉菜单，并且颜色是可见的，而不是选择颜色名称。另外，我想要一种具有尽可能少依赖项的简单方法。

看起来 Bootstrap 有一个颜色选择器，但它允许/要求用户创建任何随机颜色。我需要将选择限制为几种预定义的颜色。

我正在寻找有关可用选项的建议和经验。

Answer 1

考虑到您已经在使用 Boostrap，这里有一个可能的实现：

(function() {
const _init = () => {
document.querySelectorAll('.customColorPicker').forEach(picker => {
//create a button group
const wrapper = document.createElement("div");
wrapper.classList.add("btn-group");
//add toggle button
const button = document.createElement("button");
const colorPreviewBox = document.createElement("div");
colorPreviewBox.innerHTML = " ";
colorPreviewBox.setAttribute("style", "display:inline-block; height:100%; width:2em; margin-right:6px; border: 1px solid #888");
button.textContent = "Choose Color";
button.classList.add("btn");
button.classList.add("btn-default");
button.classList.add("dropdown-toggle");
button.setAttribute("data-toggle", "dropdown");
button.prepend(colorPreviewBox);
wrapper.appendChild(button);
//add options
const menuDiv = document.createElement("div");
menuDiv.classList.add("dropdown-menu");
const options = [];
for (let i = 0, n = picker.options.length; i < n; i++) {
options.push(picker.options[i]);
}
options.forEach(option => {
const optionLink = document.createElement("a");
optionLink.classList.add("dropdown-item");
optionLink.innerHTML = "&nbsp;";
optionLink.style.background = option.text;
optionLink.addEventListener('click', () => {
const color = option.text;
picker.value = option.text;
colorPreviewBox.style.background = option.text;
});
menuDiv.appendChild(optionLink);
});
wrapper.appendChild(menuDiv);
picker.parentNode.insertBefore(wrapper, picker.nextSibling);
picker.setAttribute("hidden", true);
});
};
window.addEventListener('DOMContentLoaded', _init);
})();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<select class="customColorPicker">
<option>#000</option>
<option>#f00</option>
<option>#ff0</option>
<option>#0f0</option>
<option>#0ff</option>
<option>#00f</option>
<option>#f0f</option>
<option>#fff</option>
</select>

要点：

1. 您所要做的就是我们 向select添加class="customColorPicker"，然后添加您想要的颜色作为选项，如下所示<option>#0f0</option>.您可以为所选内容指定可用于检索用户所选值的名称或 ID。

2. IIFE负责一切。在此实现中，init 仅在页面加载时运行一次。如果你打算将选择器动态添加到页面或使用像React或Angular这样的框架，那么你还需要实现一个方法来"刷新"或转换新插入的输入框。

3. 引导选择也可以是一种替代方案。请参阅：https://developer.snapappointments.com/bootstrap-select/。