Материализация навигационной панели не работает в Meteor

У меня есть проект Meteor, в котором я играю с фреймворком Materialize. Я установил iron:router, materialize:materialize, cfs:standard-packages и cfs:gridfs.

Однако я столкнулся с тем, что панель навигации работает неправильно. Я следил за документацией на http://materializecss.com, но безуспешно. Мой код и рекомендуемый код ниже.

<template name="nav">

<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

            <!-- Dropdown Structure -->
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
            </ul>
        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>

It is recommended to use the following code to initialize the navbar collapse functionality (this comes from the materialize docs)

$(".button-collapse").sideNav();

Я пробовал это, и это не работает.

Кроме того, если вы посмотрите на мой код навигационной панели ниже, включен раскрывающийся список. Однако при использовании рекомендуемого кода в документации по материализации раскрывающийся список не будет работать. Рекомендуемый код ниже.

$(".dropdown-button").dropdown();

Код jQuery, который я включил для своего раскрывающегося списка, также взят из документации по материализации, но все еще не работает. И это следует соглашению выше, но с несколькими установленными параметрами.

$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false, // Displays dropdown below the button
  alignment: 'left' // Displays dropdown with edge aligned to the left of button
}

);


javascript jquery meteor materialize
person user3299029    schedule 24.12.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я использую этот код...

Template.navbar.onRendered(function(){ $(".sidenav-icon").sideNav({ closeOnClick: true }); // http://materializecss.com/side-nav.html });

Замените панель навигации именем вашего шаблона. Вы вызываете .sideNav() перед визуализацией шаблона. Чтобы проверить это, работает ваш хак. Вызов функции sideNav на консоли разработчика после показа шаблона — еще один способ.

person ericvrp    schedule 24.12.2015

arrow_upward
0
arrow_downward

После долгих поисков и размышлений я нашел исправление. Я думаю. Однако это работает. :)

После всех этих поисков и размышлений мне пришло в голову просто привязать кнопки/ссылки к шаблону с помощью Meteor.templateName.events. Ниже приведен код, который я добавил в core.js (это файл, который я использую для всего кода javascript для основных файлов. (_head.html, _footer.html, home.html, _nav.html)

Template.nav.events({
'click .button-collapse': function(event){
    $('.button-collapse').sideNav();
},
'click .dropdown-button': function(event){
    $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        constrain_width: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left' // Displays dropdown with edge aligned to the left of button
        }
    );
}

});

Как видите, я использовал рекомендуемый код jQuery, но обернул его событием «щелчок» Meteor. Как я уже сказал, это работает, хотя для достижения полной функциональности требуется пара секунд. Я полагаю, что это связано со временем загрузки или что-то в этом роде. Я знаю, что есть исправление для этого, но я еще не уверен, что это такое. :)

person user3299029    schedule 24.12.2015