grails 中的 Twitter Bootstrap 活动导航栏答案

【问题标题】：Twitter Bootstrap active navbar in grailsgrails 中的 Twitter Bootstrap 活动导航栏
【发布时间】：2012-09-11 03:33:45
【问题描述】：

我很难让“活动”类停留在不同的页面上。我通过布局在每个页面上加载了导航栏，这可能是问题吗？

【问题讨论】：

您能发布创建导航栏的代码吗？
对于标签，它很丑，但它可以满足我的需要并且非常简单。这在<li> 中。 <trail:navbarActiveLink current="${controllerName}${actionName}" test="usermanageUsers"/>我真的不知道如何做块代码......网上的一切都在说点击括号按钮，我没有......我使用一个简单的检查。 if(attrs.current == attrs.test) 并跟随 out << 'class="active"'

标签： grails twitter-bootstrap

【解决方案1】：

我只是在我的布局 gsp 中有这个用于创建导航栏，它工作得很好。我只有控制器级别的导航栏中的项目，而不是单个操作。

<li ${controllerName.equals('schedule') ? 'class="active"' : ''}>Schedule</li>

对于Grails生成的默认控制器，可以使用

<li ${controllerName == null ? 'class="active"' : ''}>Home</li>

【讨论】：

谢谢你让它漂亮！我必须掌握（迷你）降价的窍门。
这很好用。但我还有另一个问题。当您将其更改为活动并再次加载 main.gsp 时，有两个活动的 li 元素。你知道如何解决这个问题吗？

【解决方案2】：

是的，这就是问题所在。

每当您重新加载页面时，无论<li> 元素具有class=active，都将再次设置为活动状态。

如果您有 /grails-app/views/layouts/main.gsp 和以下内容：

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="/home">Home</a></li>
      <li><a href="/fred">Fred</a></li>
      <li><a href="/barney">Barney</a></li>
    </ul>
  </div>
</div>

您的 Fred 和 Barney 的 GSP 使用 main.gsp 布局，当您单击它们时，您将加载上面的代码，并且“主页”的链接仍然有效。

解决方案是为 Navbar 控件编写一个 Taglib，或者创建单独的布局页面。

【讨论】：

编写多个布局似乎是一种浪费。 taglib 是否会根据当前页面简单地呈现活动状态？
我同意，如果您要更改的唯一布局内容是活动项目，则多个布局将是多余的。正如您所说，您的标签库将仅呈现 class="active" 或不呈现取决于当前页面。以下是有人在 PHP 中的做法：stackoverflow.com/questions/11813498/…
我制作了taglib，在有经验的程序员眼中可能是一个丑陋的东西。我将它传递给它 ${controllerName}${actionName} 和按钮所代表的控制器/动作并进行简单的 == 检查。