カラーパレット作成「Palette」
当ページのリンクには広告が含まれています。
スポンサーリンク
カラーパレットを作成するjQueryプラグイン「Palette」を紹介します。
jQueryプラグイン「Palette」
jQueryプラグイン「Palette」は、簡単にカラーパレットが作成できるプラグインです。
色の追加や変更など色を比較する際に利用する機能が付加されており、大変利用しやすくなっています。ユーザーのアクションで色を変更させたい場合に便利かも。
スポンサーリンク
デモには、色を入力するフォームと「色の追加」「色の変更」ボタンがあります。色を追加する場合、追加したい色を入力（例えば、red、#efefefなど）して、「色の追加」ボタンをクリックしてください。色を変更する場合、変更したい色を選択後、変更する色を入力し、「色の変更」をクリックしてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="paletteのデモでーす。">
<title>palette - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/palette.css">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="js/palette.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#examplePalette').palette({
length: 8,
onSelect: function() {
console.log( $(this).find('.coloring').attr('title') );
}
});
});
</script>
<h1>paletteのデモでーす。</h1>
<div>
<input type="text" id="color">
<button id="button1" onclick="$().addColor(color.value)">色の追加</button> ← 追加したい色を入力（例えば、red、#efefefなど）して、「色の追加」ボタンをクリックしてください。<br/>
<input type="text" id="changeColor">
<button id="button2" onclick="$().changeColor(changeColor.value)">色の変更</button> ← 変更したい色を選択後、変更する色を入力し、「色の変更」をクリックしてください。<br/>
<input type="text" id="examplePalette" />
</div>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/palette/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク