私はWebベースのGUIエディタを作成しています。そうしている間に、私は添付画像のようなカラーピッカーのフロントエンドを作成する必要があります。私はそれを作成する方法を知る必要があります。私はこの種の開発に慣れていないので、以下のオプションを考えることができます。 1.スパンを作成してクリック可能にし、背景色を付けます。 2.この機能を生成するプラグインを使用してください。 3.それぞれ独自の色のボタンの配列を使用してください。カラーパレットを作成する
また、この機能を生成するオンラインツールまたはjqueryプラグインがあるかどうかを知る必要があります。すべてのヘルプは、私が過去に同様のことを書いた
をいただければ幸い、ここにあなたがこれを行うことができます一つの方法を示して簡単な例です：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.colorBox {
position: relative;
float: left;
width: 24px;
height: 24px;
margin: 6px;
padding: 0;
background: #FFFFFF;
border: solid 1px #000000;
}
colorPicker {
background: #DCDCDC;
border: solid 1px #000000;
}
</style>
<title>
Page
</title>
<script src="plugins/js/jquery-1.11.0.js">
</script>
</head>
<body>
<div id="colorPicker" class="colorPicker">
<div id="color-red" class="colorBox" style="background: red;">
</div>
<div id="color-green" class="colorBox" style="background: green;">
</div>
<div id="color-blue" class="colorBox" style="background: blue;">
</div>
</div>
<div id="targetBox" class="colorBox">
</div>
<script>
$(document).ready(function() {
$(".colorBox").on("click", function() {
var strID = $(this).attr("id");
$("#targetBox").css("backgroundColor", $("#" + strID).css("backgroundColor"));
});
});
</script>
</body>
<html>
ただ、特定の要素にclickイベントをリッスンし、クリックされた要素の背景色を返します。
これが役に立ちます。
ETA - あなたが使用できるライブラリやプラグインについてはっきりしていないため、1つに限定されています。しかし、何かを作ることはそれほど難しくありません。
こんにちは！私はイメージが添付されていないことが怖いです。 –