Question

所以我想在main.scala.html文件中使用以下代码制作动态导航栏：

@(title: String)(content: Html)

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/DCicon.jpg")">
        <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("javascripts/jquery-1.12.0.min.js")" type="text/javascript"></script>
        <link rel='stylesheet' href='@routes.Assets.versioned("bootstrap/css/bootstrap.css")'>
        <link rel='stylesheet' href='@routes.Assets.versioned("bootstrap/css/bootstrap.min.css")'>
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>
    </head>
    <body>
    <script>
        $(document).ready(function() {
            $('[data-toggle=offcanvas]').click(function() {
            $('.row-offcanvas').toggleClass('active');
            });
        });
    </script>
    <div class="page-container">

    <!-- top navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="@routes.Assets.versioned("images/DCicon.jpg")">DirtyChimp</a>
        </div>
       </div>
    </div>

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-left">
        <!-- sidebar -->
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <ul class="nav">
              <li class="active"><a href="#">@title</a></li>
              <li><a href="@routes.Application.categories">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>              
            </ul>
        </div>

        <!-- main area -->
        <div class="col-xs-12 col-sm-9">
          <h1>Shrink Width to Collapse Sidebar</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
            Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
            Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
            arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
            semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a 
            euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis. 
            Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus 
            odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim 
            eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>

        </div><!-- /.col-xs-12 main -->
    </div><!--/.row-->
  </div><!--/.container-->
</div><!--/.page-container-->
        @content
    </body>
</html>

我对使用scala非常陌生，并且对java非常有经验。我试图弄清楚如何在页面之间导航时使此导航栏动态化。

Answer 1

您可以在撰写模板时传递导航栏的其他内容，如下所示：

@(title: String, navBar: Html = HtmlFormat.empty)(content: Html)

<!DOCTYPE html>
<html lang="en">
...
<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="@routes.Assets.versioned("images/DCicon.jpg")">DirtyChimp</a>
       @navBar
    </div>
   </div>
</div>
...
@content
</body>
</html>

可以像这样创建其他模板：

@(title: String)

@navBarContent = {
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
  </div>
}
@main(title, navBar = navBarContent) {
  <h1>Page with custom navBar!</h1>
}

我假设第一个模板名为main.scala.html。

视频网站的PlayFramework导航栏

1 个答案: