[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide

Facebookのモバイル版のように、ボタンやリンクをクリックするとページ全体を横にスライドし、隠されたコンテンツやリンク先のページを表示するjQueryのプラグインを紹介します。

PageSlide -GitHub

[ad#ad-2]

• PageSlideのデモ
• PageSlideの使い方

PageSlideのデモ

まずは、デモからご紹介。

デモ

3つのデモがあります。
一つ目は青いボタンをクリックすると右にスライドし、リンク先のページを表示します。

デモ

二つ目は左にスライドし、隠れていたコンテンツを表示します。

デモ

[ad#ad-2]

三つ目も左にスライドし、iframe内にコンテンツを表示します。

デモ

PageSlideの使い方

外部ファイル

スタイルシートをhead内に記述します。

<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">

ページの下（</body>の上）にスクリプトを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pageslide.min.js"></script>

JavaScript

PageSlideさせる要素を指定します。

<script type="text/javascript">
    $('a').pageslide();
</script>

開く時は、下記のようになります。

<script type="text/javascript">
    $.pageslide({ href: '#some-element' });
    $.pageslide({ href: 'some-page.html' });
</script>

閉じる時は、下記のようになります。

<script type="text/javascript">
    $.pageslide.close();
</script>

スクリプトのオプション

オプションではスライドのスピードや方向などを設定できます。

speed

スライドするスピード。

direction

スライドの方向。

modal

リンク先をモーダルで開きます。
true時は明示的に閉じる必要があります。

iframe

リンク先をiframeで開きます。

href

リンク先に「javascript:」を使用した際のリンク先。