Автоматичний активний клас для навігації в Bootstrap Twitter у Laravel

Як і більшість людей, я використовую Twitter Bootstrap для сайту, який я зараз розробляю в Laravel. До сих пір я користуюся використанням Laravel як PHP, еквівалентного Rails, але мені цікаво, чи є кращий спосіб зробити панелі навігації. Я намагаюсь переконатися, що теги li на панелі навігації автоматично отримують активний клас, так що я маю це:


Це буде добре, поки що. Але коли у мене є меню та більше навігації, це, нарешті, буде жахливим для налагодження та вирішення проблеми.

Чи є щось подібне до Gem Tabulous для Laravel або загалом приємніший спосіб полегшити навігацію в Laravel?

4

10 Відповіді

Я використовую це:

  • Home
  •  
    
    19
    додано
    Працює! Дякую: Д.
    додано Автор hfingler, джерело
    Дякую за це!
    додано Автор afaolek, джерело
    Чудова людина! це найкоротший шлях, який я коли-небудь бачив!
    додано Автор smartrahat, джерело

    Погляньте на пакет 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 автоматично активує , , порівнюючи поточну 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),
        ))
    );
    
    9
    додано
    Це засмучує мене побачити такий чудовий проект із застарілою документацією. Тим не менш, здається, вони працюють над його перебудовою, і найближчим часом ми можемо побачити щось классне.
    додано Автор rmobis, джерело
    Їх документ трохи застарілий, але інакше він ідеально працює! Спасибі багато
    додано Автор DrugCrazed, джерело
    Заманливо пропонувати написати нові документи для них. Є лише незначні речі, такі як конструктори, які відрізняються. Я провів століття, намагаючись отримати роботу навігатора, тому що їх документи говорять, що ви повинні передавати цей тип як перший аргумент, коли насправді очікується масив.
    додано Автор DrugCrazed, джерело

    I found a small snippet which helps with this issue. Hopefully this helps the next persons who search for this. http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/

    5
    додано

    Я створив простого помічника для цього завдання. Я зберігав його як /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 ? '
  • ' : '
    • '; return $tag.HTML::link(URL::route($route, $params),$label).'
    • '; } }

      На ваш погляд просто введіть назву маршруту, і він створить елемент LI з посиланням усередині, клас "активний" буде додано до елемента LI. Ви також можете додати спеціальні класи за допомогою третього параметра.

  • 2
    додано
    Я щойно оновив приклад. Подивіться, чи це працює для вас.
    додано Автор Arne, джерело
    Що робити, якщо мені потрібно передавати ще один параметр як масив? Наприклад, посилання, щоб побачити профіль користувача. Початкова робоча посилання у мене є:
  • Профіль
  • У цьому випадку я отримую помилку Fatal Exception (E_PARSE): _syntax error, unexpected ')', expecting ',' або ';' _
    додано Автор Pathros, джерело
    Так, тепер це працює! Я використовую його таким чином: {{Menu :: item ('profile-user', 'Profile', 'active', array ('username' => Auth :: user() -> username)}}}
    додано Автор Pathros, джерело
    Я зрозумів, що мені довелося зберегти клас як Menu.php (з першою буквою в якості верхнього регістру), інакше при завантаженні на сервер з'являється помилка, така як клас не знайдено.
    додано Автор Pathros, джерело
    У випадку, якщо ви хочете додати блакитний початковий початок у певному меню, ви повинні використовувати функцію html_entity_decode() наступним чином: {{html_entity_decode (Menu :: item ('account-sign- в ',' Вийти)})}}
    додано Автор Pathros, джерело

    Це те, що я використовую:

  • Home
  • 
    
  • About
  • 
    
  • Contact
  • 
    
    
    1
    додано

    Якщо ви не проти, що рішення на основі jQuery, то ви можете спробувати щось на кшталт:

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

    де mainmenu - це ідентифікатор вашого навігаційного або будь-якого іншого елемента, який містить елементи li .

    1
    додано

    Не рішення 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>
    

    Удосконалення коду бажано;)

    0
    додано

    Ще одна корисна бібліотека може бути тут: 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">
          
        </div>
      </div>
    </div>
    

    з допомогою

    $oNavbar->setAutoActive();
    

    клас автоматично активує відповідну запис

    0
    додано
    Зверніть увагу, що відповіді на посилання тільки не рекомендуються , так що відповіді повинні бути кінцевою точкою пошуку для рішення (або ще одне зупинення посилань, які з часом стають застарілими). Будь ласка, розгляньте можливість додати автономний огляд тут, зберігаючи посилання як посилання.
    додано Автор kleopatra, джерело

    Я використав цей режим добре

  • Create
  •  
    
    0
    додано

    Для когось читає цей хто на Ларавелі 5.4:

  • Потрібно стати (витягнути закінчення;):

  • 0
    додано
    Це ті самі лінії ...
    додано Автор CJ Burkey, джерело
    Ukrainian PHP comunity
    Ukrainian PHP comunity
    885 учасників

    dev-ua/php