个人中心
gpt4 book ai didi

html - 视频网站的 PlayFramework 导航栏

转载 作者：太空宇宙 更新时间：2023-11-04 10:54:41 25 4
gpt4 key购买 nike

所以我想在我的 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 非常有经验。我想弄清楚如何在您从一个页面导航到另一个页面时使这个导航栏动态化。

最佳答案

您可以像这样编写模板时为导航栏传递附加内容:

@(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。

关于html - 视频网站的 PlayFramework 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34733659/

25 4 0
文章推荐： html - 使用 CSS 将图像定位在以下