- ベストアンサー
jqueryでajaxな読み込み+切り替え
- jqueryを使用して任意のディレクトリ内のファイルを読み込み、切り替える方法を考えています。
- 読み込むファイルの命名規則は年＋月などで行い、現在の月のファイルが最初に読み込まれるようにしたいです。
- 切り替え時にはフェードインやフェードアウトのアニメーションの設定オプションも追加したいです。
- hoge_1981
- お礼率85% (6/7)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
忘れ物 ・切替時にフェードイン&フェードアウト等 これも、$.load()のコールバック関数内の処理で $('#loadContents').hide().fadeIn()； でよいかな
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
ヒントの羅列 現在の月は、 var today = new Date(); var current_month = today.getMonth()+1; ですね。先行0をつけるなら var current_month = (current_month<10)?"0"+current_month:current_month; urlを作るのは単なる文字列連結です。 var url = "/hoge/2011" + current_month + ".html "; ajax読み込みは、 $('#oadContents').load(url, function() { //読み込まれた時の処理 }); のようにコールバック関数が設定できますから、そこで $('#btnPrev')と$('#btnNext') のhref属性を変えたり、style.displayを変えたりすればよい。 後は、 <a href="/hoge/201102.html" id="btnPrev">PREV</a> <a href="/hoge/201104.html" id="btnNext">NEXT</a> のクリックイベントをのっとって、リンクする代わりに、urlをセットして $.load()の処理を呼び出します。 $("#btnPrev").click(function(event){ event.preventDefault(); hoge(this.href); }); ご参考サイト http://semooh.jp/jquery/
お礼
回答ありがとうございます。 かなり強引な感じもするんですが、ヒントを元に実装する事ができました。 >urlをセットして$.load()の処理を呼び出します。 とあります通り、本来ならば、 $('#loadCalendar').load(url, function(){ }); の中に書いて連結？させていった方がスマートだとは思いますが、 「$.load()の処理の呼び出し」などがわからず、 結局それぞれ独立した形になってしまいました。 なにはともあれ感謝です。ありがとうございます。 一応これ見た人の参考になればと思いますので、不細工なコードを晒しておきます。 【参考】 $(document).ready(function(){ var today = new Date(); var thisYear = today.getFullYear(); var setMonth = today.getMonth()+1; var thisMonth = (setMonth<10)?"0"+setMonth:setMonth; $('#loadContents').load('/hoge/' + thisYear + thisMonth + '.html'); $('#btnPrev').live('click',function(event){ event.preventDefault(); var prevLink = $(this); $('#loadContents').load(prevLink.attr('href')) }); $('#btnNext').live('click',function(event){ event.preventDefault(); var nextLink = $(this); $('#loadContents').load(nextLink.attr('href')) }); }); ※エフェクトは読み込むコンテンツがそんなに重くなく、 すぐ表示されるのでかえってうざかったのでやめました。