mukiSlideの簡単な説明

祝はじめてのプラグイン

〜 jQueryでプレゼン用のスライドをつくってみたよ 〜

操作方法

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

キーバインド
↑：最初のページへ
←：前のページへ
→, space：次のページヘ
↓：最後のページへ

推奨ブラウザ

IEは確認してませんが上手く動かないっぽいです。でも今時、IEでないとダメってことないよね。むしろ問いたい選択肢がたくさんあって、しかもその他のブラウザが優れているとわかってて何故IEなんだい？何故なんだい？

基本的なHTML

// 必要なJavaScript
<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>

// プレゼンのタイトル
<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>

表示例1

ページのレイアウト、フォントサイズ、フォントカラーなど装飾に関する大抵のものはCSSの変更で可能です。

ダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト
ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト 
$(function(){
    var hoge = "hogeee!";
});

表示例2

  1. ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
  2. ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    1. ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    2. ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    3. ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

特殊な動きを指定

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

separateをclassに指定することで個別表示が出来ます。spanで囲った要素は後から表示させることが出来ます。リストを入れ子にするなど階層が深くなると思った挙動にならないことがあります。

ここは先に表示ここが後から表示ここは先に表示

  1. ここは先に表示
    • ここは先に表示ここが後から表示ここは先に表示

その他

  1. これを使うときにそんな環境なわけないけど、CSSやJavaScriptがOFFの環境でも優しくなっているはずです。
    1. OFF環境には必要ないものなので右上のメニューとページ番号はJavaScriptで書き出しています。
    2. 本当は良くないのかもだけど、そのCSSもJavaScriptで記述しています。
  2. 使う人いるかどうかわからないけど、ライセンスとか難しいこと言わないで自由に使って下さい。
  3. http://labs.yusukenakanishi.com/2010/03/13/mukislide/にも簡単な説明があります。

終り

〜 お疲れ様でした 〜

Copyright © Yusuke Nakanishi.