Laravel 中 Twitter Bootstrap 导航的自动活动类

Posted 2023-04-13

【中文标题】Laravel 中 Twitter Bootstrap 导航的自动活动类

【英文标题】：Automatic Active Class For Twitter Bootstrap Navigation in Laravel

【发布时间】：2013-06-20 10:54:04

【问题描述】：

像大多数人一样，我正在为我目前在 Laravel 开发的网站使用 Twitter Bootstrap。到目前为止，我很喜欢将 Laravel 用作与 Rails 等效的 php，但我想知道是否有更好的方法来制作导航栏。我正在尝试确保我的导航栏li 标签自动获取活动类，所以我有这个：

<ul class="nav nav-pills">
@if(URL::current() . "/" == URL::route('home'))
    <li class="active">
@else
    <li>
@endif
    <a href=" route('home') ">Home</a>
</li>
@if(URL::current() == URL::route('about'))
    <li class="active">
@else
    <li>
@endif
    <a href=" route('about') ">About</a>
</li>
</ul>

暂时还好。但是当我有菜单和更多导航时，调试和处理起来会很糟糕。

有什么类似于 Laravel 的 Gem Tabulous 或者在 Laravel 中处理导航的更好方法吗？

【参考方案1】：

我用这个：

<li class="Request::path() == 'home' ? 'active' : '';">
  <a href="/home"><i class="fa fa-home"></i>Home</a>
</li>

【参考方案2】：

看看Bootstrapper 包，它有很多工具可以帮助你使用 Twitter Bootstrap。在您的示例中，您可以像这样构建导航：

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
    )
));

还有速记法，不那么啰嗦，我不是特别喜欢，但是可以用：

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about')),
    ))
);

请务必注意，在这两个示例中，Bootstrapper 会自动处理 active 类，将当前请求 URL 与传递给项目的 URL 进行比较。但是，如果您希望为此应用指定不同的条件，只需传递一个 active 值或数组中的第三个值，用于更短的方法。示例：

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
        'active' => true,
    )
));

或

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about'), true),
    ))
);

【讨论】：

他们的文档有点过时了，但除此之外它工作得很好！非常感谢

它，看到这么棒的项目和过时的文档让我很难过。尽管如此，他们似乎正在努力从头开始重建它，我们可能很快就会看到一些很酷的东西。

为他们编写新文档很诱人。只有一些小事情，比如构造函数不同。我花了很长时间试图让导航栏正常工作，因为他们的文档说你应该将类型作为第一个参数传递，而实际上它需要一个数组。

【参考方案3】：

我发现了一个小 sn-p 可以帮助解决这个问题。希望这可以帮助下一个搜索这个的人。 http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/

【参考方案4】：

我为此任务创建了一个简单的助手。我将它保存为 /app/helpers/Menu.php。然后在 /app/start/global.php 我将我的帮助文件添加到 ClassLoader::addDirectories 数组中，如下所示：_app_path().'/helpers',（如果未加载类，请尝试在控制台，更多关于添加助手的信息here)

class Menu 
 public static function item($route, $label='', $class='', $params=array()) 
    $class .= (Route::getCurrentRoute()->getAction()['as']==$route) ? ' active' : '';
    $tag = $class ? '<li class="'.trim($class).'">' : '<li>';
    return $tag.html::link(URL::route($route, $params),$label).'</li>'; 
  

在你看来。只需提供路线名称，它将创建一个内部带有链接的 LI 元素，将“活动”类添加到 LI 元素中。您还可以使用第三个参数添加自定义类。

<ul class="menu">
   Menu::item('index','Home') 
   Menu::item('pages.about','About Us') 
   Menu::item('pages.contact','Get In Touch','last') 
   Menu::item('profile-user','Profile','',array('username' => Auth::user()->username)) 
</ul>

【讨论】：

如果我需要将另一个参数作为数组传递怎么办？例如，查看用户个人资料的链接。我拥有的原始工作链接是：<li><a href=" URL::route('profile-user', array('username' => Auth::user()->username)) ">Profile</a></li> 在这种情况下，我得到一个致命异常错误（E_PARSE）：_syntax 错误，意外'）'，期待'，'或';' _

是的，现在可以了！我这样使用它： Menu::item('profile-user', 'Profile', 'active',array('username' => Auth::user()->username))

我意识到我必须将类保存为Menu.php（第一个字母为大写），否则上传到服务器时会出现类未找到的错误。

如果你想在某个菜单链接中添加引导字形图标，你应该使用html_entity_decode()函数如下： html_entity_decode(Menu::item('account-sign-in','<span class="glyphicon glyphicon-log-in"></span> Log out'))

【参考方案5】：

对于阅读本文并使用 Laravel 5.4 的任何人：

<li class="Request::path() == 'home' ? 'active' : '';">

需要变成（去掉结尾；）：

<li class="Request::path() == 'home' ? 'active' : ''">

【参考方案6】：

如果您不介意该解决方案是基于 jQuery 的，那么您可以尝试以下方法：

$('#mainmenu li').removeClass('active');
$('#mainmenu li a[href="'+document.location.href+'"]').parents('li').addClass('active');

其中mainmenu 是您的导航栏或任何其他包含li 项目的元素的ID。

【参考方案7】：

这是我用的：

<li class=" Request::is('/') ? 'active' : '' "><a href="/">Home</a></li>
<li class=" Request::is('about') ? 'active' : '' "><a href="/about">About</a></li>
<li class=" Request::is('contact') ? 'active' : '' "><a href="/contact">Contact</a></li>

【参考方案8】：

另一个有用的库可能在这里https://code.google.com/p/bootstrap-php/source/browse/#svn%2Ftrunk%2FNavbar 不复杂，但很容易使用

$oNavbar      = new Bootstrap_Navbar_Handler(array('class' => 'nav-pills'));
$oNavbar->addEntry('Home', array('href' => '/pageurlHome'));
$oNavbar->addEntry('About', array('href' => '/pageurlAbout'));

$oNavbar->setAutoActive(true);
echo $oNavbar->display();

这会生成：

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav-pills nav">
        <li class="active"><a href="/pageurlHome" class="">Home</a></li>
        <li><a href="/pageurlAbout" class="">About</a></li>
      </ul>
    </div>
  </div>
</div>

通过使用

$oNavbar->setAutoActive();

类自动激活对应的入口

【讨论】：

请注意，link-only answers are discouraged，SO 答案应该是搜索解决方案的终点（相对于另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。

【参考方案9】：

不是 Laravel 解决方案，而是我今天写的一个简单的客户端 javascript 解决方案：

https://github.com/davidmars/bootstrapNavActive

<!--include our little script-->
<script src="https://cdn.rawgit.com/davidmars/bootstrapNavActive/master/BootstrapNavActive.min.js"></script>

<!--initialize the nav element-->
<script>
$( document ).ready(
function()
    var $mySmartNav=$("#mySmartNav");
    new BootstrapNavActive($mySmartNav);
  
);
</script>

欢迎改进代码 ;)

【参考方案10】：

我用这个很好用

<li class=" Request::is('blogs*') ? 'active' : '' ">
   <a href=" route('blogs.create') ">Create</a>
</li>