東方中央幻視台

クラス版Ajax投稿カレンダースクリプト

クラスとして使用できるわんくまブログ（.Text）専用Ajax投稿カレンダーを作成してみました。
クラスを定義する場合、インスタンスメソッドとして登録されている関数の直下でしかthisがインスタンスを参照しないことに注意する必要があります。

このクラスは、
<div id="calender"></div> <script language="JavaScript" src="WbAjaxCalender.js"></script> <script language="javascript"> <!-- var calender = new WbAjaxCalender("calender", "http://blogs.wankuma.com/hcm/"); calender.show(); //--> </script>
のように呼び出して使います。

インスタンスメソッドは以下のようなものが用意されています。

new WbAjaxCalender(elmId, blogUrl)

投稿カレンダーを初期化します。

show()

カレンダーを表示します。

setMonth(year, month)

カレンダーの年月を設定します。

addMonth()

カレンダーの月を加算します。

substructMonth()

カレンダーの月を減算します。

addYear()

カレンダーの年を加算します。

substructYear()

カレンダーの年を減算します。

ソースコードは以下のとおりです。
汚くてすみません。
//--------------------------------------------------------- // XmlHttpRequest オブジェクトを取得します。 //--------------------------------------------------------- function WbAjaxCalender_createXmlHttpRequest() { if(window.XMLHttpRequest) { return new XMLHttpRequest(); } else if(window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e2) { return null; } } } return null; } //--------------------------------------------------------- // カレンダーを表示します。 //--------------------------------------------------------- function WbAjaxCalender_show() { //読み込み中のメッセージを表示 this.element.innerText = "Loading Calender..."; //月の長さを計算 this.mLength = getMonthLength(this.year, this.month); //月初めの曜日を計算 this.mWeekDay = new Date(this.year, this.month - 1, 1).getDay(); //月別アーカイブのアドレスを生成 var murl = this.blogUrl + "archive/" + this.year + "/" + this.month + ".aspx"; //月別アーカイブを非同期で取得 var cal = this, request = this.createXmlHttpRequest(); request.open('GET', murl, true); var _this = this; request.onreadystatechange = function() { try { if(request.readyState == 4) { if(request.status == 200) WbAjaxCalender_callback(_this, request); else this.element.innerText = "Loading Failed!"; } } catch(ex){} } request.send(""); function getMonthLength(year, month) { var d; for(d = 28; d <= 32; d++) { if(new Date(year, month-1, d).getMonth() != month-1) return d - 1; } } } function WbAjaxCalender_callback(_this,request) { var marc = request.responseText; var html = ""; //ヘッダ部の生成 html += '<table id="{!N}_table"><tr><th id="{!N}_header" colspan="7">' + '<a href="javascript:{!N}.substructYear()"><</a> ' + '<a href="javascript:{!N}.substructMonth()"><<</a> ' + '{!Y}年{!M}月' + ' <a href="javascript:{!N}.addMonth()">>></a>' + ' <a href="javascript:{!N}.addYear()">></a>' + '</th></tr><tr>{!W}</tr><tr>'; var i, j, wday = _this.mWeekDay; for(i = 0; i < _this.mWeekDay; i++) { html += '<td class="{!N}_empty"></td>'; } //日付表示部の生成 var dstr, mstr, ystr, match, title, href; mstr = ketaume(_this.month, 2, "0"); ystr = ketaume(_this.year, 4, "0"); for(i = 1; i <= _this.mLength; i++ && wday++) { title = ""; href = ""; //週末の処理 if(wday == 7) { wday = 0; html += "</tr><tr>"; } var dstr = ketaume(i, 2, "0"); var regex = new RegExp(replacevars('({!B}archive/{!YS}/{!MS}/{!DS}/\\d+.aspx)">([^<>]+)<'), 'gm'); var match = marc.match(regex); if(regex.test(marc)) { for(j = 0; j < match.length; j++) title += "「" + match[j].substring(match[j].indexOf('>') + 1, match[j].indexOf('<')) + "」"; } if(title != "") { href = replacevars('href="{!B}archive/{!YS}/{!MS}/{!DS}.aspx"'); } html += replacevars('<td class="{!N}_date"><a {!H} title="{!T}">{!D}</a></td>'); html = replacevars(html); } //変数の置換 function replacevars(str) { return str .replace("{!YS}", ystr) .replace("{!MS}", mstr) .replace("{!DS}", dstr) .replace("{!D}", i) .replace("{!T}", title) .replace("{!H}", href) .replace("{!B}", _this.blogUrl) .replace("{!N}", _this.name) .replace("{!Y}", _this.year) .replace("{!M}", _this.month) .replace("{!W}", _this.weekHeader); } //桁埋め function ketaume(n, k, c) { s = n + ""; while(s.length < k) s = c + s; return s; } _this.element.innerHTML = html; } //---------------------------------------------------------- // 年月を設定します。 //---------------------------------------------------------- function WbAjaxCalender_setMonth(year, month) { this.year = year; this.month = month; this.show(); } function WbAjaxCalender_addMonth() { this.month++; if(this.month == 13) { this.year++; this.month = 1; } this.show(); } function WbAjaxCalender_substructMonth() { this.month--; if(this.month == 0) { this.year--; this.month = 12; } this.show(); } function WbAjaxCalender_addYear() { this.year++; this.show(); } function WbAjaxCalender_substructYear() { this.year--; this.show(); } //---------------------------------------------------------- // コンストラクタ // 月遷移リンクのため変数名は要素IDと同一にしてください。 //---------------------------------------------------------- function WbAjaxCalender(elmId, blogUrl) { //インスタンスフィールド this.name = elmId; this.element = document.getElementById(elmId); //対象要素 this.blogUrl = blogUrl; //ブログのURL var today = new Date(); this.year = today.getFullYear(); //年 this.month = today.getMonth() + 1; //月 this.mLength = null; //月の長さ this.mWeekDay = null; //月の曜日 //曜日ヘッダ var weekdays = Array('日', '月', '火', '水', '木', '金', '土'); this.weekHeader = ""; for(i = 0; i < 7; i++) this.weekHeader += '<th>' + weekdays[i] + '</th>'; //インスタンスメソッド this.createXmlHttpRequest = WbAjaxCalender_createXmlHttpRequest; this.show = WbAjaxCalender_show; this.callback = WbAjaxCalender_callback; this.setMonth = WbAjaxCalender_setMonth; this.addMonth = WbAjaxCalender_addMonth; this.substructMonth = WbAjaxCalender_substructMonth; this.addYear = WbAjaxCalender_addYear; this.substructYear = WbAjaxCalender_substructYear; }
カレンダーの表示されないスキンにどうぞ。
ちなみにCSSによる装飾が必須です。

投稿日時 : 2007年4月5日 20:32