Barba - にほんご。

Partial Output

リンクをクリック時に取得するHTMLは div#barba-wrapper以下のDOMのみを取得します。


HTML

1.html
<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ1</p>
    <p><a href="./page.php?p=2">ページ2を表示</a></p>
  </div>
</div>
2.html
<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ2</p>
    <p><a href="./page.php?p=1">ページ1を表示</a></p>
  </div>
</div>
</div>

JavaScript

Barba.Pjax.start();

php

page.php
<?php
$x_barba = $_SERVER['HTTP_X_BARBA'];
$p = isset($_GET['p']) ? $_GET['p'] : 1;
$next = $p == 2 ? 1 : 2;
 
if (! $x_barba) {
    header('Content-Type: text/html; charset=UTF-8');
    include('./'.$p.'.html');
    exit;
}
?>
<div id="barba-wrapper">
<div class="barba-container">
<p>ページ<?php echo $p;?></p>
<p><a href="./page.php?p=<?php echo $next;?>">ページ<?php echo $next;?>を表示</a></p>
</div>
</div>