引导选项卡：将 NGL 查看器加载到选项卡中

Posted 2023-05-08

【中文标题】引导选项卡：将 NGL 查看器加载到选项卡中

【英文标题】：Bootstrap tabs: load NGL viewer into tab

【发布时间】：2019-03-30 11:43:11

【问题描述】：

我无法在引导选项卡中加载 NGL 查看器。 如果在选项卡之外加载，它可以正常工作。但是，如果我尝试在默认情况下可见的选项卡以外的选项卡中加载它，则它不起作用。 欢迎提出任何建议。

html：

<ul id="myTabs" class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chartcontainer1" aria- 
    controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li role="presentation"><a href="#chartcontainer2" aria- 
  controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="chartcontainer1">
  Some content
  </div>
  <div role="tabpanel" class="tab-pane fade" id="chartcontainer2">
  Some other content
  <span id="showfilename"></span>
  <div id="viewport" style="width:400px; height:300px;"></div>
  </div>
</div>

javascript：

$(document).ready(function() 

$('#myTabs a[href="#chartcontainer2"]').on('click', function(e) 
  e.preventDefault();
  $(this).show()
  addViewer()

  function addViewer () 
var pdbfile = "rcsb://1CRN"
$('#showfilename').html(pdbfile);
var stage = new NGL.Stage("viewport");
stage.loadFile(pdbfile).then(function (component) 
  component.addRepresentation("cartoon");
  component.autoView();
      );
    
);

jsfiddle：working outside jsfiddle：not working (inside tab)

【参考方案1】：

您需要在标签显示时添加查看器。 使用 shown.bs.tab 事件。

我更新了你的小提琴 ;-)

【讨论】：

非常感谢！