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引導程序標籤

回答

相關問題