今日の人気記事

  1. テキスト・画像・iframeなどに対応したLightbox「Featherlight」
  2. スクロールしてもついてくる「Sticky」
  3. テキストにさまざまなアニメーション効果を付加「LetterFx」
  4. アニメーション効果付きの棒グラフを作成「Thermometer」
  5. 文字数に応じてテキストエリア高さを自動調節「autoexpand」

カラーパレット作成「Palette」

スポンサーリンク

カラーパレットを作成するjQueryプラグイン「Palette」を紹介します。

jQueryプラグイン「Palette」

jQueryプラグイン「Palette」は、簡単にカラーパレットが作成できるプラグインです。

色の追加や変更など色を比較する際に利用する機能が付加されており、大変利用しやすくなっています。ユーザーのアクションで色を変更させたい場合に便利かも。

スポンサーリンク

デモには、色を入力するフォームと「色の追加」「色の変更」ボタンがあります。色を追加する場合、追加したい色を入力(例えば、red、#efefefなど)して、「色の追加」ボタンをクリックしてください。色を変更する場合、変更したい色を選択後、変更する色を入力し、「色の変更」をクリックしてください。

「Palette」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)