如何使用流星滑出包

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上等待流星的菜單元素INSIDE。

在模板上使用此面板：

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

<!-- PUT YOUR APP HERE -->

</main>

因此您可以切換菜單。

如何使用流星滑出包

問題描述

1 個解決方案

解決方案1
1 已采納 2015-06-08 13:11:21

如何使用流星滑出包

問題描述

1 個解決方案

解決方案1 1 已采納 2015-06-08 13:11:21

解決方案1
1 已采納 2015-06-08 13:11:21