JavaScriptの最近のブログ記事

マクロメディア、現在のadobeの Dreamweaverでビエイビアでウィンドウオープンを作ると以下の通りになります。

function MM_openBrWindow(theURL,winName,features) { 
    //v2.0
    window.open(theURL,winName,features);}

これだと2回目のオープン時に、同じwinNameだとウィンドウが前面に出てきません。そのため、すでに開いているか確認して、開いていたならば、オープン、そうでなければ、そのwindowをアクティブにすればいいと思って調べていましたが、そんなことしなくてもいいんですね。ごく簡単に解決しました。以下のコード。単純にフォーカスすればいいだけですね。

function MM_openBrWindow(theURL,winName,features) { 
    //v2.0
    var win = window.open(theURL,winName,features);
    win.focus();
}

 

DatesliderとPrototype.js

| コメント(0)

Datasliderという日付をドラッグで選択可能なフルjavascriptライブラリがあります。
http://www.ajaxorized.com/

datasliderプロジェクトのページはこちら
http://code.google.com/p/dateslider/

いまのところだれもコメントはありませんが、IE7において、スクリプトエラーがでまくることがあります。

左のスライドを右、もしくは、右のスライドを左に移動させた時に、両方のスライドバーが重なったときにエラーが表示されます。これは、どうやら、スタイルシートにたいして、width:-1pxといったように、マイナスの数字をあたえているのが原因のようです。これは、エラーとなりますが、prototype.jsでは、これを感知してません。

そのため、dataslider.jsでマイナスがセットされないように修正して対応しました。

dateslider.jsの210行あたりから139行目あたり(_rightDragと_leftDrag) 

_rightDrag : function () {
l_panelLength = $('righthandle').offsetLeft - $('lefthandle').offsetLeft - 5;
/*$('shiftpanel').setStyle({width : (l_panelLength+2*sliderReference.sliderBarMargin)+'px'});*/
if((l_panelLength+2*sliderReference.sliderBarMargin) >= 0){
$('shiftpanel').setStyle({width : (l_panelLength+2*sliderReference.sliderBarMargin)+'px'});
}else{
$('shiftpanel').setStyle({width : '0px'});
}
sliderReference._setDates();
},
_leftDrag : function() {
l_panelLength = $('righthandle').offsetLeft - $('lefthandle').offsetLeft - 4;
/*$('shiftpanel').setStyle({left: ($('lefthandle').offsetLeft+4)+'px', width : l_panelLength+'px'});*/
if(($('lefthandle').offsetLeft+4) >= 0 ){
$('shiftpanel').setStyle({left: ($('lefthandle').offsetLeft+4)+'px', width : l_panelLength+'px'});
}else{
$('shiftpanel').setStyle({left: '0px', width : l_panelLength+'px'});
}
sliderReference._setDates();
},

JavascriptのデバッグはFirefoxでやってましたが、IEでのみ発生する現象でありかつ、利用しているライブラリ内らしい、ということで、デバッグがかなり困難になってました。そこで、検索すると、意外とありますね。下記サイトがベストアンサーでした。ちなみに、「Prototype」(javascriptライブラリ)のIEにおいての動作不良によるものでした。最新のPrototypeでも解消されてません。

http://labs.gmo.jp/blog/ku/2007/03/iejavascript.html

ScriptEditorでの例ですが、私の場合は、VisualStudioで行いました。

ポイントは、IEのインターネットオプションでの設定部分と、VisualStudioにおいて、プロセスにアタッチです。

プロセスにアタッチを初めて使いました

ウェブ制作、とくにビジネス系においては、日付を入力する必要がある場面が多くなります。

とくに、日付の範囲を指定する場合。2つの日付情報が必要です。

テキストボックス(input type=text)にて、日付を入力させるか、
セレクトボックス(select ... options...)にて年、月、日の選択肢を用意して選択させるか。

テキストボックスだと、入力が自由になるため、日付形式がどのようなものか判定する必要がある。
yyyy-mm-ddなのか、mm-dd-yyyyなのか。また、全角文字で入っているかもしれません。(初心者の方に非常に多い)

セレクトボックスだと、日付の入力形式は間違えませんが、選択するのが面倒です。

そんなときに

sliding date-pickerというものを見つけました。

PHPSPOT開発日誌に、記事があります。

prototype 1.6 と scriptaculous 1.8が必要ですが、すべてALL-in Oneとなったパッケージがあります。それを解凍して配置すればOKです。

以前SyntaxHighlighter について使い方のみ書きましたが、設置方法も書いておきます。

まず、ソースコードをGoogleCodeからダウンロードします。ライセンスはGPLです。
http://code.google.com/p/syntaxhighlighter/

ダウンロードは、こちら
http://code.google.com/p/syntaxhighlighter/downloads/list

なんとも拡張子がrarってところが若干曲者というか、敷居を高くされてますが、一応説明しておきますが、圧縮形式です。zipとかtar.gzとかでいいのにね。。。

Linuxだとデフォルトで解凍できるものが無いので、Windows上で解凍してから入れることとする。(愛用のLhaplusはrarが解凍できた)

解凍すると3つのフォルダがあります。

  • Scripts/
  • Styles/
  • Uncompressed/

このうちScriptsとStylesフォルダをサーバにアップロードしましょう。

あとは、それを呼び出します。

スタイルシートは、こんなかんじ。


<link rel="stylesheet" href="<$MTBlogURL$>syntaxHighlighter/css/SyntaxHighlighter.css" type="text/css" />

jsは






このアーカイブについて

このページには、過去に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

前のカテゴリはiPhoneです。

次のカテゴリはphpです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.04

にほんブログ村

にほんブログ村 IT技術ブログへ
にほんブログ村