将多级推送菜单集成到Meteor应用程序

我想将我的Meteor.js应用程序中的优秀Multi-Level Push Menu JQuery插件集成到一起。我按照主页上的说明进行操作，似乎已加载。它只是不会正确的风格。我不确定为什么会这样。我想我必须以某种方式打包它，但它不会加载到陨石中。我怎样才能做到这一点？将多级推送菜单集成到Meteor应用程序

编辑：

我正在使用新的0.8版本。我把jquery.multilevelpushmenu.min.js和multilevelpushmenu.css公用文件夹加载它们。

<head> 
    <title>menu-test</title> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="multilevelpushmenu.css" /> 
    <script src="jquery.multilevelpushmenu.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
    <script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script> 
</head> 

<body> 
    {{> menu}} 

    <script> 
    $(document).ready(function(){ 
     $('#menu').multilevelpushmenu(); 
    }); 
</script> 
</body> 

<template name="menu"> 
<div id="menu"> 
    <nav> 
    <h2><i class="fa fa-reorder"></i>All Categories</h2> 
    <ul> 
     <li> 
      <a href="#"><i class="fa fa-laptop"></i>Devices</a> 
      <h2><i class="fa fa-laptop"></i>Devices</h2> 
      <ul> 
       <li> 
        <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a> 
        <h2><i class="fa fa-phone"></i>Mobile Phones</h2> 
        <ul> 
         <li> 
          <a href="#">Super Smart Phone</a> 
         </li> 
         <li> 
          <a href="#">Thin Magic Mobile</a> 
         </li> 
         <li> 
          <a href="#">Performance Crusher</a> 
         </li> 
         <li> 
          <a href="#">Futuristic Experience</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#"><i class="fa fa-desktop"></i>Televisions</a> 
        <h2><i class="fa fa-desktop"></i>Televisions</h2> 
        <ul> 
         <li> 
          <a href="#">Flat Super Screen</a> 
         </li> 
         <li> 
          <a href="#">Gigantic LED</a> 
         </li> 
         <li> 
          <a href="#">Power Eater</a> 
         </li> 
         <li> 
          <a href="#">3D Experience</a> 
         </li> 
         <li> 
          <a href="#">Classic Comfort</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#"><i class="fa fa-camera-retro"></i>Cameras</a> 
        <h2><i class="fa fa-camera-retro"></i>Cameras</h2> 
        <ul> 
         <li> 
          <a href="#">Smart Shot</a> 
         </li> 
         <li> 
          <a href="#">Power Shooter</a> 
         </li> 
         <li> 
          <a href="#">Easy Photo Maker</a> 
         </li> 
         <li> 
          <a href="#">Super Pixel</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"><i class="fa fa-book"></i>Magazines</a> 
      <h2><i class="fa fa-book"></i>Magazines</h2> 
      <ul> 
       <li> 
        <a href="#">National Geographics</a> 
       </li> 
       <li> 
        <a href="#">The Spectator</a> 
       </li> 
       <li> 
        <a href="#">Rambler</a> 
       </li> 
       <li> 
        <a href="#">Physics World</a> 
       </li> 
       <li> 
        <a href="#">The New Scientist</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"><i class="fa fa-shopping-cart"></i>Store</a> 
      <h2><i class="fa fa-shopping-cart"></i>Store</h2> 
      <ul> 
       <li> 
        <a href="#"><i class="fa fa-tags"></i>Clothes</a> 
        <h2><i class="fa fa-tags"></i>Clothes</h2> 
        <ul> 
         <li> 
          <a href="#"><i class="fa fa-female"></i>Women's Clothing</a> 
          <h2><i class="fa fa-female"></i>Women's Clothing</h2> 
          <ul> 
           <li> 
            <a href="#">Tops</a> 
           </li> 
           <li> 
            <a href="#">Dresses</a> 
           </li> 
           <li> 
            <a href="#">Trousers</a> 
           </li> 
           <li> 
            <a href="#">Shoes</a> 
           </li> 
           <li> 
            <a href="#">Sale</a> 
           </li> 
          </ul> 
         </li> 
         <li> 
          <a href="#"><i class="fa fa-male"></i>Men's Clothing</a> 
          <h2><i class="fa fa-male"></i>Men's Clothing</h2> 
          <ul> 
           <li> 
            <a href="#">Shirts</a> 
           </li> 
           <li> 
            <a href="#">Trousers</a> 
           </li> 
           <li> 
            <a href="#">Shoes</a> 
           </li> 
           <li> 
            <a href="#">Sale</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Jewelry</a> 
       </li> 
       <li> 
        <a href="#">Music</a> 
       </li> 
       <li> 
        <a href="#">Grocery</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Collections</a> 
     </li> 
     <li> 
      <a href="#">Credits</a> 
     </li> 
    </ul> 
    </nav> 
</div> 
</template>

来源

2014-03-28 Chromos

它会更容易跟踪，如果你提供一段代码，你有一个明确的解释做了什么你的期望和你得到的。目前，原因可能是缺少文件，程序包，与Spark如何处理jQuery操作有关的错误，或蚂蚁在CPU上跺脚。另外，你有哪些Meteor版本？这很重要，因为目前的0.8.0改变了很多UI相关的东西。 –

我得到它的工作。您必须将css和js文件放入public/client /中。创建package.js文件有它看起来LILE这样的：

Package.describe({ 
     summary: "Push Menu with multiple levels" 
}); 

Package.on_use(function (api, where) { 
     api.add_files('jquery.multilevelpushmenu.css', 'client'); 
     api.add_files('jquery.multilevelpushmenu.min.js', 'client'); 
});

然后你有你的包添加到您的本地smart.json文件。就像这样：

{ 
     "packages": { 
     "bootstrap-3": {}, 
     "multi-level-push-menu": { 
      "path": "public/client/" 
     } 
     } 
}

最后，你必须运行“地铁加上多层次推菜单”

来源

2014-03-31 10:45:04 Chromos

将多级推送菜单集成到Meteor应用程序

回答

相关问题