Как и большинство людей, я использую Twitter Bootstrap для сайта, который я сейчас разрабатываю в Laravel. До сих пор мне нравится использовать Laravel в качестве эквивалента PHP Rails, но мне интересно, есть ли лучший способ сделать навигационные панели. Я пытаюсь убедиться, что мои метки navbar 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>
На этот раз все будет хорошо. Но когда у меня есть меню и больше навигаций, это будет выглядеть ужасно, чтобы отлаживать и разбираться.
Есть ли что-то похожее на Gem Tabulous для Laravel или вообще лучший способ справиться с навигацией в Laravel?
Взгляните на пакет 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-адрес запроса с тем, который был передан этому элементу. Если, однако, вы хотите указать другое условие для применения, просто передайте 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), )) );
Я использую это:
<li class="{{Request::path() == 'home' ? 'active' : '';}}"> <a href="/home"><i class="fa fa-home"></i>Home</a> </li>
Я нашел небольшой фрагмент, который помогает в этом вопросе. Надеюсь, это поможет следующим людям, которые это ищут. http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/
Я создал простой помощник для этой задачи. Я сохранил его как /app/helpers/Menu.php . Затем в /app/start/global.php я добавил свой вспомогательный файл в массив ClassLoader::addDirectories следующим образом: _app_path().'/helpers', (если класс не загружен, попробуйте запустить «composer dump-autoload» в консоль, больше информации о добавлении помощников здесь )
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 добавится класс 'active'. Вы также можете добавить пользовательские классы, используя третий параметр.
<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>
Если вы не возражаете, что решение основано на jQuery, вы можете попробовать что-то вроде:
$('#mainmenu li').removeClass('active'); $('#mainmenu li a[href="'+document.location.href+'"]').parents('li').addClass('active');
где mainmenu – это идентификатор вашей навигационной панели или любого другого элемента, который содержит элементы li .
Это то, что я использую:
<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>
Другая полезная библиотека может быть здесь 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();
класс автоматически активирует соответствующую запись
Не решение 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>
Усовершенствования в коде приветствуются;)
Я использовал этот рабочий штраф
<li class="{{ Request::is('blogs*') ? 'active' : '' }}"> <a href="{{ route('blogs.create') }}">Create</a> </li>
Для тех, кто читает это, кто на Laravel 5.4:
<li class="{{Request::path() == 'home' ? 'active' : '';}}">
Нужно стать (вынуть финал;):
<li class="{{Request::path() == 'home' ? 'active' : ''}}">