(X)HTMLタグの設定

それでは実際にliScrollを使ってみます。liScrollはjQueryライブラリのプラグインとして機能するため、必ず先にjQueryライブラリファイルを読み込ませておく必要があります。つまり以下のような順番でスクリプトファイルを読み込ませます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>

liScrollを使う場合にはスタイルシートファイルも読み込ませる必要があります。このファイルはliscroll.cssで以下のようにして読み込ませます。

<link rel="stylesheet" href="css/liscroll.css" type="text/css">

サンプルではさらに独自のスタイルを適用しているためmain.cssファイルも同様に読み込ませています。これでliScrollを利用する準備が完了です。

liScrollでは単純に<ul>タグ、<li>タグを記述しスクロールさせたい<ul>タグを指定するだけです。これは以下のように指定します。●の部分はID名やタグ名、階層構造を指定することができます。該当するもの全てがスクロールの対象になります。

$(function() {
    $(●).liScroll();
});

サンプル01ではID名newsの<ul>タグ内をスクロールさせています。

項目の内容が右から左にスクロールする

サンプルで用意してあるスタイルシートファイルでは<a>タグの後に余白を取るようになっています。このため、<li>タグ内に<a>タグがない場合には、項目内容が連続して表示されます。必要に応じてmaginの値を調整してください。

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>jQuery liScrollサンプル</title>
        <link rel="stylesheet" href="css/liscroll.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
        <script type="text/javascript"><!--
            $(function() {
                $("#news").liScroll();
            });
        // --></script>
    </head>
    <body>
    <h1>jQuery liScrollサンプル</h1>
        <ul id="news">
            <li>liScroll Sample <a href="#">[liScrollのページへ]</a></li>
            <li>liScrollはjQueryのプラグインです <a href="#">[詳細]</a></li>
            <li>手軽にNews Tickerが作れます <a href="#">[View Sample]</a></li>
        </ul>
    </body>
</html>