jQueryのスピンボックスプラグイン 修正しました
バグがあって動かなかったので修正してアップし直しました。
http://code.google.com/p/yk-project/wiki/NumericUpDown
ついでに、デモページも作成。
http://yk-project.googlecode.com/svn/trunk/numericupdown/demo.html
jQueryのスピンボックスプラグイン公開
http://code.google.com/p/yk-project/wiki/NumericUpDown
以前作ったスピンボックスプラグインをアップロードしました。
勉強しながら作ったものなので、使い勝手は悪いかも知れません。
改変OKなので、好きなように書き換えて使ってみてください。
また、
「こうした方がスマートだよ」
「このブラウザで崩れる・動かない」
という意見、情報募集中です。
jQuery 今までずっと入れ子にするもんだと思ってた・・・。
例えば、
<div id="parent"> <div id="me">僕</div> </div> <div id="next"> <div id="target">隣のあの子</div> </div>
こんなHTMLがあったとして、#meから#targetを指定するのに、
var target = $("#me").parent().next().children();
で、済むところを
var target = $($($("#me").parent()).next()).children();
ってやってた。
なんてスマートなんだ、jQuery！！
ドルドルめんどくさいなぁって思ってたら勘違いだったのね･･･orz
気づかないまま１年近く立ってるんじゃないだろうか。
今まで作ったやつ見直さなければ。
なんでこんな勘違いしてたのか分からないけど、
同じ勘違いをしてる人がいたら早く気付きますように！
HTML+javascript で作ったAIRアプリ fedoraで実行してみた。
HTML と JavaScript で作ったAIRアプリをfedoraで動かしてみました。
その結果を諸々メモ。
レイアウトが崩れる
Windows と fedora では、同じAIRの上でも色々と違うみたいです。
例えば、ウインドウの高さを固定リサイズ不可にして、
AIRのウインドウメニューを使っていたんですが、
HTML,CSSのheight:100%の扱いが以下のように違うようです。
Win(Vista,XP)→メニューを除いた、HTMLで書かれている領域全体の高さ
fedora(11)→メニューも含めた、ウインドウの描画領域全体の高さ
なので、WinでHTMLやBODYの高さを100%にしてfedoraで動かしたら、
メニューの高さ分だけ下にはみ出てしまいました。
めんどくさくなったので、メニューもHTMLとjQueryで作り直して回避。
fedoraでのドラッグ＆ドロップ時のMIMEタイプ
http://help.adobe.com/ja_JP/AIR/1.5/devappshtml/WS7709855E-7162-45d1-8224-3D4DADC1B2D7.htmlを参考に、
外部から画像ファイル（複数選択可）をドラッグ＆ドロップする。
MIMEタイプを使って、外部からのドロップか、アプリ内からのドロップかを判別してたんですが、
Winで通った処理がfedoraじゃ通らない･･･。
調べた所、外部からのドロップは
WinでのMIMEタイプが "application/x-vnd.adobe.air.file-list" だったのに対し、
fedoraは、"text/plain" だったため、IF文でスルーされてました。
中身についても、WinがFileオブジェクト（runtime.flash.filesystem::File）で、
fedoraは、ファイルのフルパスが1件につき1行ずつの普通のテキストです。
else if で "text/plain" を捕まえて、中身を「\r\n」でsplitして処理することで解決。
このとき最後に空白行が入るので、中身の有無を確認しないと場合によってはエラーで悩みます。
とりあえず、今までで私が見つけた部分は以上。
見つけ次第またメモします。
ボタン画像の色の付け方
超自己流、ボタン画像の色の付け方です。
マウスオーバーの時、クリックされた時の色の付け方が分からず、
windowsのボタンとにらめっこして考案しましたｗｗ
1.適当な大きさの新規ドキュメントを作成
2.適当な大きさの角丸長方形を作成
今回はトリムエリア-10pxのサイズで作りました。
3.グラデーションで色を付け、線の色を設定し、文字を入れる。
これで通常のボタン完成。
4.レイヤーをコピーする。
分り易くするため、レイヤーの名前を「hover」に変更。
5.[効果]＞[スタイライズ]＞[光彩(内側)]を選択。
プレビューで様子を見ながら設定。
描画モードを通常にして、
グラデーションの色より濃い色を選択すると良さげ。
これでマウスオーバー時のボタン完成。
6.「hover」レイヤーをコピー。
分り易くするため、レイヤーの名前を「focus」に変更。
7.角丸長方形を選択してコピペする。
9.重ねる。
これでクリック時のボタン完成。
jQueryのプラグイン作り
2010/04/28 追記
この記事で作ったjQueryのNumericUpDownプラグインを公開しました。
http://d.hatena.ne.jp/mkt23/20100427/1272351878
前のエントリー書いてから１時間経っておりませんが...
適当にやってみたら出来ました！
というわけでまとめ。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
プラグイン、オプションの所に valChange:function(){} を追加。
//option
opt = $.extend({
UpButtonImage: "/lib/image/BGupbutton.png",
DownButtonImage: "/lib/image/BGdownbutton.png",
hoverPosition: "0 -12px",
activePosition: "0 -24px",
max: null,
min: null,
interval: 1,
timeInterval: 250,
valChange:function(){}
}, opt || {});
そして、プラグインの中で↓の用にイベントにバインドする。
var txtB = $(this); // this はINPUT(text)
txtB.bind("change", opt.valChange);
あとは、プラグインを使うjavascriptの中で動作を設定。
$(".spinbox").NumericUpDown({max:50, min:0,
valChange:function(){
alert("値が変わった！");
}
});
思ったより簡単だった。
実は昨年中もどうやるのか考えてたんだけど、
jQuery UI のコードを覗き見して混乱して投げ出してた！
案ずるより産むが易しです。
