WEBアプリケーション研究室 開発ノート TOP

WEBアプリケーション研究室 開発ノート javascript

スポンサーサイト

-------- --:--

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

    このエントリーをはてなブックマークに追加

ちょっとハマったので書いておきます。
次のコードを見てください


var Test = function(){}

Test.prototype = {
prop : []
}

var test1 = new Test();
var test2 = new Test();

test1.prop.push(123);
console.info(test2.prop);
さて問題です!最後のconsole.info(test2.prop);は何が出力されるでしょう。私は当然
[]
と空の配列だと思いました。ところが、これは[123]が出力されます。代入ではなく、初期化してしまっているのが問題です。prototype内の変数は代入時に複製され、それまでは参照しているようです。これを期待通りに動かすには

var Test = function(){
this._init();
}

Test.prototype = {
prop : null,
_init:function(){
this.prop = [];
}
}

var test1 = new Test();
var test2 = new Test();

test1.prop.push(123);
console.info(test2.prop);
このようにコンストラクタ(的なもの)で代入してやる必要があります。

    このエントリーをはてなブックマークに追加



テスト




この状態だと _onClickDomの中のthisはクリックされたエレメントdivを返します。thisはこのオブジェクト自身をさして欲しいのでそういう時は

Event.observe(dom, 'click', this._onClickDom.bind(this));
とします。

    このエントリーをはてなブックマークに追加

クリックしたら全部選択、尚且つ変更できないようにしたくてやってみました。
ちょうとyoutubeの右上にある動画URL貼り付け用inputのような挙動です。





readonly="readonly"がポイントですかねdisabledにすると選択すらできなくなります。あとはjavascriptでイベントを設定してやればいいので

var target = $("readonly_input");

Event.observe(target, 'click', function(e)
{
target.focus();
target.select();
});
今回はprototype.jsを使用しています。

    このエントリーをはてなブックマークに追加

いびつな形のフラッシュをページに埋め込まなきゃならなくてpositionとz-indexを使いHTMLとフラッシュを重ねました。この時、フラッシュよりz-indexが奥にHTMLが入ってしまうとリンクなど何もクリックできなくなってしまいます。なので、フラッシュをz-index:1にしてHTMLを手前にもって行きました。

しかも、フラッシュ自体の長さが変わるので、ExternalInterfaceでフラッシュからjavascriptを呼び出し、フラッシュより下にあるコンテンツのpaddingをグッと持ち上げました。

そうしたら、持ち上げたHTMLコンテンツがz-index:1のフラッシュより奥に行ってしまいました。javascriptで場所を移動した後にjavascriptとpositionを指定してやれば元に戻ります。検証していませんが恐らく場所を変えるとその辺りのデータがリセットされるのでしょうか・・・
時間があったら検証してみます。

ちなみにブラウザはFirefox3です。

    このエントリーをはてなブックマークに追加

Textareaにデフォルト値など何かテキストを放り込むと、カーソルが一番下に行ってしまいます。ほとんどの場合あまり問題ないのですが、メールの用に引用テキストを下に入れておきたいケースで一番上にカーソルを移動したかったのでやってみました。IEとFirefoxで挙動が違うのでちょっとてこずりました。
prototype,jsを使っているので適宜読み替えてください。


function setCaretToStart(e)
{
var elem = Event.element(e);
if(document.selection) //for IE
{
var range = elem.createTextRange();

range.collapse(true);

range.moveEnd('character', 0);
range.moveStart('character', 0);
range.select();
}
else //for firfox
{
elem.selectionStart = 0;
elem.selectionEnd = 0;
}
}
Event.observe($('reply_content'), 'focus',setCaretToStart);
IEはfirebugが無いので厳しいですね。firebugliteInternet Explorer Developer Toolbarを使ってみましたがいまいちです。オブジェクトのメソッドとプロパティの一覧が簡単に確認できるとうれしいのですが。
とりあえずこの辺で調べました。

    このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。