1

タブ (Twitter ブートストラップ) でhttp://texttextjs.comを使用しようとしています。

これは私のコード例です:

コードペン

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 には「動的な」左パディングと「高さ」があります。しかし、2番目のタブでは、何らかの理由で機能しません。おそらく、目に見えない要素の寸法を決定できないjQueryです。

修正方法は？

4

1 に答える 1

0

はい、それが理由です。ページの読み込み時に2番目のタブが非表示になるため、ブロックは計算されません。

したがって、解決策は、タブを表示するときにプラグインを呼び出すことです。ここでは、タブショーでインスタンス化し、インスタンス化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 に答える