Pocket

イベントの概要はこちら

記念すべき第1回目のTERAKOYAは一つのパソコンをプロジェクターでつないで、みんなでその画面を見ながら実際にコードを書いて動かしてみる。というスタイルで行いました。

最初の2時間はjQueryの基本的な文法やどんな事ができるのかを確認。

作例として、「いつもならプラグインを探している」というドロップダウンメニューを作りました。

たった数行のコードでドロップダウンメニューができる事に驚きの声が上がっていました。

ドロップダウンメニュー

サンプル

http://jsdo.it/Masaki.Nakamura/cKrV

HTML

<ul id="gNavi">
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <!--/#gnavi-->
</ul>

JS

$('#gNavi>li').hover(function(){
//↑$('#gNavi>li')をロールオーバーした時

	$(this).find('ul').slideDown();
        //↑ロールオーバーした要素つまり$(this)内にあるulを見つけてスライドダウン

},function(){
//↑$('#gNavi>li')をロールアウトした時

	$(this).find('ul').stop().slideUp();
        //↑スライドアップ
});

簡易ライトボックスをみんなで作る

後半の2時間はお題として、講師はヒントを出しつつ、みんなで考えながら簡易的なライトボックスを作りました。

画像がフワッと表示されるようにfadeInを設定してプレビューした瞬間に「おー！」という歓声とともに拍手が巻き起こりました。

サンプル

http://jsdo.it/Masaki.Nakamura/uSCh

HTML

<a href="****.jpg" class="mybox">クリック</a>

CSS

.wrap {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-100px;

	display:none;

	}
.modal{
	background-color:#000;
	opacity:0.8;
	position:absolute;
	left: 0;
	right:0;
	top:0;
	bottom:0;
	}
.wrap .btn{
    position: absolute;
    top: -16px;
    right: -14px;
    cursor: pointer;
}

JS

$(function () {

    //↓ライトボックスを表示させる

    $('.mybox').click(function(){
        //↑.myboxをクリックすると↓の処理を行う

        var url = $(this).attr('href');
        //↑$(this)はクリックした要素、つまり.mybox。まずこいつ「$(this)」のhrefの値（画像のパス）をattrで取得して「url」という変数に代入。

        $('body').append('<div class="modal"></div><div class="wrap"><img src="' + url + '" alt=""/><div class="btn"><img src="btn.png" /></div></div>');
		//↑先ほどattrで取得した画像のパスが入っている変数「url」をHTMLタグ内に混ぜて、bodyタグの内側にappendを使って出力

        $('.wrap').fadeIn();
        //↑出力した.wrapをフェードイン（.wrapはcssであらかじめdisplay:noneを設定しておく）

		return false;
        //↑aタグをクリックした時の動き（画像へ推移する動き）を止める

	});

    //↓表示された画像を✕ボタンをクリックすると閉じるようにする

	$('body').on('click','.btn', function(){
        //↑動的に生成された.btnへのイベントは.onで。
        //「.btn」がクリックされた時の処理を「body」へ覚えさせる感じ

		$('.wrap,.modal').fadeOut();
        //↑.wrapと.modalをフェードイン
	});

});

今回はここまでで終了しました。
ただこれだけではちゃんとしたライトボックスとは言えません。
残っている課題としては

1. 画像の読み込みが完了してから表示させる。
2. 画像読み込み中はローディングバーなどを表示する。
3. 画像の幅と高さを調べて中央へ表示。
4. 画像がウィンドウよりも大きい場合はウィンドウからはみ出さないようにする。
5. 画像以外の部分（.modal）をクリックしたら画像を閉じる。
6. jQueryプラグイン化

などがあります。

少しずつこのライトボックスを完成させていけたらと思います。