2009年12月22日

JavaScriptでの型の判定

どうも、塩内藤です。

jsでコード書いてて型の判定をよくするんですが、いままではtypeofとinstanceofを混ぜてやってました。

Array、function、文字列なんかが混ざると結構めんどかったです。

こないだjQueryのソース見てたら下記のような記述があって、これいいなぁと思ったのでちょっと紹介

Object.prototype.toString.call(obj)

Array:[object Array]
function:[object Function]
リテラルの文字列とnew Stringの文字列:[object String]

てな感じで返ってきます。

ということで、以上(・ω・)
posted by しお at 12:43| Comment(0) | TrackBack(0) | jQuery

2009年12月02日

selectの自己主張が強すぎて、、

どうも塩内藤です。

あいかわらずIE6に悩まされてます。(・ω・)

結構有名なとこで、selectがz-indexを無視する問題

自分もこれにやられてます、、、

解決方法はiframeを使えば大丈夫ということで、jQueryのbgiframeを使用してIE6の時だけiframeをカマしてるんですが、、、

selectを配置しているdivをスクロールさせるとまたselectが最前面に来ちゃいます。
なぜ、こんなに自己主張が強いのか(・ω・)

他に要望でフォーカインすると自動でドロップダウンして欲しいっていうのもありまして、、

select廃止して、自前でドロップダウン作成しようかなぁと考えてます。



さて、、、どうしよう、、、

posted by しお at 12:47| Comment(0) | TrackBack(0) | jQuery

2009年11月19日

jQuery カスタムイベントのバブリング

ちょっとカスタムイベントのバブリングしたいなぁと思ってjQueryのソース見てたら、こんなん出てきました。

trigger: function( event, data, elem, bubbling )

おっと、これ4番目の引数trueで余裕でしょjk
と思って続きも見ずに下のコードを書いて実行してみました。


HTML:

<table id="fooTable" >
<tr >
<td>
<select id="foo">
<option >カレーは</option>
<option >飲み物</option>
</select>
</td>
</tr>
</table>



JavaScript:

$("#fooTable").bind("changeFoo", onChangeFoo);

$("#foo").change(function () {
jQuery.event.trigger(jQuery.Event("changeFoo"), [], $("#foo")[0], true);
});

function onChangeFoo(evt) {

alert($(evt.target).val());

}




あら、、、動かない、、、、なぜ??
よくよくソースを見てみると

triggerファンクションのbubblingが未定義またはfalseの時に
eventのtargetにエレメント設定したりしてる、、

さらに下を見るとこれ
if ( !event.isPropagationStopped() ) {
var parent = elem.parentNode || elem.ownerDocument;
if ( parent )
jQuery.event.trigger(event, data, parent, true);
}

あら、、これってbubblingとか関係ないじゃん、、isPropagationStopped()がfalseの時に
triggerのbubblingにtrue指定してるし、、、もしかして再帰用??

なんか微妙に納得がいかないまま更に読み進めると
jQuery.Event.prototypeの中に
isPropagationStopped: returnFalse
の記述が、、、あらーーーーん、これカスタムイベントだとデフォルトバブリングする系?


ちうことで、下ので動きました
$("#foo").change(function () {
jQuery.event.trigger(jQuery.Event("changeFoo"), [], $("#foo")[0]);
});

逆にバブリングしたくない時はこれで
var eventObj = jQuery.Event("changeFoo");
eventObj.isPropagationStopped = function () {return true;};

jQuery.event.trigger(eventObj, [], $("#foo")[0]);

なんか微妙な気分になりましたが、動いたのでまぁいいかぁ

あぁ、、、追記
trigger: function( event, data, elem, bubbling )なんですが

jQuery.fnにあるtriggerが上のやつ呼んでるので結局
$("#foo").trigger("changeFoo");
でおけ(・ω・)

バブリングするには何かがんばらないとイカンのだと勝手に思って
あれこれしましたが、普通にtrigger呼べば全然大丈夫というお話
posted by しお at 13:00| Comment(0) | TrackBack(0) | jQuery

2009年11月17日

昨日のやつ


昨日のやつなんですが、ひとまずこんな感じになりました。

ちなみにjQuery使っとります。

function iframeAjax(url, appendTarget, completeHandler) {

$("#iframeHtml")
.attr("src", url)
.one("load", function (){

var body = $(this.contentWindow.document.body);

$.each(body.children(), function () {appendTarget.append(this);});

if (completeHandler) completeHandler();

});

}

まぁなんとかなりました。
posted by しお at 17:07| Comment(0) | TrackBack(0) | jQuery

2009年11月09日

jQuery IE6でのoption追加に悩む

現在、職場でjQueryを使っています。

ここ何年かはずっとFlexでAS3だったのでJavaScriptの進歩についていけてなかったようです、、、
prototypeとかも知らなんだ、、、

まぁそれはいいとして本題
jQueryでselectにoptionを追加して、追加した値をval()で選択したらスクリプトエラー出たんですが、、、

ちょっと調べてみると下記のページで紹介されていました。
jQueryでoption要素を追加した際の諸問題 - むつらつれづれ

どうもselectを追加した後にwidthを設定すればOKなようで
しかもこれIE6だとエラーが出るみたいです。

今の現場がIE6、7とFireFoxに対応して欲しいとのことなので今後、こういう問題が沢山でそう、、、

がんがります、、、
posted by しお at 12:36| Comment(2) | TrackBack(0) | jQuery