CSS3グラデーションエディタ改良「Grad2」作りました

grad2.png

こちらになります。
CSS3 Easy Gradation Editor "Grad2" < http://grad2.ecoloniq.jp/ >

最近Webkit系とMozilla系のCSS3グラデーションの記述がW3Cの規定に統一されるらしく、もうすぐ記述がひとつにまとまるって話を聞きました。

なので、近いうち、吐き出されるコードを見直す必要があるんですが、、、

以前、CSS3グラデーションを生成するサイト「Grad? Gradient!」を作って公開しましたが、使ってみると非常に使いづらい点がいくつかあり、悶々していたので以下の点を改善点として新しく作り直しました。

  • スライダーをダブルクリックしてもカラーピッカーのデフォルトの色がスライダーの色にならない。
  • そもそも色が選びにくい!色を編集するには使いたくない。
  • 無駄にborderプロパティとか色々ソースが吐き出されるけど、大抵そこは自分で書くだろう。
で、以下のように手段を変更しました。

  • カラーピッカーは有名でしっかりしてるプラグイン「Farbtastic: jQuery color picker plug-in」があるので、使わせていただく。
  • グラデーションスライダーのドラッグは「jQuery UI Draggable plug-in」を使わせていただく。
  • スライダーは前回canvasで全部を描画していたけど、今回はp要素であるHTMLを使う。
  • 今回はグラデーションのソースだけ吐き出させる。
といったように、jQueryさまさま。

Farbtasticカラーピッカーはすばらしくって、ホントにしっかりしています。
もちろん、色をget / setするためにプロパティやメソッドも用意されているので、「このスライダーがクリックされたから、スライダーが持っている色をカラーピッカーにセットする」ということが楽にできます。

設定はこんな感じです。

// HTML側

<p><input type="text" id="colorCode" name="color" value="#123456"></p>
<div id="colorPicker"></div>

// JavaScript側

var picker = $.farbtastic('#colorPicker'); // div#colorPickerにカラーピッカーを出現させる
picker.linkTo($("#colorCode")); // input#colorCode内とリンクしてカラー値を表示させる

これだけで、カラーピッカー単体はもう完成です。
すごい。

で、あとはセットするために

var val = "#ff0000";
picker.setColor( val );

とすると、その色の場所にカラーピッカー内のアイコンが移動します。(つまり赤を指す)
今現在ピッカーの色の何色が選択されているかを知りたい場合

picker.color

で、カラー値が返ってきます。

もうこれだけで使える!と思ったんですが、独自のイベントについては公式サイトには詳しく触れてなくてちょっと困ってました。
中身のソースを読めるほどの知識がないもんだから、どうしようと。。

要は色を選んでいる最中、mousemoveのようなイベントがあれば使いたかったんですが、どうやら取れず、別の方法を使ってマウスを押しながら動かしている間はcolorプロパティを取得し続けて、ボタンの色にリアルタイムに反映させることにしました。

というわけで、良かったら使ってください。


Category

Facebook

このページの最初へもどる