jquery.fullPageを使ってみた

2013-10-03T00:00:00+00:00 JavaScript jQuery

https://github.com/alvarotrigo/fullPage.js

前に「jquery.onepage-scrollを使ってみた」っていうのをやったけど、それと同等的な物。こいつでは横スクロールな構成も作る事が出来る

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery.fullPage demo</title>

    <script type="text/javascript" src="jquery.js"></script>
    <!-- <script type="text/javascript" src="jquery-ui.js"></script> -->
    <script type="text/javascript" src="jquery.fullPage.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
  </head>
  <body>
    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <div class="nav-collapse">
            <ul class="nav" id="menu">
              <li class="active" data-menuanchor="1"><a href="#1">Section1</a></li>
              <li data-menuanchor="2"><a href="#2">Section2</a></li>
              <li data-menuanchor="3"><a href="#3">Section3</a></li>
          </div>
        </div>
      </div>
    </div>
    <div id="wrapper" style="margin: 50px">
      <div class="section active">
        <!-- 横スクロールはslideクラスを使う -->
        <div class="slide active">
          <h2>page1_1</h2>
        </div>
        <div class="slide">
          <h2>page1_2</h2>
        </div>
      </div>
      <!-- 部分的にverticalCenteredを有効にするにはtableとtableCellクラスを使えば良いっぽい -->
      <div class="section table">
        <div class="tableCell">
          <h2>page2</h2>
        </div>
      </div>
      <div class="section">
        <h2>page3</h2>
      </div>
    </div>
    <script type="text/javascript">
$(document).ready(function() {
  $("#wrapper").fullpage({
    // 縦配置をセンタリングしない
    verticalCentered: false,
    // ナビゲーションバーとリンクさせる際に必要的な
    anchors: ["1", "2", "3"],
    // ナビゲーションバーなメニューのノードID
    menu: "#menu",
    // 指定しない場合はtrueで、jquery-ui.jsが必要
    easing: false
  });
});
    </script>
  </body>
</html>

onepage-scrollとかだと、mousewheelなイベント取ってナビゲーションメニューとの連動を行う場合とかにおいてはグダグダとやらないといけない模様だったけど、これだとanchorsとか辺りでやれば勝手にやってくれる。あと上記コード中に書いてるけど、部分的にverticalCenteredな事したいとかも一応検証済み

てな感じでそんなのもあるって事で

Struts2をやってみる (16) - ModelDriven - Struts2をやってみる (15) - struts.patternMatcher