Jquery textextjs на вкладках Twitter загрузчик не работает должным образом

Question

Я пытаюсь использовать http://textextjs.com/ на вкладках (Twitter начальной загрузки).

Это мой пример кода:

codepen

Содержимое вкладки HTML:

<!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            Tab content 1
            <br>
            <textarea id="textarea1" rel="textext" rows="1"></textarea>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            Tab content 2
            <br>
            <textarea id="textarea2" rel="textext" rows="1"></textarea>
        </div>

CSS:

.wrapper {
    width: 500px;
    margin: 30px auto;
}

.tab-content {
    padding: 20px 0;
}

JS:

$('textarea[rel="textext"]').textext({
    plugins : 'tags',
    tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
});

Как я вижу, во вкладке 1 есть "динамические" отступы слева и "высота". Но на второй вкладке, он не работает на моем по любой причине. Может быть, jQuery, который не может определить размеры невидимых элементов.

Как это исправить?

Answer 1

Да, причина в том, что при загрузке страницы ваша вторая вкладка скрыта, поэтому ваш блок не вычисляется.

Таким образом, решение заключается в том, чтобы вызвать ваш плагин именно тогда, когда вы показываете свою вкладку. Здесь решение, где я создаю экземпляр textext() на вкладке шоу и я храню экземпляры вкладок, чтобы избежать многократного вызова.

$('textarea[rel="textext"]').first().textext({
        plugins : 'tags',
        tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
});

//Array who contain id of computed tabs
var tabComputed = ["#home"];

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  //Get tabs target id and check if he's already computed
  var target = $(e.target).attr("href");

  if(tabComputed.indexOf(target)==-1)
  {
     $(target).find("textarea").textext({
        plugins : 'tags',
        tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
     });
     tabComputed.push(target);
  }
});

$('textarea[rel="textext"]').first().textext({
  plugins : 'tags',
  tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
});


var tabComputed = ["#home"];

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  
  var target = $(e.target).attr("href");
  if(tabComputed.indexOf(target)==-1)
  {
     $(target).find("textarea").textext({
  plugins : 'tags',
    tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ]
     });
     tabComputed.push(target);
  }
});

.wrapper {
 width: 500px;
 margin: 30px auto;
}

.tab-content {
 padding: 20px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-textext/1.3.0/jquery.textext.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active" role="presentation">
            <a aria-controls="home" data-toggle="tab" href="#home" role="tab">
                Tab 1
            </a>
        </li>
        <li role="presentation">
            <a aria-controls="profile" data-toggle="tab" href="#profile" role="tab">
                Tab 2
            </a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            Tab content 1
      <br>
      <textarea id="textarea1" rel="textext" rows="1"></textarea>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            Tab content 2
      <br>
      <textarea id="textarea2" rel="textext" rows="1"></textarea>
        </div>
    </div>
</div>