如何使用 Meteor Slideout 包

Question

我正在尝试使用 Chris Wessels 的滑出包创建一个基本的流星项目：https://github.com/chriswessels/meteor-slideout/。但是我没有看到任何滑块动画。

这是我的代码：

Javascript:

if (Meteor.isClient) {
  Template.home.rendered = function () {
  var template = this;
  var slideout = new Slideout({
    'panel': template.$('.panel').get(0),
    'menu': template.$('.menu').get(0),
    'padding': 256,
    'tolerance': 70
  });
}
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

HTML:

<body>
  {{> home}}
</body>



<template name="home">
<nav id="menu" class="menu slideout-menu">
      <a href="https://github.com/mango/slideout" target="_blank">
        <header class="menu-header">
          <span class="menu-header-title">View on Github</span>
        </header>
      </a>

      <section class="menu-section">
        <h3 class="menu-section-title">Docs</h3>
        <ul class="menu-section-list">
          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
        </ul>
      </section>

      <section class="menu-section">
        <h3 class="menu-section-title">Slideout</h3>
        <ul class="menu-section-list">
          <li><a href="https://github.com/mango/slideout" target="_blank">Fork it</a></li>
          <li><a href="https://github.com/mango/slideout/issues/new" target="_blank">Create an issue</a></li>
          <li><a href="https://github.com/mango/slideout/releases/">Download</a></li>
        </ul>
      </section>

      <section class="menu-section">
        <h3 class="menu-section-title">Mango</h3>
        <ul class="menu-section-list">
          <li><a href="https://getmango.com" target="_blank">About Mango</a></li>
          <li><a href="https://twitter.com/getmango" target="_blank">Follow Us</a></li>
        </ul>
      </section>
    </nav>

    <main id="panel">
      <header>
        <button>☰</button>
        <h2>Panel</h2>
      </header>
    </main>
</template>

Answer 1

好的，看看这个：

您必须将 Slideout.js 样式添加到您的 css

然后，使用这个 onRendered 函数：

Template.home.onRendered(function () {
  var template = this;
  var menu = this.find('#menu');
  var panel = this.find('#panel');
  var slideout = new Slideout({
    'panel': panel,
    'menu': menu,
    'padding': 256,
    'tolerance': 70
  });

  // Toggle button
  var togglebtn = this.find('#togglebtn');
  togglebtn.addEventListener('click', function() {
    slideout.toggle();
  });
});

this.find('#menu') 不仅会在 DOM.

上等待 meteor 的菜单元素 INSIDE

在模板上使用此面板：

<main id="panel">
  <header>
    <button id="togglebtn">☰</button>
    <h2>Panel</h2>
  </header>

<!-- PUT YOUR APP HERE -->

</main>

这样你就可以切换菜单了。

如何使用 Meteor Slideout 包

How to use Meteor Slideout package

javascript

mobile

user-interface

meteor