[英]How to modify CSS or JS file from “materialize:materialize” package in Meteor
[英]How to use Materialize css Tabs in Meteor?
Meteor.js和Materialise CSS Framework的新功能 。 我不完全理解如何動態地將Tabs連接到3個不同的選項卡,因此當用戶單擊它時, .tab indicator
/ active
屬性將與所需的路徑路徑一起滑動。 如果我這樣做:
客戶機/ app.html
<template name="tabs">
<ul class="tabs nav-tabs hide-on-med-and-down">
<li class="tab col s4" id="nt1"><a href="/page1">Page One</a></li>
<li class="tab col s4" id="nt2"><a href="/page2">Page Two</a></li>
<li class="tab col s4" id="nt3"><a href="/page3">Page Three</a></li>
</ul>
</template>
客戶機/ app.js
Template.layout.rendered = function() {
$('ul.tabs').tabs();
}
選項卡指示器有效,但不會更改指向正確頁面的鏈接。 它就像它阻止了去頁面的能力。 我需要幫助才能做到這一點,我已經有一段時間了。 謝謝。
另一個更新,如果您不想定義每個選項卡,您可以執行類似的操作
JS
//Manual Method
/*Template.tabs.rendered = function() {
if(Router.current().route.path() === '/page2'){
$("#nt2 a").addClass('active');
}else if(Router.current().route.path() === '/page3'){
$("#nt3 a").addClass('active');
}
$('ul.tabs').tabs();
}
Template.tabs.events({
'click #nt1': function(){
Router.go('/');
},
'click #nt2': function(){
Router.go('page2');
},
'click #nt3': function(){
Router.go('page3');
}
})*/
//Auto Method
Template.tabs.rendered = function() {
$("#"+Router.current().route.getName()).addClass('active');
$('ul.tabs').tabs();
}
Template.tabs.events({
'click .tabs li': function(e, t){
var href = e.target.id;
Router.go(href);
}
})
路由器
Router.configure({
layoutTemplate: 'layout',
});
Router.route('/', function () {
this.render('page-one');
},{
name: 'page-one'
});
Router.route('/page2', function () {
this.render('page-two');
},{
name: 'page-two'
});
Router.route('/page3', function () {
this.render('page-three');
},{
name: 'page-three'
});
HTML
<template name="layout">
{{> tabs}}
{{> yield}}
</template>
<template name="tabs">
<!--Manual Method-->
<!--<ul class="tabs nav-tabs hide-on-med-and-down">
<li class="tab col s4" id="nt1"><a href="/">Page One</a></li>
<li class="tab col s4" id="nt2"><a href="/page2">Page Two</a></li>
<li class="tab col s4" id="nt3"><a href="/page3">Page Three</a></li>
</ul>-->
<!--Auto Method-->
<ul class="tabs nav-tabs hide-on-med-and-down">
<li class="tab col s4"><a id="page-one" href="/">Page One</a></li>
<li class="tab col s4"><a id="page-two" href="/page2">Page Two</a></li>
<li class="tab col s4"><a id="page-three" href="/page3">Page Three</a></li>
</ul>
</template>
<template name="page-one">
<p>i am page-one</p>
</template>
<template name="page-two">
<p>i am page-two</p>
</template>
<template name="page-three">
<p>i am page-three</p>
</template>
如果您可以在沒有Router
情況下渲染選項卡,這可能很有用。
假設這些是您想要根據標簽點擊呈現內容的模板:
<template name="page1">
.....
</template>
<template name="page2">
.....
</template>
<template name="page3">
.....
</template>
現在在您的渲染區域:
<template name="display">
{{>tabs}}
{{#if activeTab 'nt1'}}
{{>page1}}
{{/if}}
{{#if activeTab 'nt2'}}
{{>page2}}
{{/if}}
{{#if activeTab 'nt3'}}
{{>page3}}
{{/if}}
</template>
最后在你的javascript文件中:
activeTab = new ReactiveVar('nt1'); //Your default tab
Template.display.helpers({
activeTab: function(tab){
return (activeTab.get() == tab);
});
Template.tabs.events({
'click #nt1': function(){
activeTab.set('nt1');
},
'click #nt2': function(){
activeTab.set('nt2');
},
'click #nt3': function(){
activeTab.set('nt3');
}
});
試試'Template.tabs.onRendered(function(){'而不是'Template.tabs.rendered = function(){'
最后,您的選項卡初始化應如下所示:
Template.tabs.onRendered(function(){
$("ul.tabs").tabs();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.