位置移動もできるし、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 ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- google.load で Yahoo UI のメニューを使う
