今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. 入力に応じてテキストエリアの高さを調節「Autosize」
  3. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

iOS風の全画面スライドパネルの切り替えを実装「kontext」

スポンサーリンク

iOS風の全画面スライドパネルの切り替えを実装するプラグイン「kontext」を紹介します。

jQueryプラグイン「kontext」

このプラグインを使えば、かっこいい!アニメ効果でスライドを切り替えることができます。全画面パネルなので、スライドショーや紙芝居のような使い方もできそうですね。

js部分もひな形が用意されているので、カスタマイズも簡単にできそうです。

スポンサーリンク

それではデモページをご覧ください。

「kontext」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="kontext のデモでーす。">
<title>kontext - jQuery Plugin Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/kontext.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<article class="kontext">
<div class="layer one show">
  <h2>Kontext のデモでーす。</h2>
  <p>キーボードの左右「矢印」キーを押す、あるいは下の方にあるボタンをクリックしてみてください。</p>
  <p><a href="https://webkaru.net/jquery-plugin/kontext/">「jQueryプラグインまとめ」に戻る</a></p>
</div>
<div class="layer two">
  <p>むかしむかしあるところに…</p>
</div>
<div class="layer three">
  <p>おじいさんとおばあさんが…</p>
</div>
<div class="layer four">
  <p>いたよ。</p>
  <p>完。</p>
</div>
</article>

<ul class="bullets"></ul>


<script src="js/kontext.js"></script>
<script>
var k = kontext( document.querySelector( '.kontext' ) );
var bulletsContainer = document.body.querySelector( '.bullets' );
for( var i = 0, len = k.getTotal(); i < len; i++ ) {
  var bullet = document.createElement( 'li' );
  bullet.className = i === 0 ? 'active' : '';
  bullet.setAttribute( 'index', i );
  bullet.onclick = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
  bullet.ontouchstart = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
  bulletsContainer.appendChild( bullet );
}

k.changed.add( function( layer, index ) {
  var bullets = document.body.querySelectorAll( '.bullets li' );
  for( var i = 0, len = bullets.length; i < len; i++ ) {
    bullets[i].className = i === index ? 'active' : '';
  }
});

document.addEventListener( 'keyup', function( event ) {
  if( event.keyCode === 37 ) k.prev();
  if( event.keyCode === 39 ) k.next();
}, false );

var touchX = 0;
var touchConsumed = false;

document.addEventListener( 'touchstart', function( event ) {
  touchConsumed = false;
  lastX = event.touches[0].clientX;
}, false );

document.addEventListener( 'touchmove', function( event ) {
  event.preventDefault();

  if( !touchConsumed ) {
    if( event.touches[0].clientX > lastX + 10 ) {
      k.prev();
      touchConsumed = true;
    }
    else if( event.touches[0].clientX < lastX - 10 ) {
      k.next();
      touchConsumed = true;
    }
  }
}, false );
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)