JavaScript + Ajax 実践サンプル集

カラーピッカー　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのColorPicker()プラグインを利用して16進のカラーコードを生成します。緑のアイコンをクリックするとカスタムされたカラーピッカーが表示されます。カラーピッカーを消すには緑のアイコンを再度クリックします。ブルーのアイコンをクリックするとデフォルトのカラーピッカーが表示されます。このカラーピッカーを消すには画面の任意の場所（カラーピッカー以外）をクリックします。

このサンプルを編集して試してみる

$('#colorSelector').ColorPicker({
  color: '#0000ff',
  onShow: function(colpkr) {
    $(colpkr).fadeIn(500);
    return false;
  },
  onHide: function(colpkr) {
    $(colpkr).fadeOut(500);
    return false;
  },
  onChange: function(hsb, hex, rgb) {
    $('#colorSelector div').css('backgroundColor', '#' + hex);
  }
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Color Picker </title>
  <link href="jQuery/colorPicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/colorPicker/css/layout.css" rel="stylesheet" type="text/css" />

$('#colorpickerHolder2').ColorPicker({
        flat: true,
        color: '#00ff00',
        onSubmit: function(hsb, hex, rgb) {
          $('#colorSelector2 div').css('backgroundColor', '#' + hex);
        }
      });

$('#colorpickerHolder2>div').css('position', 'absolute');
      var widt = false;
      $('#colorSelector2').bind('click', function() {
        $('#colorpickerHolder2').stop().animate({ height: widt ? 0 : 173 }, 500);
        widt = !widt;
      });

$('#colorSelector').ColorPicker({
        color: '#0000ff',
        onShow: function(colpkr) {
          $(colpkr).fadeIn(500);
          return false;
        },
        onHide: function(colpkr) {
          $(colpkr).fadeOut(500);
          return false;
        },
        onChange: function(hsb, hex, rgb) {
          $('#colorSelector div').css('backgroundColor', '#' + hex);
        }
      });    
    
        
    });
  </script>

</head>
<body>

HEAD部BODY部

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/colorPicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/colorPicker/css/layout.css" rel="stylesheet" type="text/css" />

  <script src="jQuery/colorPicker/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/colorPicker/colorpicker.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(function() {

      $('#colorpickerHolder2').ColorPicker({
        flat: true,
        color: '#00ff00',
        onSubmit: function(hsb, hex, rgb) {
          $('#colorSelector2 div').css('backgroundColor', '#' + hex);
        }
      });

      $('#colorpickerHolder2>div').css('position', 'absolute');
      var widt = false;
      $('#colorSelector2').bind('click', function() {
        $('#colorpickerHolder2').stop().animate({ height: widt ? 0 : 173 }, 500);
        widt = !widt;
      });


      $('#colorSelector').ColorPicker({
        color: '#0000ff',
        onShow: function(colpkr) {
          $(colpkr).fadeIn(500);
          return false;
        },
        onHide: function(colpkr) {
          $(colpkr).fadeOut(500);
          return false;
        },
        onChange: function(hsb, hex, rgb) {
          $('#colorSelector div').css('backgroundColor', '#' + hex);
        }
      });    
    
        
    });
  </script>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

カラーピッカー　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

カラーピッカー 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

カラーピッカー　《プログラマーがネットで副収入を得る方法とは》