Timeline.js中止twitter引导程序标签

在twitter引导程序导航程序标签中加载timeline.js部件，打破了标签式导航。Timeline.js中止twitter引导程序标签

在下面的代码中，注释掉createStoryJS(config)和标签工作正常。

不要评论 - >时间轴正确加载，但标签导航中断。点击一个标签给出TypeError: $(..).tab()不是Firefox中的函数错误（与chrome相同）。

我怀疑有一个bug，但我可能在某处丢失了一个选项。

代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
    <meta content="utf-8" http-equiv="encoding"> 

    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet"> 
    <script src="assets/jquery.min.js"></script> 
    <script src="assets/timeline/js/storyjs-embed.js"></script> 
    <script src="assets/bootstrap/js/bootstrap.min.js"></script> 

    <script> 
     $(document).ready(function() { 
      $('#tabbar').tab(); 
      $('#tabbar a').click(function (e) { 
       e.preventDefault(); 
       $(this).tab('show'); 
      }) 

      data = 
      { 
       "timeline": 
       { 
        "headline":"The Main Timeline Headline Goes here", 
        "type":"default", 
        "text":"<p>Intro body text goes here, some HTML is ok</p>", 
        "asset": { 
         "media":"http://yourdomain_or_socialmedialink_goes_here.jpg", 
         "credit":"Credit Name Goes Here", 
         "caption":"Caption text goes here" 
        }, 
        "date": [ 
        { 
         "startDate":"2011,12,10", 
         "endDate":"2011,12,11", 
         "headline":"Headline Goes Here", 
         "text":"<p>Body text goes here, some HTML is OK</p>", 
         "tag":"This is Optional", 
         "classname":"optionaluniqueclassnamecanbeaddedhere", 
         "asset": { 
          "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", 
          "thumbnail":"optional-32x32px.jpg", 
          "credit":"Credit Name Goes Here", 
          "caption":"Caption text goes here" 
         } 
        } 
        ], 
        "era": [ 
        { 
         "startDate":"2011,12,10", 
         "endDate":"2011,12,11", 
         "headline":"Headline Goes Here", 
         "text":"<p>Body text goes here, some HTML is OK</p>", 
         "tag":"This is Optional" 
        } 

        ] 
       } 
      }; 

      var config = { 
       type:  'timeline', 
       width:  '800', 
       height:  '600', 
       source:  data, 
       embed_id: 'my-timeline' 
      }; 

      createStoryJS(config); 
     }); 

    </script> 

    <title></title> 

</head> 
<body> 
    <div class="container"> 
     <ul class="nav nav-tabs" id="tabbar"> 
      <li class="active"><a href="#entities">Entities</a></li> 
      <li><a href="#topics">Topics</a></li> 
     </ul> 

     <div class="tab-content"> 

      <div class="tab-pane active" id="entities"> 

       <div class="row-fluid"> 
        1 
        <div id="my-timeline"></div> 
       </div> 
      </div> 

      <div class="tab-pane" id="topics"> 
       <div class="row-fluid"> 
        2 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 
</body> 
</html>

来源

2013-07-15 dgorissen

Github问题在这里创建：https：//github.com/VeriteCo/TimelineJS/issues/454 – dgorissen

好，我找到了一个解决办法，这似乎工作。

而不是做这个的：

$(this).tab('show');

手工做的onclick处理的开关。

//the previously active tab 
var prev = $('#tabbar .active a').attr("href"); 

//the tab we want to activate 
var target = $(e.target).attr('href'); 

//deactivate the current tab 
var p = $('#tabbar a[href="' + prev + '"]') 
p.parent().removeClass('active'); 

//activate the new one   
var n = $('#tabbar a[href="' + target + '"]'); 
n.parent().addClass('active'); 

//display the new one 
$(prev).hide(); 
$(target).show();

虽然根本原因的修复会更好。

来源

2013-07-31 08:52:34 dgorissen

Timeline.js中止twitter引导程序标签

回答

相关问题