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包

1 个答案: