【jQuery】jQueryを使って簡単にオフキャンバスを実装。jQuery.offcanvas

jQuery.offcanvasはキャンバスの内容を外側に入れて、ボタンをクリックすると任意の要素を公開することができます。
このプラグインはモバイルナビゲーションなどで使用できます。

jQuery

jQuery本体は1.7以上。アニメーションのためにVelocity.jsが必要。

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/velocity-animate/velocity.min.js"></script>
<script src="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.js"></script>

CSS

<link rel="stylesheet" href="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.css">

初期化

var $el = $("#element").offcanvas();
$(".offcanvas-trigger").on("click", function() {
$el.offcanvas("toggle");
});

オプション

$("#element").offcanvas({
origin: "right",
duration: 400
});

データの属性を介してのオプションを設定

<div id="element" data-offcanvas-duration="200" data-offcanvas-easing="ease">
...
</div>

class

{
container: "offcanvas",
element: "offcanvas-element",
inner: "offcanvas-inner",
open: "offcanvas-open",
outer: "offcanvas-outer",
overlay: "offcanvas-overlay"
}

API

$("#element").offcanvas("show");

Events

$("#element").on("shown.offcanvas", function() {
// do stuff when offcanvas is revealed and animation is finished
});

toggle

$("#element").on("toggle.offcanvas", function(event, visible) {
console.log(visible) // outputs offcanvas state (true or false)
});

MITライセンス

 
jQuery.offcanvas

【jQuery】jQueryを使って簡単にオフキャンバスを実装。jQuery.offcanvas

  • LATEST
  • RELATED
  • POPULAR