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>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://127.0.0.1../../../img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3493.png" >
    </div>

    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3494.png" >
    </div>

  </div>
</div>
edit
基本轮播
示例代码 
<!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>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://127.0.0.1../../../img/site/step/3491.png" >
      <div class="carousel-caption">
        LOL1
      </div>
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3492.png" >
      <div class="carousel-caption">
        LOL2
      </div>
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3493.png" >
      <div class="carousel-caption">
        LOL3
      </div>
    </div>

    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3494.png" >
      <div class="carousel-caption">
        LOL4
      </div>
    </div>

  </div>

</div>
edit
带标题的轮播
示例代码 
<!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>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://127.0.0.1../../../img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3493.png" >
    </div>

    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3494.png" >
    </div>

  </div>
</div>
edit
设置轮播速度
示例代码 
<!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>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://127.0.0.1../../../img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3493.png" >
    </div>

    <div class="item">
            <img src="http://127.0.0.1../../../img/site/step/3494.png" >
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

  </a>

</div>
edit
控制前后的轮播
示例代码
示例 1 : 基本轮播   
示例 2 : 带标题的轮播   
示例 3 : 设置轮播速度   
示例 4 : 控制前后的轮播   

示例 1 :

基本轮播

顶 折
基本轮播
"); window.frames["iframe_show3020"].document.write(decodeHtml($("textarea#stepcodeTextarea3020").val())); window.frames["iframe_show3020"].document.close(); $(window.frames["iframe_show3020"]).load(function(){ $("#iframe_show3020").height($("#iframe_show3020").contents().find("body").height()+showittryitheight); }); $("#iframe_show3020").height($("#iframe_show3020").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> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://127.0.0.1../../../img/site/step/3491.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3492.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3493.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3494.png" > </div> </div> </div>
"); window.frames["iframe3020"].document.write(decodeHtml(code3020)); window.frames["iframe3020"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3020"]).load(function(){ $("#iframe3020").height($("#iframe3020").contents().find("body").height()+showittryitheight); }); $("#iframe3020").height($("#iframe3020").contents().find("body").height()+showittryitheight); alreadyWriteCode3020 = code3020; $("#rendering3020").hide(); $("#rendered3020").show(); } var tRereshRetry2DemoPanel3020 = setInterval(rereshRetry2DemoPanel3020,1000); var binded3020 = false; $("textarea#stepcodeTextarea3020").keyup(function(){ if(!binded3020){ $(window).bind('beforeunload',function(){ binded3020 = true; return "xxxx"; }); } var newCode = $(this).val() code3020 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code3020!=newCode){ // window.frames["iframe3020"].document.write("
"); // window.frames["iframe3020"].document.write(decodeHtml($("textarea#stepcodeTextarea3020").val())); // window.frames["iframe3020"].document.close(); // $(window.frames["iframe3020"]).load(function(){ // $("#iframe3020").height($("#iframe3020").contents().find("body").height()+showittryitheight); // }); // code3020 = newCode; // } }); $(".tryButton3020").click(function(){ $("#tryDiv3020").show(); $("#stepcodeTextarea3020").focus(); $("#stepcodeTextarea3020").height(200); $("#iframe3020").height(0); window.frames["iframe3020"].document.write("
"); window.frames["iframe3020"].document.write(decodeHtml($("textarea#stepcodeTextarea3020").val())); window.frames["iframe3020"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3020"]).load(function(){ $("#iframe3020").height($("#iframe3020").contents().find("body").height()+showittryitheight); }); $("#iframe3020").height($("#iframe3020").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor3020.focus(); editor3020.setSize(null, "250"); $("#rendering3020").hide(); $("#rendered3020").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 editor3020 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3020"), { 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); } } }); editor3020.on("change",function(doc){ if(!binded3020){ $(window).bind('beforeunload',function(){ binded3020 = true; return "xxxx"; }); } var newCode = doc.getValue(); code3020 = newCode; $("textarea#stepcodeTextarea3020").val(newCode); if(alreadyWriteCode3020!=code3020){ lastModifedTime3020 = new Date().getTime(); $("#rendering3020").show(); $("#rendered3020").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor3020 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor3020.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv3020").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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

带标题的轮播

顶 折
带标题的轮播
"); window.frames["iframe_show3019"].document.write(decodeHtml($("textarea#stepcodeTextarea3019").val())); window.frames["iframe_show3019"].document.close(); $(window.frames["iframe_show3019"]).load(function(){ $("#iframe_show3019").height($("#iframe_show3019").contents().find("body").height()+showittryitheight); }); $("#iframe_show3019").height($("#iframe_show3019").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> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://127.0.0.1../../../img/site/step/3491.png" > <div class="carousel-caption"> LOL1 </div> </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3492.png" > <div class="carousel-caption"> LOL2 </div> </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3493.png" > <div class="carousel-caption"> LOL3 </div> </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3494.png" > <div class="carousel-caption"> LOL4 </div> </div> </div> </div>
"); window.frames["iframe3019"].document.write(decodeHtml(code3019)); window.frames["iframe3019"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3019"]).load(function(){ $("#iframe3019").height($("#iframe3019").contents().find("body").height()+showittryitheight); }); $("#iframe3019").height($("#iframe3019").contents().find("body").height()+showittryitheight); alreadyWriteCode3019 = code3019; $("#rendering3019").hide(); $("#rendered3019").show(); } var tRereshRetry2DemoPanel3019 = setInterval(rereshRetry2DemoPanel3019,1000); var binded3019 = false; $("textarea#stepcodeTextarea3019").keyup(function(){ if(!binded3019){ $(window).bind('beforeunload',function(){ binded3019 = true; return "xxxx"; }); } var newCode = $(this).val() code3019 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code3019!=newCode){ // window.frames["iframe3019"].document.write("
"); // window.frames["iframe3019"].document.write(decodeHtml($("textarea#stepcodeTextarea3019").val())); // window.frames["iframe3019"].document.close(); // $(window.frames["iframe3019"]).load(function(){ // $("#iframe3019").height($("#iframe3019").contents().find("body").height()+showittryitheight); // }); // code3019 = newCode; // } }); $(".tryButton3019").click(function(){ $("#tryDiv3019").show(); $("#stepcodeTextarea3019").focus(); $("#stepcodeTextarea3019").height(200); $("#iframe3019").height(0); window.frames["iframe3019"].document.write("
"); window.frames["iframe3019"].document.write(decodeHtml($("textarea#stepcodeTextarea3019").val())); window.frames["iframe3019"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3019"]).load(function(){ $("#iframe3019").height($("#iframe3019").contents().find("body").height()+showittryitheight); }); $("#iframe3019").height($("#iframe3019").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor3019.focus(); editor3019.setSize(null, "250"); $("#rendering3019").hide(); $("#rendered3019").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 editor3019 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3019"), { 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); } } }); editor3019.on("change",function(doc){ if(!binded3019){ $(window).bind('beforeunload',function(){ binded3019 = true; return "xxxx"; }); } var newCode = doc.getValue(); code3019 = newCode; $("textarea#stepcodeTextarea3019").val(newCode); if(alreadyWriteCode3019!=code3019){ lastModifedTime3019 = new Date().getTime(); $("#rendering3019").show(); $("#rendered3019").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor3019 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor3019.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv3019").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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

设置轮播速度

顶 折
设置轮播速度
"); window.frames["iframe_show3021"].document.write(decodeHtml($("textarea#stepcodeTextarea3021").val())); window.frames["iframe_show3021"].document.close(); $(window.frames["iframe_show3021"]).load(function(){ $("#iframe_show3021").height($("#iframe_show3021").contents().find("body").height()+showittryitheight); }); $("#iframe_show3021").height($("#iframe_show3021").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> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://127.0.0.1../../../img/site/step/3491.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3492.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3493.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3494.png" > </div> </div> </div>
"); window.frames["iframe3021"].document.write(decodeHtml(code3021)); window.frames["iframe3021"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3021"]).load(function(){ $("#iframe3021").height($("#iframe3021").contents().find("body").height()+showittryitheight); }); $("#iframe3021").height($("#iframe3021").contents().find("body").height()+showittryitheight); alreadyWriteCode3021 = code3021; $("#rendering3021").hide(); $("#rendered3021").show(); } var tRereshRetry2DemoPanel3021 = setInterval(rereshRetry2DemoPanel3021,1000); var binded3021 = false; $("textarea#stepcodeTextarea3021").keyup(function(){ if(!binded3021){ $(window).bind('beforeunload',function(){ binded3021 = true; return "xxxx"; }); } var newCode = $(this).val() code3021 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code3021!=newCode){ // window.frames["iframe3021"].document.write("
"); // window.frames["iframe3021"].document.write(decodeHtml($("textarea#stepcodeTextarea3021").val())); // window.frames["iframe3021"].document.close(); // $(window.frames["iframe3021"]).load(function(){ // $("#iframe3021").height($("#iframe3021").contents().find("body").height()+showittryitheight); // }); // code3021 = newCode; // } }); $(".tryButton3021").click(function(){ $("#tryDiv3021").show(); $("#stepcodeTextarea3021").focus(); $("#stepcodeTextarea3021").height(200); $("#iframe3021").height(0); window.frames["iframe3021"].document.write("
"); window.frames["iframe3021"].document.write(decodeHtml($("textarea#stepcodeTextarea3021").val())); window.frames["iframe3021"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3021"]).load(function(){ $("#iframe3021").height($("#iframe3021").contents().find("body").height()+showittryitheight); }); $("#iframe3021").height($("#iframe3021").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor3021.focus(); editor3021.setSize(null, "250"); $("#rendering3021").hide(); $("#rendered3021").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 editor3021 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3021"), { 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); } } }); editor3021.on("change",function(doc){ if(!binded3021){ $(window).bind('beforeunload',function(){ binded3021 = true; return "xxxx"; }); } var newCode = doc.getValue(); code3021 = newCode; $("textarea#stepcodeTextarea3021").val(newCode); if(alreadyWriteCode3021!=code3021){ lastModifedTime3021 = new Date().getTime(); $("#rendering3021").show(); $("#rendered3021").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor3021 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor3021.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv3021").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


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

控制前后的轮播

顶 折
控制前后的轮播
"); window.frames["iframe_show3022"].document.write(decodeHtml($("textarea#stepcodeTextarea3022").val())); window.frames["iframe_show3022"].document.close(); $(window.frames["iframe_show3022"]).load(function(){ $("#iframe_show3022").height($("#iframe_show3022").contents().find("body").height()+showittryitheight); }); $("#iframe_show3022").height($("#iframe_show3022").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> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://127.0.0.1../../../img/site/step/3491.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3492.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3493.png" > </div> <div class="item"> <img src="http://127.0.0.1../../../img/site/step/3494.png" > </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div>
"); window.frames["iframe3022"].document.write(decodeHtml(code3022)); window.frames["iframe3022"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3022"]).load(function(){ $("#iframe3022").height($("#iframe3022").contents().find("body").height()+showittryitheight); }); $("#iframe3022").height($("#iframe3022").contents().find("body").height()+showittryitheight); alreadyWriteCode3022 = code3022; $("#rendering3022").hide(); $("#rendered3022").show(); } var tRereshRetry2DemoPanel3022 = setInterval(rereshRetry2DemoPanel3022,1000); var binded3022 = false; $("textarea#stepcodeTextarea3022").keyup(function(){ if(!binded3022){ $(window).bind('beforeunload',function(){ binded3022 = true; return "xxxx"; }); } var newCode = $(this).val() code3022 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code3022!=newCode){ // window.frames["iframe3022"].document.write("
"); // window.frames["iframe3022"].document.write(decodeHtml($("textarea#stepcodeTextarea3022").val())); // window.frames["iframe3022"].document.close(); // $(window.frames["iframe3022"]).load(function(){ // $("#iframe3022").height($("#iframe3022").contents().find("body").height()+showittryitheight); // }); // code3022 = newCode; // } }); $(".tryButton3022").click(function(){ $("#tryDiv3022").show(); $("#stepcodeTextarea3022").focus(); $("#stepcodeTextarea3022").height(200); $("#iframe3022").height(0); window.frames["iframe3022"].document.write("
"); window.frames["iframe3022"].document.write(decodeHtml($("textarea#stepcodeTextarea3022").val())); window.frames["iframe3022"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe3022"]).load(function(){ $("#iframe3022").height($("#iframe3022").contents().find("body").height()+showittryitheight); }); $("#iframe3022").height($("#iframe3022").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor3022.focus(); editor3022.setSize(null, "250"); $("#rendering3022").hide(); $("#rendered3022").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 editor3022 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3022"), { 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); } } }); editor3022.on("change",function(doc){ if(!binded3022){ $(window).bind('beforeunload',function(){ binded3022 = true; return "xxxx"; }); } var newCode = doc.getValue(); code3022 = newCode; $("textarea#stepcodeTextarea3022").val(newCode); if(alreadyWriteCode3022!=code3022){ lastModifedTime3022 = new Date().getTime(); $("#rendering3022").show(); $("#rendered3022").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor3022 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor3022.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv3022").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

上传截图