SQLの窓

2011年08月14日


カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。

位置移動もできるし、1アクションで色が決定できるし軽いのですが、ダウンロードしたパッケージは表示されているものより古い内容だったり、リサイズ機能もあったのですが、バグがあったので必要無いので削除しました。



FFFFFF
x
さらに必要な初期処理や色コード取得処理の説明も何も無く、名前空間も適当な作りで、プロパティ作っておいて使わずに、グローバル変数使ってたり、ID 決め打ちだったりしますが、そのぶん改造のしやすいコードです。

※ 初期化メソッドは追加しました

ここをクリックすると、以下のコードを編集しながらテストできます
<link href="http://toolbox.winofsql.jp/js/cp/plugin.css" rel="stylesheet" type="text/css" />
<div id="plugID" style='width:300px;height:70px;border:solid 1px #000'></div>
<div id="getColor" style='width:100px;height:20px;border:solid 1px #888;margin:15px 0 15px 0;'></div>
<input type="text" id="code">
<input
	type="button"
	value="色取得"
	onclick='_GLB("code").value=color.HSV_HEX(hsv);_GLBS("getColor").backgroundColor="#"+color.HSV_HEX(hsv)'
>

<div style='position:relative'>
<div id="mini" onmousedown="Picker.core('mini',event)">
   <div class="north">
      <span id="mHEX">FFFFFF</span>
      <div
          onmousedown="_GLBS('mini').display='none';"
      >x</div>
   </div>
   <div
      class="south"
      id="mSpec"
      style="height:128px;width:128px;"
      onmousedown="Picker.core('mCur',event); return false;" onselectstart="return false;"
   >
      <div
         id="mCur"
         style="top:86px;left:68px;"
      ></div>
      <img
         src="http://toolbox.winofsql.jp/js/cp/media/circle.png"
         onmousedown="return false;"
         ondrag="return false;"
         onselectstart="return false;"
      />
   </div>
</div>
</div>


<script type="text/Javascript" src="http://toolbox.winofsql.jp/js/cp/plugin.js"></script>
<script type="text/Javascript">
Picker.init(0,20);	// 位置指定
Picker.resize(300);	// 幅指定
</script>

オリジナル

Color Theory @ ColorJack

かなり前から、「フリーフォントで簡単ロゴ作成」で使っていたカラーピッカーの姉妹品なんですが、作者の興味は Canvas に移行していったようで、どちらもダウンロードできる内容はそのまま使えるようなものではありません。

Color Theory @ ColorJack の カラッピッカーの改造後のコード


【JavaScript ライブラリの最新記事】
posted by lightbox at 2011-08-14 22:31 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり