top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1131

カラーピッカー(jQuery):jQueryの「カラーピッカー」プラグインを試す。jQueryってほんとにいいなぁ。複数のプラグインで比べてみるぞ ・・・ 【jQueryプラグイン】

 2009-10-27
●謝罪●
 すみません。IEできちんと動作しない
 というご連絡をいただきました。
 IEで、iframe利用した際、コンフリクトが
 起きているようです。
 チェック足りなくてすみませんでした。
 iframe部分、リンクに変更いたしました。 2009/10/27

 現在、いろいろな作業行ってて
 改めて、「jQueryっていいなぁ」と感じてます。
 もちろん、prototype.js にも、他のJavaScriptソースにも
 随分お世話になってるんだけど・・・

 先日の、
 ・XMLパースをはじめ、
  (・AjaxとMySQLとCSSと私:symfonyプロジェクトある数日の作業記録。少し、symfonyから離れて ・・・ 【symphonyで、創るぞ】
 jQueryを利用させていただく機会は多い。


 すでに多くの実装例はあるけれど、私も、自身の実録として
 jQueryの実装記録をまとめておくことにしよ。


 今回のお題は、「カラーピッカー
 (これは、ある計画のためなのだ・・・はは)


  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ カラーピッカー実装、の巻:jQueryにお世話になりっぱ
************************************************


 いくつか、プラグインありますね。
 比べてみたし。

 まず、


Color Picker - jQuery plugin
Color Picker - jQuery plugin ・MIT 及び GPL licensesで
 これを公開提示してくれている
 「EYECON」という会社。
 いろいろと、創ってますねぇ。
 ・ホームページ「EYECON
 ・Work-ブログ「EYECON
 ※ロシアの会社



 ・・・同じ名前で、やはりスロットゲーム
    創ってるこちらの会社とは
    関係ないんだよな。
    ・EYECON
     ※オーストラリアの会社

 さて。このカラピッカー・プラグイン


  ■ダウンロード
   解凍
   ・説明用のHTMLファイルと
    JSファイル、画像 すべて揃っている。
    Color Picker - jQuery plugin


  ■テストサイトで実装
   まずは、単純に実装・実行。
   □ソースファイルのうち
    ・CSSファイル(colorpicker.css, layout.css
     これらの中の、imagesディレクトリへのパスを
     環境に合わせて書き換え。


   □CSSファイルと JSファイルを利用するインクルード記述

<link href="*****/colorpicker.css" rel="stylesheet" type="text/css" />
<link href="*****/layout.css" rel="stylesheet" type="text/css" />
<script src="*****/jquery1_3_min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script src="*****/colorpicker.js" type="text/javascript"></script>

    ・私は、prototype.js も併用するので、
     コンフリクト避けるために、j$ という変数への
     置き換え処理をしている。
     (当然、colorpicker.js の中身も書き換えている)

   □利用方法は、一緒にダウンロードできる


    layout.js を参照すればわかるが、
<script type="text/javascript">
j$(function() {
j$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
j$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
j$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
j$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
});
</script>
 こんな感じで利用して、HTMLソースに
<div id="customWidget">
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
<div id="colorpickerHolder2"></div>
</div>
 こうやって用意すると、
   ◆Color Picker - jQuery plugin
  となる。

 これでもいいのだが、もう少し簡易なものが欲しい。
 こちらはどうだ?


jQuery Color Picker
jQuery Color Picker ・こちらは、元々
 www.mattkruse.com の Color Picker
 をベースにして創られているようだ。
 ・これをベースにして
  jQueryでブラッシュアップしたって
  ところか。



 ・・・こういうマス選択が
    今回欲しいんだよな。

  ■ダウンロード
   リンクわかりにくいけど、こちらにある
   解凍
   ・結構シンプル。
    jQuery Color Picker


  ■テストサイトで実装


   □CSSファイルと JSファイルを利用するインクルード記述
<link href="*****/ColorPicker.css" rel="stylesheet" type="text/css" />
<script src="*****/jquery1_3_min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script src="*****/ColorPicker.js" type="text/javascript"></script>

    ・前記同じように、
     コンフリクト避けるために、j$ という変数への
     置き換え処理をしている。
     (当然、ColorPicker.js の中身も書き換えている)

   □利用方法は、Test.htm を参照

<input id=picker1 size=7>
 シンプルだ。
   ◆Color Picker2 - jQuery plugin
  これを参考にさせてもらおうかな。

 他にも、


Javascript - Interactive Color Picker
Javascript - Interactive Color Picker こんなのもあるね。




 ありがとうございます。使わさせていただきます。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1131-6cf9cdf7
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。