文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Meteor Slideout软件包

问如何使用Meteor Slideout软件包
EN

Stack Overflow用户

提问于 2015-06-03 03:05:30

回答 1查看 809关注 0票数 1

我正在尝试创建一个基本的流星项目，使用Chris的幻灯片包：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>

meteor

javascript

user-interface

mobile

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-08 13:11:21

好的，看看这个：

必须将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(‘#菜单’)将在流星中等待菜单元素，而不仅仅是在DOM上。

在模板上使用此面板：

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

<!-- PUT YOUR APP HERE -->

</main>

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30610145

复制

相似问题

问如何使用Meteor Slideout软件包
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Meteor Slideout软件包EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Meteor Slideout软件包
EN