- 無料サーバー
search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut
anything from here
CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載！
- ||
- ホーム
- ＞
- 2007年12月 のエントリイ
- jQuery（）活用（2) Popup Tips を自作する──jQuery解読(22) 2007/12/13(Javascript)「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog 初稿：2007/12/13改訂：2007/12/23 Window下部へのpopup飛び出し補正対策を実装。再改訂：2007/12/24 popupボックスの「採寸」が各起動要素毎に、一度だけで済むように工夫再改訂：2007/12/31 popupされる文字列取得も一度だけで済むように工夫 なにはともあれ実例を！ 以下の画像がここでいう popup を表示させた例です。濃い緑色のボックスとその中...
- 初稿：2007/12/13
- 改訂：2007/12/23 Window下部へのpopup飛び出し補正対策を実装。
- 再改訂：2007/12/24 popupボックスの「採寸」が各起動要素毎に、一度だけで済むように工夫
- 再改訂：2007/12/31 popupされる文字列取得も一度だけで済むように工夫
なにはともあれ実例を！
以下の画像がここでいう popup を表示させた例です。濃い緑色のボックスとその中の白い文字が popup です。黄緑色のボックス内にマウスカーソルをオーバーさせ、 popupが表示 されるようにして、その状態のスクリーンショットを画像化したものです。マウスカーソルの右下にpopupボックスが表示されていることが分かります。
最初にあることをお断りしなければなりません。
当初、 $(function(){}); を使い、この頁が開き終えた直後にこのページ内に書かれたコード全体を、自動的に有効にしようと考えていました。そして FireFox や Opera では全く問題なくそうできることを確認しました。「さて完成」と思って念のために IE で試したところ、全く駄目！。それも単なるエラーではなくこの頁を開くことすら出来ないのです。
この問題の発生直後から原因は $(function(){});ではないか、と推測しました。そして確認してみたところ、案の定このエントリイ内に記述した jQuery(document).ready(function()); が、IE では、否 IE でだけ円滑に作動しないことが分かりました。
但し、IE の全てのシーンで $(function(){}); が働かない、というのではありません。このブログでは HTML テンプレート内にも append や window.onload が埋め込まれているため、IE に限ってそれらと $(function(){}); が干渉し合ってしまうのだと思われます。
しかし、対策は諦めました。ready を load にする方法もありますが、既にこのブログでは myscript 内で window.onload 時にいくつかの関数の自動起動を設定済みであるため、これに屋上屋を重ねて、この頁のためだけに、 window.onload 時の関数を増やすことは労多く益少なしと判断しました。
そんな訳で余りやりたくなかったのですが、popupコードを有効にするためのボタンをこの下に設けました。これをクリックして初めて、このページ上で今回作成した popup が使えるようにしたのです。
それにしても、否やはり 「恨めしや IE！！」
なお、暫くしてから、このページ内に記述した popup 用コードをインクルードされるCSS 及び Javascript ファイルに組込むつもりです。その際には干渉はなくなるので、 $function(){} メソッドは問題なく動くはずです。
（ツールチップスとしての）Popup、あるいは 吹き出し
考えていることを実例を示して提示します。
下の色つきボックス内にマウスカーソルを移動すると、文字列の入った popup ボックスがマウスカーソルの右下に表示されます。これがここでいう popup、あるいは「吹き出し」です。
TEST テスト
TEST2 test2
そもそもこのブログサイトでは、開設した数ヶ月後から随所に popup を利用しています。その後、微調整や透明easingの追加などの修正を行ってきたこの popup は、実は、「古典的なイベントハンドル手法」、つまり HTML タグの属性として onmouseover/onmouseout を記述する方式で実装しています。
しかし、いかに Microsoft 社が抵抗あるいは無視しようとも DOM Level2 で規定されたイベントハンドリング手法が王道として定着しつつある中で、あるいはこれから王道となるであろう、と推測される中にあって、改めて、これに準拠している jQuery() を使って popup コードを記述してみようと思い立ち、それを作成しました。jQuery()を利用してどのようにそれを実現するのか、という点で、何らかの参考になれば幸いです。
なお、公開されているプラグインを検索したのですが、ここに言う popup に相当するものは見つけられませんでした。
popup 表示を実現したコードは次の通りです。
<p style="text-align:right;line-height:1.1"> <button id="button600" onclick="setPopup()"> <em>popupプログラムスタート</em></button> </p> <div class="popuped" style="margin:0 auto; width:400px; height:100px; background-color: text-align:right; lightgreen; border:2px solid green outset; color:black"> <p title="これはjQuery()を使った「 吹き出し 」のテストです。 mouseover mouseout の２つのイベントを、jQuery()を使ってこの div タグに 設定してあります。">TEST テスト</p> </div> <div class="popuped" style="margin:0 auto;width:200px;height:100px; text-align:right;margin-top:1em;background-color:gray; border:2px solid black outset;color:white;"> <p title="これもjQuery()を使った「 吹き出し 」のテストです。 div タグ内の p タグの title 属性値が popup ボックス内の表示文字列と なっていることに留意を！">TEST2 test2</p> </div>
/* popup される要素のスタイル設定 */
#popup {
position: absolute; z-index:1000;
color: #eee; background-color: darkgreen;
margin: 0;
padding : 4px ;
line-height : 1.1; text-align: left;
border: 2px outset #aeb ;
display: none;
}
//�� block--------------------------------------------------------------- //▼ドキュメント読込み完了前のマウスイベントによる //ブラウザの反応を抑制する。これはFireFox対策です。 window.loaded = false; if (!window.loaded) { //window.loaded は独自に設定したプロパティでHTML文の最後に //script タグを設け、式：window.loaded = true を記述して初期値を設定しています。 //つまり、ブラウザがその行を読み込むまでは window.loaded = false となります。 document.onmousemove = document.onmouseout = document.onclick = document.onmouseover= document.onmousedown = document.onmouseup = document.ondblclick = null; } //�� block--------------------------------------------------------------- //▼最も普及してしまったIEの場合、 $(function(){･･･}); がうまく //作動しないので、涙を飲んで古典的な名前付き関数を使いました。(×_×;）ｼｭﾝ function setPopup(){ //コード呼び出し後に popup スタートボタンを加工 $("#button") .removeAttr('onclick') //clickが二度以上押されても無効に .addClass("popuped") //class名追加 .attr("title", "これも popup 発生要素としました。") //title属性追加 .css("background-color","pink") //背景色替え //ボタン文字列の差し替え .children().text('クリックありがとうございます。popupコードが有効になりました。'); //�� block--------------------------------------------------------------- //▼変数初期化 $.extend({ //変数の替わりに $ のプロパティを追加設定する popup :{}, //popup要素格納 popuped : $(".popuped"), //popup 発生要素格納 pos:{}, //座標値格納 elem:{} //title文字列待避のために }); //�� block--------------------------------------------------------------- //▼popupタグの用意とマウス位置監視メソッドの設定 $(document.body) .append("<div id='popup'></div>") //popupされる要素の作成 .mousemove(function(e){ //mouseが動いた時のマウスの絶対位置取得 var evt = e ? e : window.event; //IE対策 //IE対策 if ( evt.pageX == null && evt.clientX != null ) { var e = document.documentElement, b = document.body; evt.pageX = evt.clientX + (e && e.scrollLeft || b.scrollLeft || 0); evt.pageY = evt.clientY + (e && e.scrollTop || b.scrollTop || 0); } //絶対座標値とClient座標値をプロパティに格納。 //※エラーが出ないよう三項演算子を使って安全策を講じました。 $.pos = $.pos ? { X: evt.pageX, Y: evt.pageY, cX:evt.clientX, cY:evt.clientY } : null; }); //�� block--------------------------------------------------------------- //▼２つのノードを取得、記憶 $.popup = document.getElementById("popup"); //popupされる要素をプロパティに格納 $.popuped = $(".popuped"); //popupが発生する要素をプロパティに格納 //�� block--------------------------------------------------------------- //popup要素の透明度設定自作関数 var setOpacity = function(num){ if (!num || (num > 1) || (num <0)) return; !!this.style.filter ? ( this.style.filter = 'alpha(opacity=' + num / 100 + ')' ): ( this.style.opacity = num ); } //�� block--------------------------------------------------------------- //現在の Window InnerSize の計測 var scrWidth="",scrHeight=""; var winSize = function(){ scrWidth = window.InnerWidth ? (window.InnerWidth -18) : (document.documentElement.clientWidth || document.body.clientWidth); scrHeight = window.InnerHeight ? window.InnerHeight : (document.documentElement.clientHeight || document.body.clientHeight); } winSize(); //サイズ取得関数実行 document.body.onresize=winSize; //windowサイズが変わったら、改めてサイズ取得関数を実行する //�� block--------------------------------------------------------------- //▼hover()メソッド $.popuped.hover( //jQuery()で用意されている hover() トグルメソッド function (){ //��-1 block------------------------------------------------------------- var num = $.popuped.index(this); //今 mouseover している popuped の順番を取得 //��-2 block------------------------------------------------------------- if (!$.popuped[num].ttl) { //num番目のtitleが未取得ならば //popupedノードが title 属性を持っていれば if ( this.getAttribute("title") ) $.elem = this ; //それを対象とし //popupedノードが title 属性を持っていなれば else { if (this.childNodes) { //子ノードがあれば var i=0; //要素ノードではないかtitle属性を有していなければ while ( this.childNodes[i] && (this.childNodes[i].nodeType != 1 || !this.childNodes[i].getAttribute("title") ) ) i++; //次の子ノードをチェック $.elem = this.childNodes[i] || null; //該当する子ノードを取得 } if (!$.elem) return; } //そのtitle値をnum番目のpopupedノードのタイトル値として保存 $.popuped[num].ttl= $.elem.title; $.elem.title=""; //ブラウザ既定の表示を消すために空欄とする } //取得したtitle文字列をpopupボックスに挿入 var str = $.popup.innerHTML = $.popuped[num].ttl || "No Comment"; //��-3 block------------------------------------------------------------- //位置決めのための変数を設定 var offset={x:8,y:16} , oWidth , oHeight; //��-4 block------------------------------------------------------------- //既に当該要素のpopup外高さが取得されていれば if ($.popuped._num.outerHeight) { oWidth = $.popuped._num.outerWidth; //採寸はせずに取得値を利用 oHeight = $.popuped._num.outerHeight; //同上 with ($.popup.style) { width = $.popuped[num].width; //既定の width 値を利用 display = "block"; //popup ボックスを表示 } } else { //��-5 block------------------------------------------------------------- setOpacity.call($.popup,0); //高さ測定のためにpopupを完全透明化 //popupのwidthを定め、その外高さ測定のために既に完全透明化したpopupをブラウザに描かせる with ($.popup.style) { width = ( (str.length < 70) && 300 || 400 ) + 'px'; top = left = 0 + 'px'; display = "block"; } //��-6 block------------------------------------------------------------- //上で取得したpopupの内幅記憶並びにpopupの外幅及び外高さを測定し、同時に記憶 $.popuped[num].width = $.popup.style.width; oWidth = $.popuped._num.outerWidth = $.popup.offsetWidth; oHeight = $.popuped._num.outerHeight = $.popup.offsetHeight; } //��-7 block------------------------------------------------------------- //popupボックスの位置・横幅の設定 with ($.popup.style) { //popupの window 右辺からの飛び出し防止 → popup横位置補正 left = ($.pos.cX + offset.x + oWidth > scrWidth) ? ($.pos.X - $.pos.cX + scrWidth - oWidth +'px') : $.pos.X + offset.x + 'px'; //popupの window 下辺からの飛び出し防止 → popup縦位置補正 top = ($.pos.cY + offset.y + oHeight > scrHeight) ? ($.pos.Y - $.pos.cY + scrHeight - oHeight +'px') : $.pos.Y + offset.y + 'px'; } //popupの表示位置が決まったので完全不透明化する setOpacity.call($.popup,1); }, //��-8 block------------------------------------------------------------- function (){ //popup発生要素からマウスカーソルが離れたら・・・ $.popup.style.display = "none"; //popupボックスを隠蔽する } ); }
上のコードの説明と留意点
構成
-
jQuery()利用は最小限に
まず jQuery() の利用は最小限としました。多用するとそれだけ popup 表示に時間を要してしまい、 popup が遅れて表示されるのは、いらいらさせられるだけですから。特に特定のクラスを取得するコードは時間を要するため、一度の起動で済むように取得結果を変数に代入しました。また $("#idName") よりも document.getElementById("idName") の方が、当然要素ノードの取得時間は短いので、$("#idName") は使いませんでした。
-
コードの構成
コードは８つの部分で構成しました。順番にコメントします。
なお、アンダーライン部には class="popuped" を設定し、popup ボックスが表示されるようにしてあります。
第一は FireFox 対策です。このブラウザの場合、当該頁の起動中にマウスイベント（out、over、moveなど）を発生させると、呼び出してもいない関数内のプロパティを未定義と判断してしまい、エラーが生じてしまうのです。これを避けるためのコードとして、HTMLが文末迄読み込まれない限りマウスイベントを無効にしました。
上述のように IE 対策でボタンを作成せざるを得なかったのですが、コードの第二はそのボタンがクリックされた後のボタンの属性を様々に変更するコードです。popup 関数の二重呼び出し防止、あるいはクリックしたことが視覚的に分かるように、等々の必要から、コード全体を完成させる最後のタイミングで作りました。この部分は上の jQuery() 最小利用方針に拘わらず、jQuery() のメソッド連鎖だけで作りました。
第三は、変数の初期化コードです。JSON形式で定義しました。
第四は popup のためのタグ要素の追加と、document 内でマウスが動いたときに、その頁における絶対座標を取得するためのコードです。ここでは簡単なjQuery()メソッドを２つ（ append() 及び mousemove() ）使っています。当然メソッド連鎖も利用しました。
第五は、popup する要素と popup が発生する要素を変数に代入するためのコードです。ここでは jQuery(".className") メソッドを利用しました。
第六は、popup要素の高さを所得するために使用する完全透明化関数です。this を多用して作成し、この this を活用するためにこの関数の呼び出しには apply() メソッドを使用しました。
第七は、Windowのインナーサイズを取得するための関数です。-18は FireFox や Opera においてスクロールバーの幅が innerWidth に含まれてしまうために、これを差し引く減数です。また、ここでは window の幅や高さが頁読み込み五に変えられた場合に対応するために、window の resize イベントにインナーサイズを計測する関数をハンドルしました。
第八は、popup が発生する要素にマウスオーバーした時、及びマウスアウトした時の、それぞれの挙動を規定したコードです。hover() メソッドは onmouseover と onmouseout の２つのイベントを目的の要素ノードにセットすると同時に、その２つのイベントをトグルさせるjQuery()インスタンスメソッドです。ここではそれをフル活用しました。
最も苦労したのが mouseover 時の挙動を規定した関数なのですが、マウスオーバー時の挙動は唯一の例外（今まさに mouseover されている要素の jQuery.js が付けた index 暗号の取得）以外は jQuery() を使わず、基本的に DOM のメソッド/プロパティを利用して作りました。
留意点
popupを発生させる要素は、title 属性を持ち得る要素ならば、何でも構わないようにしました。しかも title 属性という一般的な属性値を popup される文字列とし、汎用化を追求しました。
なお、既述のように具体例をアンダライン箇所に設置しました。
popup を表示させたい要素に求められる要件は僅か２つです。(1) その要素の class属性を class="popuped" とすること、(2) その要素またはその子要素に title 属性を設けて popup したい文字列を記述すること。
popup を発生させる要素自身、あるいはその子要素のいずれからでも、popupが表示されるように工夫しました。A: 必要な class 属性を記述する要素ノードと、B: title 属性を持つノード（title値はpopupさせたい文字列）において、A と B は同一ノードでも良いし、子ノード B に title 属性を設定しても良い、ということです。（但しその逆には対応していません。また、切りがないので孫要素以深にも対応しませんでした。）
但し、子ノードに複数の title 属性が設定されている場合には、最初の title 属性値が popup されます。複数の title 属性値を popup させたい場合には、親ノードを別々にすれば良いわけです。
popup ボックスの背景色、文字色、フォント、枠等々はスタイルシートで設定しました。またその id 名は popup とし、このタグを jQuery() で append するようにしました。
変数は全て $ の独自プロパティに記憶させるようにしました。目的は複数のメソッドで利用するためで、別に var による変数でも良かったのですが、敢えて extend() の練習を兼ねてこうしました。
タグ内の title 属性の値を popup 内の文字列としているため、title 属性に係るブラウザ既定の動きを消さなければなりません。 title 値が二重に popup されてしまうからです。そのために、title = " " を利用しました。
なお、return false や event.preventDefault では、ブラウザ既定である title 属性への mouseover イベントによる popup 動作を抑制出来ませんでした。
同時に、そのままでは次回の popup 時に文字列を表示できませんので、title 属性値を復活させるべく popup 隠蔽前に削除した文字列を title 属性に代入するようにしました。
popupが window から右横にはみ出して、横スクロールバーを生じさせてしまう現象を防止する対策は、既にこのブログ全体に設定されているポップアップ表示のコード内で自作したものを転用しました。
高さ方向、つまり window 下方向へのはみ出し防止策は、一筋縄では出来ません。popup 要素はフォントサイズや文字数に応じてその都度高さが変わります。ですから popup 要素の高さを事前に知ることは出来ません。特殊な方法を採用しないと対応出来ません。それについては別途作成する予定ですが、既にこのブログ全体で利用している ポップアップで採用している手法なので、さほど時間は掛からないでしょう。（ 12/23追記 ）window 下辺からのはみ出し防止策を実装しました。当該要素を透明化する関数を用意して、完全透明化したpopupをブラウザに描かせて そのoffsetHeight値を取得し、その後高さ調整を行うと言う方法を採用しました。
（ 12/24追記 ）offsetHeight は毎回取得させるのは効率的ではありませんから、一工夫しました。jQuery.js は取得したDOMノード集合にindex番号を振ります。これを利用して popup を表示し得る要素に一度 mouseover したら、以後はリロードされるまでは二度と offsetHeight を計算しなくても済むようにしたのです。popuped 要素毎に title 属性値の文字数に応じて popup 要素の高さは変化しますが、各々の popuped 要素毎に見れば、当該の popup が何度表示されても、その popup の高さは変わらない訳ですから、計測は一度だけ行えば良い訳です。
（ 12/31追記 ）popupボックス内の文字列も一つの発生要素から起動するpopupにおいては、当該頁がリロードされるまではそれが何度表示/非表示になっても、幅や高さ同様に変わりません。そこでpopupボックス内の文字列も一度だけの取得で済むように工夫しました。二度目以降のmouseover時には、取得済みの値を利用することとし、一々DOM内を走査しないようにしたのです。
