为 android 编译 meteor 应用程序时,materialize navbar 的行为被破坏
Behaviour of materialize navbar is broken when meteor app is compiled for android
我目前正尝试在 meteor 网站上制作一个 material 设计版的简单待办事项教程应用程序。但是,当为 android 编译应用程序时,我遇到了一个问题,即让导航栏按钮在触摸时实际执行任何操作。问题的 gif - http://i.imgur.com/vRMhIfy.gif
HTML 片段:
<header class="fixed-navbar">
<nav class="light-blue" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Simple Tasks</a>
<ul class="left hamburger">
<li><a href="#" class="categories hide-on-large-only" data-activates="mobile-demo"><i
class="mdi-navigation-menu"></i></a></li>
</ul>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu</a></li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Account</a></li>
<li><a href="#!">Settings</a></li>
<li class="divider"></li>
<li><a href="#!">About</a></li>
</ul>
</div>
</nav>
</header>
<div class="side-nav fixed" id="mobile-demo" style=" min-height: 100%;">
<div class="sidebar">
<ul>
<li><a href="">All Tasks</a></li>
<li><a href="">Unsorted</a></li>
<li><a href="">Placeholder</a></li>
<li><a href="">Another Placeholder</a></li>
</ul>
</div>
</div>
相关Javascript:
if (Meteor.isClient) {
$( document ).ready(function(){
console.log("Document ready!");
$(".categories").sideNav();
});
}
materialize css 和 javascript 通过使用最新版本 material 的 this package 的分支版本包含在应用程序项目中ize(alpha 版本 v0.96.1)
感谢任何帮助!
这很可能是由代码中的 javascript 错误引起的。
通常在开发模式下,您的文件不会串联在一起,因此如果您遇到错误,它不会阻止您应用程序的任何其他部分运行。
这在生产模式上是不同的。如果你有一个单独的 js 异常 none,其余代码将 运行。这可能就是为什么 JS 没有 运行 设置侧边导航点击事件的原因。
要修复此问题,请在开发模式下使用 javascript 控制台加载您的应用程序,找到 JS 错误并修复它。执行此操作后,它应该可以在生产模式下正常工作。
此外,最好在模板的 onrendered 回调中 运行 $(".categories").sideNav();
,尽管这可能不是您的问题:
Template.xxxx.onRendered(function() {
$(".categories").sideNav();
});
其中 xxxx
是包含您的 .categories 导航栏的模板。
我目前正尝试在 meteor 网站上制作一个 material 设计版的简单待办事项教程应用程序。但是,当为 android 编译应用程序时,我遇到了一个问题,即让导航栏按钮在触摸时实际执行任何操作。问题的 gif - http://i.imgur.com/vRMhIfy.gif
HTML 片段:
<header class="fixed-navbar">
<nav class="light-blue" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Simple Tasks</a>
<ul class="left hamburger">
<li><a href="#" class="categories hide-on-large-only" data-activates="mobile-demo"><i
class="mdi-navigation-menu"></i></a></li>
</ul>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu</a></li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Account</a></li>
<li><a href="#!">Settings</a></li>
<li class="divider"></li>
<li><a href="#!">About</a></li>
</ul>
</div>
</nav>
</header>
<div class="side-nav fixed" id="mobile-demo" style=" min-height: 100%;">
<div class="sidebar">
<ul>
<li><a href="">All Tasks</a></li>
<li><a href="">Unsorted</a></li>
<li><a href="">Placeholder</a></li>
<li><a href="">Another Placeholder</a></li>
</ul>
</div>
</div>
相关Javascript:
if (Meteor.isClient) {
$( document ).ready(function(){
console.log("Document ready!");
$(".categories").sideNav();
});
}
materialize css 和 javascript 通过使用最新版本 material 的 this package 的分支版本包含在应用程序项目中ize(alpha 版本 v0.96.1)
感谢任何帮助!
这很可能是由代码中的 javascript 错误引起的。
通常在开发模式下,您的文件不会串联在一起,因此如果您遇到错误,它不会阻止您应用程序的任何其他部分运行。
这在生产模式上是不同的。如果你有一个单独的 js 异常 none,其余代码将 运行。这可能就是为什么 JS 没有 运行 设置侧边导航点击事件的原因。
要修复此问题,请在开发模式下使用 javascript 控制台加载您的应用程序,找到 JS 错误并修复它。执行此操作后,它应该可以在生产模式下正常工作。
此外,最好在模板的 onrendered 回调中 运行 $(".categories").sideNav();
,尽管这可能不是您的问题:
Template.xxxx.onRendered(function() {
$(".categories").sideNav();
});
其中 xxxx
是包含您的 .categories 导航栏的模板。