3

我的 jquery 选项卡和 codemirror 有问题。通过在此处进行一些搜索，建议我在加载选项卡时调用 codemirror refresh 方法，但除非我单击该区域，否则它仍处于隐藏状态。附件是示例 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>
4

2 回答 2

0

这是旧的，但你去......

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

现场示例可以在这里看到：http: //mattlockyer.com/multimediaprogramming/

于 2013-04-09T06:08:44.077 回答
-1

我最近进行了搜索，这有帮助...

$('.nav-tabs a').on('shown.bs.tab', function(e) {
    $('.CodeMirror').each(function(i, el){
        el.CodeMirror.refresh();
    });
});
于 2017-03-18T12:51:39.117 回答