how2j.cn

"); window.frames["iframe_toc"+sid].document.write(decodeHtml($("pre#stepCodePre"+sid).html())); window.frames["iframe_toc"+sid].document.close(); $(window.frames["iframe_toc"+sid]).load(function(){ $("#iframe_toc"+sid).height($("#iframe_toc"+sid).contents().find("body").height()+(showittryitheight)); }); $("#iframe_toc"+sid).height($("#iframe_toc"+sid).contents().find("body").height()+(showittryitheight)); } $("input.tocName").hover(function(){ $(this).select(); }); function refresh(){ var sid = tocstepids.shift(); if(null!=sid) refreshIframe(sid); else go2ArchorFlag = true; } var t = setInterval(refresh,300); // $("div.steptoc iframe").height($(showittryitheight+50)); });
效果 样式(悬停可选中) 说明 示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td>616</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td>提莫</td>  
        <td>383</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
基本表格
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table table-striped">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td>616</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td>提莫</td>  
        <td>383</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
带斑马线的表格
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table table-bordered">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td>616</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td>提莫</td>  
        <td>383</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
带边框的表格
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table table-hover">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td>616</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td>提莫</td>  
        <td>383</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
有鼠标悬停状态的表格
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td>616</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td>提莫</td>  
        <td>383</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
更加紧凑的表格
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table table-striped table-bordered table-hover  table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td>616</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td>提莫</td>  
        <td>383</td>  
     </tr>
 <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
多种表格效果整合在一起
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td >616</td>  
     </tr>
 <tr>
        <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td >提莫</td>  
        <td >383</td>  
     </tr>
 <tr  class="active">
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
激活样式
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td >616</td>  
     </tr>
 <tr>
        <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td >提莫</td>  
        <td >383</td>  
     </tr>
 <tr  class="success">
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
成功样式
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td >616</td>  
     </tr>
 <tr>
        <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td >提莫</td>  
        <td >383</td>  
     </tr>
 <tr  class="info">
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
信息样式
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td >616</td>  
     </tr>
 <tr>
        <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td >提莫</td>  
        <td >383</td>  
     </tr>
 <tr  class="warning">
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
警告样式
示例代码
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
    <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td>  
        <td>盖伦</td>  
        <td >616</td>  
     </tr>
 <tr>
        <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td>  
        <td >提莫</td>  
        <td >383</td>  
     </tr>
 <tr  class="danger">
        <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td>  
        <td>阿卡丽</td>  
        <td>448</td>  
     </tr>
  </tbody>
</table>
危险样式
示例代码
示例 1 : 基本表格   
示例 2 : 带斑马线的表格   
示例 3 : 带边框的表格   
示例 4 : 有鼠标悬停状态的表格   
示例 5 : 更加紧凑的表格   
示例 6 : 多种表格效果整合在一起   
示例 7 : 激活样式   
示例 8 : 成功样式   
示例 9 : 信息样式   
示例 10 : 警告样式   
示例 11 : 危险样式   

示例 1 :

基本表格

拥有横向分割线的表格,宽度占用父容器的
"); window.frames["iframe_show1041"].document.write(decodeHtml($("textarea#stepcodeTextarea1041").val())); window.frames["iframe_show1041"].document.close(); $(window.frames["iframe_show1041"]).load(function(){ $("#iframe_show1041").height($("#iframe_show1041").contents().find("body").height()+showittryitheight); }); $("#iframe_show1041").height($("#iframe_show1041").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1041"].document.write(decodeHtml(code1041)); window.frames["iframe1041"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1041"]).load(function(){ $("#iframe1041").height($("#iframe1041").contents().find("body").height()+showittryitheight); }); $("#iframe1041").height($("#iframe1041").contents().find("body").height()+showittryitheight); alreadyWriteCode1041 = code1041; $("#rendering1041").hide(); $("#rendered1041").show(); } var tRereshRetry2DemoPanel1041 = setInterval(rereshRetry2DemoPanel1041,1000); var binded1041 = false; $("textarea#stepcodeTextarea1041").keyup(function(){ if(!binded1041){ $(window).bind('beforeunload',function(){ binded1041 = true; return "xxxx"; }); } var newCode = $(this).val() code1041 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1041!=newCode){ // window.frames["iframe1041"].document.write("
"); // window.frames["iframe1041"].document.write(decodeHtml($("textarea#stepcodeTextarea1041").val())); // window.frames["iframe1041"].document.close(); // $(window.frames["iframe1041"]).load(function(){ // $("#iframe1041").height($("#iframe1041").contents().find("body").height()+showittryitheight); // }); // code1041 = newCode; // } }); $(".tryButton1041").click(function(){ $("#tryDiv1041").show(); $("#stepcodeTextarea1041").focus(); $("#stepcodeTextarea1041").height(200); $("#iframe1041").height(0); window.frames["iframe1041"].document.write("
"); window.frames["iframe1041"].document.write(decodeHtml($("textarea#stepcodeTextarea1041").val())); window.frames["iframe1041"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1041"]).load(function(){ $("#iframe1041").height($("#iframe1041").contents().find("body").height()+showittryitheight); }); $("#iframe1041").height($("#iframe1041").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1041.focus(); editor1041.setSize(null, "250"); $("#rendering1041").hide(); $("#rendered1041").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1041 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1041"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1041.on("change",function(doc){ if(!binded1041){ $(window).bind('beforeunload',function(){ binded1041 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1041 = newCode; $("textarea#stepcodeTextarea1041").val(newCode); if(alreadyWriteCode1041!=code1041){ lastModifedTime1041 = new Date().getTime(); $("#rendering1041").show(); $("#rendered1041").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1041 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1041.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1041").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

带斑马线的表格

通过斑马线把奇偶行的区别表现出来
"); window.frames["iframe_show1042"].document.write(decodeHtml($("textarea#stepcodeTextarea1042").val())); window.frames["iframe_show1042"].document.close(); $(window.frames["iframe_show1042"]).load(function(){ $("#iframe_show1042").height($("#iframe_show1042").contents().find("body").height()+showittryitheight); }); $("#iframe_show1042").height($("#iframe_show1042").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-striped"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1042"].document.write(decodeHtml(code1042)); window.frames["iframe1042"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1042"]).load(function(){ $("#iframe1042").height($("#iframe1042").contents().find("body").height()+showittryitheight); }); $("#iframe1042").height($("#iframe1042").contents().find("body").height()+showittryitheight); alreadyWriteCode1042 = code1042; $("#rendering1042").hide(); $("#rendered1042").show(); } var tRereshRetry2DemoPanel1042 = setInterval(rereshRetry2DemoPanel1042,1000); var binded1042 = false; $("textarea#stepcodeTextarea1042").keyup(function(){ if(!binded1042){ $(window).bind('beforeunload',function(){ binded1042 = true; return "xxxx"; }); } var newCode = $(this).val() code1042 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1042!=newCode){ // window.frames["iframe1042"].document.write("
"); // window.frames["iframe1042"].document.write(decodeHtml($("textarea#stepcodeTextarea1042").val())); // window.frames["iframe1042"].document.close(); // $(window.frames["iframe1042"]).load(function(){ // $("#iframe1042").height($("#iframe1042").contents().find("body").height()+showittryitheight); // }); // code1042 = newCode; // } }); $(".tryButton1042").click(function(){ $("#tryDiv1042").show(); $("#stepcodeTextarea1042").focus(); $("#stepcodeTextarea1042").height(200); $("#iframe1042").height(0); window.frames["iframe1042"].document.write("
"); window.frames["iframe1042"].document.write(decodeHtml($("textarea#stepcodeTextarea1042").val())); window.frames["iframe1042"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1042"]).load(function(){ $("#iframe1042").height($("#iframe1042").contents().find("body").height()+showittryitheight); }); $("#iframe1042").height($("#iframe1042").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1042.focus(); editor1042.setSize(null, "250"); $("#rendering1042").hide(); $("#rendered1042").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1042 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1042"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1042.on("change",function(doc){ if(!binded1042){ $(window).bind('beforeunload',function(){ binded1042 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1042 = newCode; $("textarea#stepcodeTextarea1042").val(newCode); if(alreadyWriteCode1042!=code1042){ lastModifedTime1042 = new Date().getTime(); $("#rendering1042").show(); $("#rendered1042").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1042 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1042.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1042").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

带边框的表格

给表格的单元格加上边框
"); window.frames["iframe_show1043"].document.write(decodeHtml($("textarea#stepcodeTextarea1043").val())); window.frames["iframe_show1043"].document.close(); $(window.frames["iframe_show1043"]).load(function(){ $("#iframe_show1043").height($("#iframe_show1043").contents().find("body").height()+showittryitheight); }); $("#iframe_show1043").height($("#iframe_show1043").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1043"].document.write(decodeHtml(code1043)); window.frames["iframe1043"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1043"]).load(function(){ $("#iframe1043").height($("#iframe1043").contents().find("body").height()+showittryitheight); }); $("#iframe1043").height($("#iframe1043").contents().find("body").height()+showittryitheight); alreadyWriteCode1043 = code1043; $("#rendering1043").hide(); $("#rendered1043").show(); } var tRereshRetry2DemoPanel1043 = setInterval(rereshRetry2DemoPanel1043,1000); var binded1043 = false; $("textarea#stepcodeTextarea1043").keyup(function(){ if(!binded1043){ $(window).bind('beforeunload',function(){ binded1043 = true; return "xxxx"; }); } var newCode = $(this).val() code1043 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1043!=newCode){ // window.frames["iframe1043"].document.write("
"); // window.frames["iframe1043"].document.write(decodeHtml($("textarea#stepcodeTextarea1043").val())); // window.frames["iframe1043"].document.close(); // $(window.frames["iframe1043"]).load(function(){ // $("#iframe1043").height($("#iframe1043").contents().find("body").height()+showittryitheight); // }); // code1043 = newCode; // } }); $(".tryButton1043").click(function(){ $("#tryDiv1043").show(); $("#stepcodeTextarea1043").focus(); $("#stepcodeTextarea1043").height(200); $("#iframe1043").height(0); window.frames["iframe1043"].document.write("
"); window.frames["iframe1043"].document.write(decodeHtml($("textarea#stepcodeTextarea1043").val())); window.frames["iframe1043"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1043"]).load(function(){ $("#iframe1043").height($("#iframe1043").contents().find("body").height()+showittryitheight); }); $("#iframe1043").height($("#iframe1043").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1043.focus(); editor1043.setSize(null, "250"); $("#rendering1043").hide(); $("#rendered1043").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1043 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1043"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1043.on("change",function(doc){ if(!binded1043){ $(window).bind('beforeunload',function(){ binded1043 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1043 = newCode; $("textarea#stepcodeTextarea1043").val(newCode); if(alreadyWriteCode1043!=code1043){ lastModifedTime1043 = new Date().getTime(); $("#rendering1043").show(); $("#rendered1043").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1043 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1043.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1043").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

有鼠标悬停状态的表格

鼠标悬停高亮显示
"); window.frames["iframe_show1044"].document.write(decodeHtml($("textarea#stepcodeTextarea1044").val())); window.frames["iframe_show1044"].document.close(); $(window.frames["iframe_show1044"]).load(function(){ $("#iframe_show1044").height($("#iframe_show1044").contents().find("body").height()+showittryitheight); }); $("#iframe_show1044").height($("#iframe_show1044").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-hover"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1044"].document.write(decodeHtml(code1044)); window.frames["iframe1044"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1044"]).load(function(){ $("#iframe1044").height($("#iframe1044").contents().find("body").height()+showittryitheight); }); $("#iframe1044").height($("#iframe1044").contents().find("body").height()+showittryitheight); alreadyWriteCode1044 = code1044; $("#rendering1044").hide(); $("#rendered1044").show(); } var tRereshRetry2DemoPanel1044 = setInterval(rereshRetry2DemoPanel1044,1000); var binded1044 = false; $("textarea#stepcodeTextarea1044").keyup(function(){ if(!binded1044){ $(window).bind('beforeunload',function(){ binded1044 = true; return "xxxx"; }); } var newCode = $(this).val() code1044 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1044!=newCode){ // window.frames["iframe1044"].document.write("
"); // window.frames["iframe1044"].document.write(decodeHtml($("textarea#stepcodeTextarea1044").val())); // window.frames["iframe1044"].document.close(); // $(window.frames["iframe1044"]).load(function(){ // $("#iframe1044").height($("#iframe1044").contents().find("body").height()+showittryitheight); // }); // code1044 = newCode; // } }); $(".tryButton1044").click(function(){ $("#tryDiv1044").show(); $("#stepcodeTextarea1044").focus(); $("#stepcodeTextarea1044").height(200); $("#iframe1044").height(0); window.frames["iframe1044"].document.write("
"); window.frames["iframe1044"].document.write(decodeHtml($("textarea#stepcodeTextarea1044").val())); window.frames["iframe1044"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1044"]).load(function(){ $("#iframe1044").height($("#iframe1044").contents().find("body").height()+showittryitheight); }); $("#iframe1044").height($("#iframe1044").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1044.focus(); editor1044.setSize(null, "250"); $("#rendering1044").hide(); $("#rendered1044").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1044 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1044"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1044.on("change",function(doc){ if(!binded1044){ $(window).bind('beforeunload',function(){ binded1044 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1044 = newCode; $("textarea#stepcodeTextarea1044").val(newCode); if(alreadyWriteCode1044!=code1044){ lastModifedTime1044 = new Date().getTime(); $("#rendering1044").show(); $("#rendered1044").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1044 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1044.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1044").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

更加紧凑的表格

让表格更加紧凑
"); window.frames["iframe_show1045"].document.write(decodeHtml($("textarea#stepcodeTextarea1045").val())); window.frames["iframe_show1045"].document.close(); $(window.frames["iframe_show1045"]).load(function(){ $("#iframe_show1045").height($("#iframe_show1045").contents().find("body").height()+showittryitheight); }); $("#iframe_show1045").height($("#iframe_show1045").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-condensed"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1045"].document.write(decodeHtml(code1045)); window.frames["iframe1045"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1045"]).load(function(){ $("#iframe1045").height($("#iframe1045").contents().find("body").height()+showittryitheight); }); $("#iframe1045").height($("#iframe1045").contents().find("body").height()+showittryitheight); alreadyWriteCode1045 = code1045; $("#rendering1045").hide(); $("#rendered1045").show(); } var tRereshRetry2DemoPanel1045 = setInterval(rereshRetry2DemoPanel1045,1000); var binded1045 = false; $("textarea#stepcodeTextarea1045").keyup(function(){ if(!binded1045){ $(window).bind('beforeunload',function(){ binded1045 = true; return "xxxx"; }); } var newCode = $(this).val() code1045 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1045!=newCode){ // window.frames["iframe1045"].document.write("
"); // window.frames["iframe1045"].document.write(decodeHtml($("textarea#stepcodeTextarea1045").val())); // window.frames["iframe1045"].document.close(); // $(window.frames["iframe1045"]).load(function(){ // $("#iframe1045").height($("#iframe1045").contents().find("body").height()+showittryitheight); // }); // code1045 = newCode; // } }); $(".tryButton1045").click(function(){ $("#tryDiv1045").show(); $("#stepcodeTextarea1045").focus(); $("#stepcodeTextarea1045").height(200); $("#iframe1045").height(0); window.frames["iframe1045"].document.write("
"); window.frames["iframe1045"].document.write(decodeHtml($("textarea#stepcodeTextarea1045").val())); window.frames["iframe1045"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1045"]).load(function(){ $("#iframe1045").height($("#iframe1045").contents().find("body").height()+showittryitheight); }); $("#iframe1045").height($("#iframe1045").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1045.focus(); editor1045.setSize(null, "250"); $("#rendering1045").hide(); $("#rendered1045").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1045 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1045"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1045.on("change",function(doc){ if(!binded1045){ $(window).bind('beforeunload',function(){ binded1045 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1045 = newCode; $("textarea#stepcodeTextarea1045").val(newCode); if(alreadyWriteCode1045!=code1045){ lastModifedTime1045 = new Date().getTime(); $("#rendering1045").show(); $("#rendered1045").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1045 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1045.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1045").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

多种表格效果整合在一起

多种表格样式混合使用
"); window.frames["iframe_show1046"].document.write(decodeHtml($("textarea#stepcodeTextarea1046").val())); window.frames["iframe_show1046"].document.close(); $(window.frames["iframe_show1046"]).load(function(){ $("#iframe_show1046").height($("#iframe_show1046").contents().find("body").height()+showittryitheight); }); $("#iframe_show1046").height($("#iframe_show1046").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1046"].document.write(decodeHtml(code1046)); window.frames["iframe1046"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1046"]).load(function(){ $("#iframe1046").height($("#iframe1046").contents().find("body").height()+showittryitheight); }); $("#iframe1046").height($("#iframe1046").contents().find("body").height()+showittryitheight); alreadyWriteCode1046 = code1046; $("#rendering1046").hide(); $("#rendered1046").show(); } var tRereshRetry2DemoPanel1046 = setInterval(rereshRetry2DemoPanel1046,1000); var binded1046 = false; $("textarea#stepcodeTextarea1046").keyup(function(){ if(!binded1046){ $(window).bind('beforeunload',function(){ binded1046 = true; return "xxxx"; }); } var newCode = $(this).val() code1046 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1046!=newCode){ // window.frames["iframe1046"].document.write("
"); // window.frames["iframe1046"].document.write(decodeHtml($("textarea#stepcodeTextarea1046").val())); // window.frames["iframe1046"].document.close(); // $(window.frames["iframe1046"]).load(function(){ // $("#iframe1046").height($("#iframe1046").contents().find("body").height()+showittryitheight); // }); // code1046 = newCode; // } }); $(".tryButton1046").click(function(){ $("#tryDiv1046").show(); $("#stepcodeTextarea1046").focus(); $("#stepcodeTextarea1046").height(200); $("#iframe1046").height(0); window.frames["iframe1046"].document.write("
"); window.frames["iframe1046"].document.write(decodeHtml($("textarea#stepcodeTextarea1046").val())); window.frames["iframe1046"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1046"]).load(function(){ $("#iframe1046").height($("#iframe1046").contents().find("body").height()+showittryitheight); }); $("#iframe1046").height($("#iframe1046").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1046.focus(); editor1046.setSize(null, "250"); $("#rendering1046").hide(); $("#rendered1046").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1046 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1046"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1046.on("change",function(doc){ if(!binded1046){ $(window).bind('beforeunload',function(){ binded1046 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1046 = newCode; $("textarea#stepcodeTextarea1046").val(newCode); if(alreadyWriteCode1046!=code1046){ lastModifedTime1046 = new Date().getTime(); $("#rendering1046").show(); $("#rendered1046").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1046 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1046.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1046").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

激活样式

用于表示该行被选中
"); window.frames["iframe_show1047"].document.write(decodeHtml($("textarea#stepcodeTextarea1047").val())); window.frames["iframe_show1047"].document.close(); $(window.frames["iframe_show1047"]).load(function(){ $("#iframe_show1047").height($("#iframe_show1047").contents().find("body").height()+showittryitheight); }); $("#iframe_show1047").height($("#iframe_show1047").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="active"> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1047"].document.write(decodeHtml(code1047)); window.frames["iframe1047"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1047"]).load(function(){ $("#iframe1047").height($("#iframe1047").contents().find("body").height()+showittryitheight); }); $("#iframe1047").height($("#iframe1047").contents().find("body").height()+showittryitheight); alreadyWriteCode1047 = code1047; $("#rendering1047").hide(); $("#rendered1047").show(); } var tRereshRetry2DemoPanel1047 = setInterval(rereshRetry2DemoPanel1047,1000); var binded1047 = false; $("textarea#stepcodeTextarea1047").keyup(function(){ if(!binded1047){ $(window).bind('beforeunload',function(){ binded1047 = true; return "xxxx"; }); } var newCode = $(this).val() code1047 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1047!=newCode){ // window.frames["iframe1047"].document.write("
"); // window.frames["iframe1047"].document.write(decodeHtml($("textarea#stepcodeTextarea1047").val())); // window.frames["iframe1047"].document.close(); // $(window.frames["iframe1047"]).load(function(){ // $("#iframe1047").height($("#iframe1047").contents().find("body").height()+showittryitheight); // }); // code1047 = newCode; // } }); $(".tryButton1047").click(function(){ $("#tryDiv1047").show(); $("#stepcodeTextarea1047").focus(); $("#stepcodeTextarea1047").height(200); $("#iframe1047").height(0); window.frames["iframe1047"].document.write("
"); window.frames["iframe1047"].document.write(decodeHtml($("textarea#stepcodeTextarea1047").val())); window.frames["iframe1047"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1047"]).load(function(){ $("#iframe1047").height($("#iframe1047").contents().find("body").height()+showittryitheight); }); $("#iframe1047").height($("#iframe1047").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1047.focus(); editor1047.setSize(null, "250"); $("#rendering1047").hide(); $("#rendered1047").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1047 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1047"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1047.on("change",function(doc){ if(!binded1047){ $(window).bind('beforeunload',function(){ binded1047 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1047 = newCode; $("textarea#stepcodeTextarea1047").val(newCode); if(alreadyWriteCode1047!=code1047){ lastModifedTime1047 = new Date().getTime(); $("#rendering1047").show(); $("#rendered1047").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1047 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1047.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1047").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

成功样式

用于表示该行的信息是成功的
"); window.frames["iframe_show1048"].document.write(decodeHtml($("textarea#stepcodeTextarea1048").val())); window.frames["iframe_show1048"].document.close(); $(window.frames["iframe_show1048"]).load(function(){ $("#iframe_show1048").height($("#iframe_show1048").contents().find("body").height()+showittryitheight); }); $("#iframe_show1048").height($("#iframe_show1048").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="success"> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1048"].document.write(decodeHtml(code1048)); window.frames["iframe1048"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1048"]).load(function(){ $("#iframe1048").height($("#iframe1048").contents().find("body").height()+showittryitheight); }); $("#iframe1048").height($("#iframe1048").contents().find("body").height()+showittryitheight); alreadyWriteCode1048 = code1048; $("#rendering1048").hide(); $("#rendered1048").show(); } var tRereshRetry2DemoPanel1048 = setInterval(rereshRetry2DemoPanel1048,1000); var binded1048 = false; $("textarea#stepcodeTextarea1048").keyup(function(){ if(!binded1048){ $(window).bind('beforeunload',function(){ binded1048 = true; return "xxxx"; }); } var newCode = $(this).val() code1048 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1048!=newCode){ // window.frames["iframe1048"].document.write("
"); // window.frames["iframe1048"].document.write(decodeHtml($("textarea#stepcodeTextarea1048").val())); // window.frames["iframe1048"].document.close(); // $(window.frames["iframe1048"]).load(function(){ // $("#iframe1048").height($("#iframe1048").contents().find("body").height()+showittryitheight); // }); // code1048 = newCode; // } }); $(".tryButton1048").click(function(){ $("#tryDiv1048").show(); $("#stepcodeTextarea1048").focus(); $("#stepcodeTextarea1048").height(200); $("#iframe1048").height(0); window.frames["iframe1048"].document.write("
"); window.frames["iframe1048"].document.write(decodeHtml($("textarea#stepcodeTextarea1048").val())); window.frames["iframe1048"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1048"]).load(function(){ $("#iframe1048").height($("#iframe1048").contents().find("body").height()+showittryitheight); }); $("#iframe1048").height($("#iframe1048").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1048.focus(); editor1048.setSize(null, "250"); $("#rendering1048").hide(); $("#rendered1048").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1048 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1048"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1048.on("change",function(doc){ if(!binded1048){ $(window).bind('beforeunload',function(){ binded1048 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1048 = newCode; $("textarea#stepcodeTextarea1048").val(newCode); if(alreadyWriteCode1048!=code1048){ lastModifedTime1048 = new Date().getTime(); $("#rendering1048").show(); $("#rendered1048").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1048 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1048.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1048").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

信息样式

用于表示该行的信息是正常的
"); window.frames["iframe_show1049"].document.write(decodeHtml($("textarea#stepcodeTextarea1049").val())); window.frames["iframe_show1049"].document.close(); $(window.frames["iframe_show1049"]).load(function(){ $("#iframe_show1049").height($("#iframe_show1049").contents().find("body").height()+showittryitheight); }); $("#iframe_show1049").height($("#iframe_show1049").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="info"> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1049"].document.write(decodeHtml(code1049)); window.frames["iframe1049"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1049"]).load(function(){ $("#iframe1049").height($("#iframe1049").contents().find("body").height()+showittryitheight); }); $("#iframe1049").height($("#iframe1049").contents().find("body").height()+showittryitheight); alreadyWriteCode1049 = code1049; $("#rendering1049").hide(); $("#rendered1049").show(); } var tRereshRetry2DemoPanel1049 = setInterval(rereshRetry2DemoPanel1049,1000); var binded1049 = false; $("textarea#stepcodeTextarea1049").keyup(function(){ if(!binded1049){ $(window).bind('beforeunload',function(){ binded1049 = true; return "xxxx"; }); } var newCode = $(this).val() code1049 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1049!=newCode){ // window.frames["iframe1049"].document.write("
"); // window.frames["iframe1049"].document.write(decodeHtml($("textarea#stepcodeTextarea1049").val())); // window.frames["iframe1049"].document.close(); // $(window.frames["iframe1049"]).load(function(){ // $("#iframe1049").height($("#iframe1049").contents().find("body").height()+showittryitheight); // }); // code1049 = newCode; // } }); $(".tryButton1049").click(function(){ $("#tryDiv1049").show(); $("#stepcodeTextarea1049").focus(); $("#stepcodeTextarea1049").height(200); $("#iframe1049").height(0); window.frames["iframe1049"].document.write("
"); window.frames["iframe1049"].document.write(decodeHtml($("textarea#stepcodeTextarea1049").val())); window.frames["iframe1049"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1049"]).load(function(){ $("#iframe1049").height($("#iframe1049").contents().find("body").height()+showittryitheight); }); $("#iframe1049").height($("#iframe1049").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1049.focus(); editor1049.setSize(null, "250"); $("#rendering1049").hide(); $("#rendered1049").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1049 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1049"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1049.on("change",function(doc){ if(!binded1049){ $(window).bind('beforeunload',function(){ binded1049 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1049 = newCode; $("textarea#stepcodeTextarea1049").val(newCode); if(alreadyWriteCode1049!=code1049){ lastModifedTime1049 = new Date().getTime(); $("#rendering1049").show(); $("#rendered1049").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1049 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1049.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1049").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

警告样式

用于表示该行的信息有疑问
"); window.frames["iframe_show1050"].document.write(decodeHtml($("textarea#stepcodeTextarea1050").val())); window.frames["iframe_show1050"].document.close(); $(window.frames["iframe_show1050"]).load(function(){ $("#iframe_show1050").height($("#iframe_show1050").contents().find("body").height()+showittryitheight); }); $("#iframe_show1050").height($("#iframe_show1050").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="warning"> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1050"].document.write(decodeHtml(code1050)); window.frames["iframe1050"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1050"]).load(function(){ $("#iframe1050").height($("#iframe1050").contents().find("body").height()+showittryitheight); }); $("#iframe1050").height($("#iframe1050").contents().find("body").height()+showittryitheight); alreadyWriteCode1050 = code1050; $("#rendering1050").hide(); $("#rendered1050").show(); } var tRereshRetry2DemoPanel1050 = setInterval(rereshRetry2DemoPanel1050,1000); var binded1050 = false; $("textarea#stepcodeTextarea1050").keyup(function(){ if(!binded1050){ $(window).bind('beforeunload',function(){ binded1050 = true; return "xxxx"; }); } var newCode = $(this).val() code1050 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1050!=newCode){ // window.frames["iframe1050"].document.write("
"); // window.frames["iframe1050"].document.write(decodeHtml($("textarea#stepcodeTextarea1050").val())); // window.frames["iframe1050"].document.close(); // $(window.frames["iframe1050"]).load(function(){ // $("#iframe1050").height($("#iframe1050").contents().find("body").height()+showittryitheight); // }); // code1050 = newCode; // } }); $(".tryButton1050").click(function(){ $("#tryDiv1050").show(); $("#stepcodeTextarea1050").focus(); $("#stepcodeTextarea1050").height(200); $("#iframe1050").height(0); window.frames["iframe1050"].document.write("
"); window.frames["iframe1050"].document.write(decodeHtml($("textarea#stepcodeTextarea1050").val())); window.frames["iframe1050"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1050"]).load(function(){ $("#iframe1050").height($("#iframe1050").contents().find("body").height()+showittryitheight); }); $("#iframe1050").height($("#iframe1050").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1050.focus(); editor1050.setSize(null, "250"); $("#rendering1050").hide(); $("#rendered1050").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1050 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1050"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1050.on("change",function(doc){ if(!binded1050){ $(window).bind('beforeunload',function(){ binded1050 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1050 = newCode; $("textarea#stepcodeTextarea1050").val(newCode); if(alreadyWriteCode1050!=code1050){ lastModifedTime1050 = new Date().getTime(); $("#rendering1050").show(); $("#rendered1050").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1050 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1050.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1050").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 11 :

危险样式

用于表示该行的信息有错误
"); window.frames["iframe_show1051"].document.write(decodeHtml($("textarea#stepcodeTextarea1051").val())); window.frames["iframe_show1051"].document.close(); $(window.frames["iframe_show1051"]).load(function(){ $("#iframe_show1051").height($("#iframe_show1051").contents().find("body").height()+showittryitheight); }); $("#iframe_show1051").height($("#iframe_show1051").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script> <link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="danger"> <td><img width="20px" src="http://127.0.0.1/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
"); window.frames["iframe1051"].document.write(decodeHtml(code1051)); window.frames["iframe1051"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1051"]).load(function(){ $("#iframe1051").height($("#iframe1051").contents().find("body").height()+showittryitheight); }); $("#iframe1051").height($("#iframe1051").contents().find("body").height()+showittryitheight); alreadyWriteCode1051 = code1051; $("#rendering1051").hide(); $("#rendered1051").show(); } var tRereshRetry2DemoPanel1051 = setInterval(rereshRetry2DemoPanel1051,1000); var binded1051 = false; $("textarea#stepcodeTextarea1051").keyup(function(){ if(!binded1051){ $(window).bind('beforeunload',function(){ binded1051 = true; return "xxxx"; }); } var newCode = $(this).val() code1051 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1051!=newCode){ // window.frames["iframe1051"].document.write("
"); // window.frames["iframe1051"].document.write(decodeHtml($("textarea#stepcodeTextarea1051").val())); // window.frames["iframe1051"].document.close(); // $(window.frames["iframe1051"]).load(function(){ // $("#iframe1051").height($("#iframe1051").contents().find("body").height()+showittryitheight); // }); // code1051 = newCode; // } }); $(".tryButton1051").click(function(){ $("#tryDiv1051").show(); $("#stepcodeTextarea1051").focus(); $("#stepcodeTextarea1051").height(200); $("#iframe1051").height(0); window.frames["iframe1051"].document.write("
"); window.frames["iframe1051"].document.write(decodeHtml($("textarea#stepcodeTextarea1051").val())); window.frames["iframe1051"].document.close(); //load和下面的非load必需并存,因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1051"]).load(function(){ $("#iframe1051").height($("#iframe1051").contents().find("body").height()+showittryitheight); }); $("#iframe1051").height($("#iframe1051").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1051.focus(); editor1051.setSize(null, "250"); $("#rendering1051").hide(); $("#rendered1051").hide(); }); var mixedMode = { name: "htmlmixed", scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i, mode: null}, {matches: /(text|application)\/(x-)?vb(a|script)/i, mode: "vbscript"}] }; var editor1051 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1051"), { lineNumbers: true, styleActiveLine: true, matchBrackets: true, mode:"text/html", theme:"eclipse", selectionPointer: true, lineWrapping: true, extraKeys: { "Alt-/": "autocomplete", "Ctrl-F": "findPersistent", "F8": function(cm) { cm.setOption("fullScreen", !cm.getOption("fullScreen")); }, "Esc": function(cm) { if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); } } }); editor1051.on("change",function(doc){ if(!binded1051){ $(window).bind('beforeunload',function(){ binded1051 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1051 = newCode; $("textarea#stepcodeTextarea1051").val(newCode); if(alreadyWriteCode1051!=code1051){ lastModifedTime1051 = new Date().getTime(); $("#rendering1051").show(); $("#rendered1051").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1051 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1051.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1051").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


关于 前端部分-BootStrap-表格 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图