jQueryでとっても簡単にカラーピッカーの実装 | 東京都世田谷区 ホームページ制作 [k]id

jQueryでとっても簡単にカラーピッカーの実装

Category Ajax,JavaScript,WEB Tips Update 2010.02.25

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

vr

Ajaxで背景を変更やフォーム等で色を選択する場合は最近ではカラーピッカーを
使用する事が多いと思うのですが、jQueryプラグインでは機能が多すぎたりする事が多く
なかなか良い方法がありませんでした。

Virgil Rebotonさんにシンプルで実装しやすそうなカラーピッカーがあったのでご紹介します。

jQuery Color Picker
pic

サンプルも公開されています

導入方法

Virgil Rebotonさんからファイルをダウンロード
※ページ中程のDownloadリンクから

ヘッダーに

とりあえずヘッダーに落としてきたファイルを記述
リンクするファイルはJavasScript

<script src="jquery-1.2.2.js" type="text/javascript"></script>
<script src="ColorPicker.js" type="text/javascript"></script>

CSSファイル

<style type=text/css media=all>@import url( ColorPicker.css );</style>

その後に例として直書きで

<script type="text/javascript" charset="utf-8">
<!--
jQuery(function($)
{
$("#picker1").attachColorPicker();
});
//-->
</script>
bodyに

bodyに下記を記述

<input name="任意のname" id="picker1" size="7">

で実装ができます!
簡単ですね!

ページトップへ