LoginSignup
9

More than 5 years have passed since last update.

Barba.jsを使って、bodyのクラスネームを動的に更新する方法

Last updated at Posted at 2017-05-09

一番簡単のは「namespace」と「transitionCompleted」のイベントで使用するようになります。
Live Demo
例:

foo.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ページ1:foo</title>
</head>
<body class="foo">
<div id="barba-wrapper">
    <div class="barba-container" data-namespace="foo">
        <h1>ページ1:foo</h1>
        <p>Lorem Ipsum</p>
        <p><a href="bar.html">ページ2へ</a></p>
    </div>
</div>
<script src="//cdn.jsdelivr.net/jquery/3.2.1/jquery.js"></script>
<script src="//cdn.jsdelivr.net/barba.js/1.0.0/barba.js"></script>
<script src="test_classname.js"></script>
</body>
</html>
bar.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ページ2:bar</title>
</head>
<body class="bar">
<div id="barba-wrapper">
    <div class="barba-container" data-namespace="bar">
        <h1>ページ2:bar</h1>
        <p>Lorem Ipsum</p>
        <p><a href="foo.html">ページ1へ</a></p>
    </div>
</div>
<script src="//cdn.jsdelivr.net/jquery/3.2.1/jquery.js"></script>
<script src="//cdn.jsdelivr.net/barba.js/1.0.0/barba.js"></script>
<script src="test_classname.js"></script>
</body>
</html>
test_classname.js
Barba.Dispatcher.on( 'transitionCompleted', function( currentStatus, prevStatus ) {
    var $body = $( 'body' );
    if ( prevStatus && prevStatus.namespace ) {
        if ( ! currentStatus
        || ( currentStatus.namespace && currentStatus.namespace !== prevStatus.namespace ) ) {
            $body.removeClass( prevStatus.namespace );
        }
    }
    if ( currentStatus && currentStatus.namespace ) {
        $body.addClass( currentStatus.namespace );
    }
});
Barba.Pjax.start();

jQueryなしでVanillaJSの場合は:

document.body.className = document.body.className.replace( prevStatus.namespace, '' );
document.body.className += ' ' + currentStatus.namespace;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9