ホームページやテニスのこと．．．等。思いついたことや自分が思い出すためのメモなどを書く予定！

本日はjQueryでイベントカレンダーを作成しました。
これは熊本県テニス協会のホームページで年間の試合情報を掲載するのに使用しました。
実物は下記ホームページよりご確認下さい。トップページにあります。
http://www.kta-tennis.info

今日はとりあえず作っただけで、デザインはまだまだ変えていかなくてはいけませんが・・・(^^ゞ

今回はRewishさんのプラグイン「ｊQuery calendar」を利用させていただきました。
http://rewish.org/javascript/jquery_calendar

非常にシンプルに作られていたため、意外と簡単に設置できました。Rewishさんには感謝です。
作成者が日本人なので解説が日本語で大変助かります。英語の解説は・・・頑張って読むけど半分くらいはカンでやってますから・・・。

設置方法などは、私の解説より上記ホームページをご覧頂いた方が完璧に書かれておりますので、今回は割愛します。

さて、前回jQueryとは何かという話しをしましたが、本日は実際にjQueryを使ってみます。何事も実践しないと身につかないですからね。

まず、旧来の方法でアコーディオンっぽいメニューを作ってみました。
サンプル

サンプルでは、3つページを別々に制作し、リンクでページを遷移してメニューを開閉させています。
これでは、ページを遷移する際に読み込む時間がかかりますし、遷移後にページの先頭に画面が移動するなどの問題もあります。そして何より、制作する立場になった時、ページ量がかなり増えてちょっと何かを書き換えるのにも処理が煩雑になってしまいます。

次にjQueryを使用したアコーディオンメニューを作ってみました。
サンプル

今度は、何かなめらかな動きになりましたよね。
こんなflashライクな動きが簡単につけられるのです。いやぁ、もう少し早く勉強すれば良かった(^^ゞ

続きを読む

WEBデザイナーにとっては当たり前のように使用するjQueryですが、なかなか重い腰が上がらず後回しにしていましたが、ついに使ってみようかなぁ・・・なんて思って、ちょっと調べてみました。

まず、「jQuerytとはなんぞや？」と・・・思ったわけです。
いや、何となくは分かっているのですよ。一応WEBデザインも勉強してるし・・・・使ったことあるし・・・・。
でも、改めて何かと問われるとなんと答えて良いのやら (^^ゞ
ということで、ウィキペディアからの引用です。

jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。John Resig が2006年1月に開催された BarCamp NYC でリリースした。
MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。

MIT LicenseやGNU General Public Licenseについては今回は触れませんが、つまりは、HTMLとJavaScriptの連携を助けるJavaScriptをたくさん集めた物で、そのようなライセンスの範囲内であれば無料で使えるということです。（こんな説明で良いのか？）

いやいや、なんてすばらしい物でしょう！
昔は、自分がしようとしていることに近いことが出来るJavaScriptのソースをインターネットで探して、自分なりにちょっと改造して・・・なんてしてしていたのですが(^^ゞ

ってことで、次回は下記のサイトを参考にしながら実際にjQueryを使ってみようと思います。
次回がいつになるかは分かりませんが・・・(^^ゞ

【jQuery日本語リファレンス】
http://semooh.jp/jquery/

【JavaScript + Ajax 実践サンプル集】
http://jsajax.com/