jQuery

【jQuery】オフキャンバスプラグインjQuery Offcanvas

July 9, 2017
jQuery Offcanvas

jQuery Offcanvasはコンテンツをオフキャンバスとして設定し、必要に応じて流入させることができます。

Link files

<script src='jquery.min.js'></script>
<script src='jquery.offcanvas.min.js'></script>
<link rel="stylesheet" href="jquery.offcanvas.min.css" />

Identify main canvas

$(document).ready(function() {
    $("#offcanvas-box").offcanvas({
        mainCanvas: '#page', // Selector or jQuery object
    });
});

Initialization and usage

$(document).ready(function() {
    $("#offcanvas-box").offcanvas(/* Pass options as object */); // Initialization

    $("button#toggle").click(function() {
        $("#offcanvas-box").offcanvas("toggle"); // Toggle after click a button
                                                 // Options are bound to the element
    });
});

Options

defaults = {
    /* Off-canvas */
    position:          'left', // top|right|bottom|left
    mode:              'push', // push|cover|base
    injectPosition:    'before', // before|after, relative to main canvas
    cloneElement:      false, // Instead of moving it
    css:               { // Applied to the off-canvas wrapper
        width:  '100%',
        height: '100%'
    },
    jsFallback:        true, // If browser doesn't support CSS3 transitions or Transit isn't available
    animate:           {}, // Add further animation properties/options

    /* Main canvas */
    mainCanvas:        '#page', // Selector or jQuery object
    mainCanvasClick:   true, // Make the main canvas click-able
    mainCanvasAnimate: {}, // Add further animation properties/options - Overwrites 'animate'
    mainCanvasCss:     {}, // Add CSS styles to the main canvas

    /* Callbacks */
    onShowBefore:      function() {}, // Triggered before the off-canvas is shown
    onShowAfter:       function() {}, // Triggered after the off-canvas is shown
    onHideBefore:      function() {}, // Triggered before the off-canvas is hidden
    onHideAfter:       function() {}, // Triggered after the off-canvas is hidden
    onMainCanvasClick: function() {}, // Triggered after clicking on the main canvas
};

MIT