「つづきを読む」スクリプトを作成しよう

「つづきを読む」を実現するサンプルスクリプト

　今回は長い内容の文章を表示させる場合、一部だけを表示しておいて興味があったら、リンクをクリックしてつづきを読むことができるようにするサンプルを作成します（図1-1）。この時、単にページを分けてリンクを貼（は）ってしまうよりも、YUIを使ってその場で続きの文章を表示させることができます。

　まずは、以下のようなHTMLを準備します。この時は、全文を作っておきます（図1-2）。

　続きの文章は後でJavaScriptで制御するため、ID属性を割り振っておきましょう。そして、スタイルシートで表示されないようにしておきます。

　「height: 0」は、高さを0にする指定ですが、そのままでは、文字のはみ出し処理（overflow）により、はみ出したものも表示されてしまうため、結果として文字が隠れません。そこで「overflow: hidden」として、はみ出したものを非表示にすることで、文字が出なくしています。この「overflow: hidden」のスタイルは、アニメーションをする場合にほとんど必要になるため、覚えておきましょう。

　また、リンクの部分にもIDを割り振っておきます。次に、YUIを参照します。今回必要なライブラリは「yahoo-dom-event.js」と「animation.js」の2つになります。直接リンクする場合は、以下のように記述します。






　それでは、スクリプトを作っていきましょう。要素の最後に、以下のように記述してください。



　これで完成です。実際に動かしてみましょう。画面を表示すると、はじめは冒頭と「つづきを読む」というリンクしか表示されていません。ここで、そのリンクをクリックすると続きの文章が表示されます。また、リンクは表示されなくなります。

スクリプトの解説と応用技

　それでは、内容を解説していきましょう。「YAHOO.util.Anim」というのがアニメーションをつかさどる「オブジェクト」と呼ばれる単位です。スクリプトではよく出てくる言葉で、なにか機能を実現するための道具と考えると良いでしょう。ここに、必要な「パラメータ」を指定すると希望の動きを作ることができます。

　「Anim」オブジェクトの場合は、対象となる要素のID属性と、細かな設定を指定します。今回の場合、対象は「detail」というID属性の