Timeline.js перерывы twitter bootstrap tabs

Загрузка виджета timeline.js внутри вкладки navst bootstrap, разбивает вкладку навигации.Timeline.js перерывы twitter bootstrap tabs

В приведенном ниже коде комментарии createStoryJS(config) и вкладки работают нормально.

Не комментируйте -> временная шкала загружается правильно, но переходы на навигацию табуляции. При нажатии на вкладку TypeError: $(..).tab() не является функцией ошибки в Firefox (то же самое в хроме).

Я подозреваю, что у меня есть ошибка, но у меня может отсутствовать опция.

Код:

<!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

Ok я нашел обходной путь, который, кажется, работает.

Вместо того, чтобы сделать это:

$(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

ответ

Смежные вопросы