Demoを見る

ファイルをダウンロード

jQueryのプレゼン用スライドプラグインをつくってみました。プラグインといっても何の設定も出来ませんが…。Demoを見てもらえば大体のことはわかると思います。一応以下にも説明をしておきますね。

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

<link rel="stylesheet" type="text/css" media="all" href="./css/default.css" />
<link rel="stylesheet" type="text/css" media="all" href="./css/base.css" />
<script type="text/Javascript" src="./js/lib/jquery.min.js"></script>
<script type="text/Javascript" src="./js/mukiSlide.js"></script>
<script type="text/javascript">
jQuery(function($){
    // ページからページへ移るときのアニメーションの設定
    // デフォルトはshow、設定出来るのはfadeIn、slideDown
    $.mukiSlide({ motion: 'fadeIn' });
});
</script>

base.cssを変えることで好きなデザインにすることが出来ます。でもmukiSlide.jsは触らない方がいいです。だって書いた本人もよくわかんないから…。

基本的なHTML

// プレゼンのタイトル
<div id="title">
    <h1>jQueryでプレゼン用のスライド作成</h1>
</div>
// ここから各ページ
<div id="content">
    // .sectionのかたまりが1ページ。.coverを指定すると表紙風のレイアウトになる。
    <div class="section cover">
        <h2>表紙タイトル</h2>
        <p>〜 リード文 〜</p>
    </div>
    <div class="section">
        <h2>ページタイトル</h2>
        <p>フォントの色などの細かな調整はCSS出できます。</p>
    </div>
</div>
// コピーライトなど
<address>右下に表示されます。</address>

特殊な動きを指定したい場合

<div class="section separate">
    <p>ここは先に表示<span>ここが後から表示</span>ここは先に表示</p>
</div>

「特殊な動き」についてはDemoを見てもらう方がはやいです。

推奨ブラウザ

• Safari
• Chrome
• Firefox
• Opera

操作方法

Demoにある右上メニューとキーボードでの操作ができます。

キーバインド

↑：最初のページへ

←：前のページへ

→, space：次のページヘ

↓：最後のページへ

説明は以上になります。とても簡単に書きましたがDemoを見て「ふーん、こんなこと出来るんだ。」とか「何をいまさら。」とかそんな感じでいいと思います。

プラグインデビューってことで僕にとっては記念すべき日です！？そしてこんな簡単なものを作るだけで、こんなにも嬉しかった日があったんだってこと忘れないようにしたいですね！

修正報告

2010/03/19

アニメーションの設定を出来るようにしました。これでプラグインらしくなったと思います。