強火で進め このページをアンテナに追加 RSSフィード

整理された情報は こちら へどうぞ。

2012年01月13日

[][]簡単にスワイプ処理を作成出来るライブラリ「Swipe」

f:id:nakamura001:20120114015215p:image

「Swip」はiPhoneなどでスワイプを行うとページを切り替える様な処理が簡単に実装出来るライブラリです。

使い方

主な記述は以下の様になります。ここがスワイプ可能な部分になります。

<div id='slider'>
  <ul>
    <li style='display:block'><div>1</div></li>
    <li style='display:none'><div>2</div></li>
    <li style='display:none'><div>3</div></li>
    <li style='display:none'><div>4</div></li>
    <li style='display:none'><div>5</div></li>
  </ul>
</div>

ライブラリはCSSとJSファイルで出来ています。

CSSファイルはheadタグ内で読み込み

<link href='style.css' rel='stylesheet'/>

JSファイルはbodyタグの閉じタグの直前で読み込みます。その後、Swipeオブジェクトを生成し、JSでの処理を実行します。この時にスワイプ処理をしたいタグのIDの要素を引数とします。

<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
</script>

こちらで試せます。iPhoneSafariなどで開くとスワイプで切り替えが可能です。なお、マウスでは出来ないみたいです。 prev や next のリンクをクリックして切り替える事は可能みたいです。

この様に記述すると画像ファイルをスワイプする事も可能です。 style='width:300px' の部分を画像より大きい値に変更するのを忘れない様にして下さい。

<div id='slider' class='swipe' style='width:300px'>
  <ul>
    <li style='display:block'><img src="../images/img01.jpg"></li>
    <li style='display:none'><img src="../images/img02.jpg"></li>
    <li style='display:none'><img src="../images/img03.jpg"></li>
    <li style='display:none'><img src="../images/img04.jpg"></li>
    <li style='display:none'><img src="../images/img05.jpg"></li>
  </ul>
</div>

サンプルはこちら

タイマーと組み合わせると自動的にめくられる様にも出来ます。

var slider = new Swipe(document.getElementById('slider'));
setInterval(function() {
  slider.next();
}, 3000);

サンプルはこちら。3秒間隔で画像が切り替わります。

関連情報

こちらの記事で知りました。

新春特別企画:2012年注目のモバイル向けJavaScriptフレームワーク・ライブラリあれこれ|gihyo.jp … 技術評論社

http://gihyo.jp/dev/column/newyear/2012/mobile-javascript?page=2

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/nakamura001/20120113/1326473383
リンク元