Question

Meteor.js和Materialize 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();
  }

选项卡指示器有效，但不会更改指向正确页面的链接。它就像它阻止了去页面的能力。我需要帮助才能做到这一点，我已经有一段时间了。感谢。

Answer 1

另一次更新，如果您不想定义每个标签，可以执行类似的操作

<强>的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>

Answer 2

如果你可以在没有<?php $limit = 4; $countSql = "SELECT COUNT(book_id) FROM books"; $tot_result = mysqli_query($conn, $countSql); $row = mysqli_fetch_row($tot_result); $total_records = $row[0]; $total_pages = ceil($total_records / $limit); if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }; $start_from = ($page-1) * $limit; $sql = "SELECT * FROM books ORDER BY book_id DESC LIMIT $start_from, $limit"; $rs_result = mysqli_query($conn, $sql); $i = 0; echo '<div id="yourwrapper">'; while ($row = mysqli_fetch_assoc($rs_result)) { if($i %4 == 0){echo '</div><div id="yourwrapper">';} $book_titlel=$row['book_titlel']; $book_titlel=sanitize($book_titlel); echo "<div class='grid_2 col-md_4'><div class='box_9'><div class='img-wrap'><a href='book/".$book_titlel."/".$row['book_id']."'><img alt='".$row['book_title']."' data-src='images/books/".$row['book_picture'].".jpg' src='images/preloader.gif'></a></div><div class='caption'><div class='rating-bar'><div class='rating' style='width: 50%'></div></div><h3 class='text_5 color_1'><a href='book/".$book_titlel."/".$row['book_id']."'>".$row['book_title']."</a></h3><p class='text_6 color_3'><a href='book/".$book_titlel."/".$row['book_id']."'>".$row['book_author']."</a></p></div></div></div>"; $i++; }; echo '</div>'; ?>的情况下渲染标签，这可能很有用。

让我们说这些是您想要根据标签点击呈现内容的模板：

Router

现在在你的渲染区域：

<template name="page1">
.....
</template>

<template name="page2">
.....
</template>

<template name="page3">
.....
</template>

最后在你的javascript文件中：

<template name="display">
    {{>tabs}}
    {{#if activeTab 'nt1'}}
        {{>page1}}
    {{/if}}

    {{#if activeTab 'nt2'}}
        {{>page2}}
    {{/if}}

    {{#if activeTab 'nt3'}}
        {{>page3}}
    {{/if}}
</template>

Answer 3

尝试'Template.tabs.onRendered（function（）{'而不是'Template.tabs.rendered = function（）{'

最后，您的标签初始化应如下所示：

    Template.tabs.onRendered(function(){
      $("ul.tabs").tabs();
    });

如何在Meteor中使用Materialize css Tabs？

3 个答案: