シンプルなインターフェースで実装するHTMLのスライド simpleSlide.js

simpleSlideを使えば誰でも簡単にHTMLスライドを導入できます。

ファイルをダウンロードする

• simpleSlide.zip(23KB)

要素をマークアップする

simpleSlideではマークアップに決まりがありますが非常に単純です。

ページを分ける

1つのdiv.sectionが1つのスライドページに相当します。

<div class="section">
</div>

ページにタイトルを付ける

スライドページには必ずひとつのタイトルが必要です。
div.section直下の子要素はHN要素にします。

<div class="section">
  <h2>これがタイトルになる</h2>
</div>

HN要素じゃなくてもいいんですが
とりあえずdiv.section > * のテキストがタイトルとして扱われます。

あとは適当に要素を入れていきます。
blockquoteとかpreとかその辺のスタイルは指定してないので
使う場合はCSSに追加してください。

<div class="section">
  <h2>これがタイトルになる</h2>
  <p>テキストテキスト</p>
  <ul>
    <li>リストリスト</li>
    <li>リストリスト</li>
  </ul>
</div>

必要なファイルを読み込む

<link rel="stylesheet" type="text/css" href="css/simpleslide.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/simpleslide.js"></script>

だけです。

こんな感じになります。

操作方法など

これまた簡単です。
ドキュメント上をクリックするとスライドを進めたり戻したりできます。
また矢印キーやスワイプでも操作できます。

• クリックはドキュメントの右半分なら進む、左なら戻る。
• 矢印キーは↑・←は戻る、→・↓は進む。
• Macの場合は上スワイプは戻る、下スワイプは進む。
• メニューをクリックするとタイトル一覧が表示されて好きなスライドに移動できます。
• Back To Titleからいつでもタイトルスライドに戻れます。

細かいところでは

• タイトルスライドは #slide-0 で数字部分が増えていきます。
• #slide-X をURI末尾に付けて呼び出すと対象のスライドで開けます。
• #slide-X の Xは(下部に表示されているスライドページナンバー -1)になります。
• タイトルはスライドのタイトルを付加したものに書き換えられます。

対応ブラウザ

IEには対応してません。。。
CSSのround-borderプロパティを使ってるので正式な対応ブラウザは以下だけです。

• Firefox3
• Safari3