Javascript 如何使用Meteor滑出包_Javascript_User Interface_Mobile_Meteor

Javascript 如何使用Meteor滑出包

javascript user-interface mobile meteor

Javascript 如何使用Meteor滑出包,javascript,user-interface,mobile,meteor,Javascript,User Interface,Mobile,Meteor,我正在尝试使用Chris Wessels的slideout包创建一个基本的meteor项目：。但是，我没有看到任何滑块动画这是我的密码： Javascript: if (Meteor.isClient) { Template.home.rendered = function () { var template = this; var slideout = new Slideout({ 'panel': template.$('.panel').get(0), 'me

我正在尝试使用Chris Wessels的slideout包创建一个基本的meteor项目：。但是，我没有看到任何滑块动画

这是我的密码：

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>


{{>主页}
文件






滑出





芒果




☰
面板

好的，检查以下内容：

您必须将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();
  });
});

这个.find（“#menu”）将在meteor内部等待menu元素，而不仅仅是在DOM上

在模板上，使用此面板：

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

<!-- PUT YOUR APP HERE -->

</main>


☰
面板

这样，您就可以切换菜单。

面板和菜单彼此堆叠，始终可见。切换滑动按钮只会将面板向右移动。