1

我尝试在选项卡上使用http://textextjs.com（Twitter 引导程序）。

这是我的代码示例：

密码笔

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 无法确定不可见元素的尺寸。

如何解决？

4

1 回答 1

0

是的，这就是原因，在加载页面时，您的第二个选项卡被隐藏，因此不会计算您的块。

所以解决方案是在你显示你的标签时调用你的插件。这是我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>

于 2016-12-02T10:00:57.990 回答