Question

我遇到了jquery选项卡和codemirror的问题。通过在这里进行一些搜索，建议我在加载选项卡时调用codemirror刷新方法，但除非我点击它仍保持隐藏的区域。附件是样本html和脚本

有什么想法吗？

 <script type="text/javascript">
          var editorCss;
          var htmlCss;
          $(function () {
              $("#tabs").tabs();

              var $tabs = $("#tabs").tabs({
                  select: function (e, ui) {
                      var thistab = ui;
                      runMethod(thistab.index);
                  }
              });       

              $('#code0').val('//test 0');
              $('#code1').val('//test 1');
              $('#code2').val('//test 2');

                  editorCss = CodeMirror.fromTextArea(document.getElementById("code1"), {});
                  htmlCss = CodeMirror.fromTextArea(document.getElementById("code2"), {});
          });


          function runMethod(tabindex) {
              switch (tabindex) {
                  case 1:
                      editorCss.refresh();
                      break;
                  case 2:
                      htmlCss.refresh();

                      break;
              }
          } 
    </script>



<body>
    <h1>CodeMirror: CSS mode</h1>
    <div id="tabs">
    <ul>
        <li><a href="#tabs-0">General</a></li>
        <li><a href="#tabs-1">Html</a></li>
        <li><a href="#tabs-2">CSS</a></li>

    </ul>
        <div id="tabs-0">
            <textarea id="code0" name="code0" rows="10" cols="10"></textarea>
        </div>
        <div id="tabs-1">
         <textarea id="code1" name="code1" rows="10" cols="10"></textarea>

        </div>
        <div id="tabs-2">
          <textarea id="code2" name="code2" rows="10" cols="10">hello 2</textarea>
        </div>
    </div>
  </body>

Answer 1

这已经过时但是你去了......

//Refresh editor when tab opens, syntax highlighter
    tabs.tabs({
        show: function(event, ui) {
            $('.processingide').each( function(i) {
                editor[i].refresh();
            });
        }
    });

可以在此处看到实时示例：http://mattlockyer.com/multimediaprogramming/

Answer 2

我重新搜索了我的搜索，这有助于......

$('.nav-tabs a').on('shown.bs.tab', function(e) {
    $('.CodeMirror').each(function(i, el){
        el.CodeMirror.refresh();
    });
});

CodeMirror和JQuery选项卡

2 个答案: