CodeMirrorタブとJQueryタブ

jqueryタブとcodemerrorに問題があります。ここでいくつかの検索を行うことで、タブの読み込み時にcodemirror refreshメソッドを呼び出すことをお勧めしましたが、その領域をクリックしない限り、隠れたままです。添付サンプルHTMLとスクリプトですCodeMirrorタブとJQueryタブ

アイデア？

<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>

出典

2012-05-10 user1252791

これは古いですが、ここに行く...

//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-09 06:08:44 mattdlockyer

-1

私はreacently私の検索を行い、このことができます...

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

出典

2017-03-18 12:51:39

CodeMirrorタブとJQueryタブ

答えて

関連する問題