Still Laughin'

Ajaxを使って、PHPでデータベースから取り出したメッセージを htmlに整形したファイルを、画面遷移なしで取り込むことは出来るのですが、表示スペースには限りがあるのでメッセージの数が多くなると問題があります。
そこで、ニュースなどでよく使われるティッカー形式で表示させることにしました。

ググって見つけたのが、「Super simple jQuery ticker」です。　表示のアニメーションは slide と fade の2種類が選べます。

Ajaxで取ってくるファイル（Get_Message.php）に、

<dl>
  <dt>2011-04-16 19:38　武藤より</dt>
  <dd>こんばんワニ</dd>
</dl>
<dl>
  <dt>2011-04-16 09:55　加藤より</dt>
  <dd>おはよウナギ</dd>
</dl>

という感じで、PHPにリストを作らせます。
あとは表示させるページに <div id="message"></div> という入れ物を用意して、

<script type="text/javascript" src="./js/list_ticker.js"></script>
<script type="text/javascript">
 <!--
  $(function() {
    $.ajax({
      url: "Get_Message.php",
      cache: false,
      success: function(html){
        $("#message").append(html);
        $('#message').list_ticker({
          speed: 5000,
          effect: 'slide'
        });
      }
    });
  });
  // -->
</script>

てな感じにスクリプトを書いておけば、5秒ごとにメッセージを順番に表示してくれます。

１つのメッセージごとに dl 要素を分けているのは、dt 要素 と dd 要素をセットで扱うためです。
最初はプラグインを改変して、１つの dl 要素の中から dt 要素 と dd 要素をセレクトしていたのですが、スライド効果の動きがぎこちなかったので。

いやあ、それにしても現実逃避パワーというのは実に素晴らしい！
何かを「しなければならない」と感じると、それをしなくてもすむように別のことを全力でやってしまうんですよねぇ。