うごレターポップアップ(1)
ひとまず、途中まで。
Ten.XHRでAjax通信ができるようなので、それを利用して。
ウゴレターにマウスを乗せると隠れたいた要素が出現し、Ajax通信が開始します。読み込みが終わるとレターの一覧が表示されます。
まだ最適化していないので、まったく入りきりませんが。
あと、消せません。
var isLetterLoading = false; function PopupLetter() { if($e("id('hatena-user-info')/li[@class='menu-ugoletter']").snapshotLength == 0){ if(console)console.log("PopupLetter : オブジェクトが存在しません。5秒後再実行します。"); setTimeout(PopupLetter,3000);return; } var letterPopup = document.createElement("div"); letterPopup.style.cssText = "visibility:hidden;position:absolute;width:100px;height:200px;background-color:white;border:black 3px double" ; document.body.appendChild(letterPopup); $e("id('hatena-user-info')/li[@class='menu-ugoletter']").snapshotItem(0).addEventListener("mouseover", function(e){ letterPopup.style.top = e.pageY + "px"; letterPopup.style.left = e.pageX + "px"; letterPopup.style.visibility:hidden; if(isLetterLoading == false) { letterPopup.textContent = "Now Loading..."; var timeOutTimer = setTimeout(function(){ letterPopup.innerText = "Timeout" }, 3000); var xhr = new (Ten.XHR)("http://ugomemo.hatena.ne.jp/letters", null, function (xhr) { clearTimeout(timeOutTimer); var range = document.createRange(); var ele = document.evaluate("id('main')",range.createContextualFragment(xhr.responseText),null,7,null).snapshotItem(0); letterPopup.appendChild(ele); isLetterLoading = false; }); isLetterLoading = true; } },false); }
また今度続きやります。