选项卡上的 Jquery textextjs twitter bootstrap 无法正常工作

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>