|
|
");
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));
});
示例
1
:
淡灰色文本
示例
2
:
强调的文本
示例
3
:
操作成功文本
示例
4
:
提示信息文本
示例
5
:
警告文本
示例
6
:
危险操作文本
");
window.frames["iframe_show1013"].document.write(decodeHtml($("textarea#stepcodeTextarea1013").val()));
window.frames["iframe_show1013"].document.close();
$(window.frames["iframe_show1013"]).load(function(){
$("#iframe_show1013").height($("#iframe_show1013").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1013").height($("#iframe_show1013").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>
<span class="text-muted">muted</span>
<!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>
<span class="text-muted">muted</span>
");
window.frames["iframe1013"].document.write(decodeHtml(code1013));
window.frames["iframe1013"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1013"]).load(function(){
$("#iframe1013").height($("#iframe1013").contents().find("body").height()+showittryitheight);
});
$("#iframe1013").height($("#iframe1013").contents().find("body").height()+showittryitheight);
alreadyWriteCode1013 = code1013;
$("#rendering1013").hide();
$("#rendered1013").show();
}
var tRereshRetry2DemoPanel1013 = setInterval(rereshRetry2DemoPanel1013,1000);
var binded1013 = false;
$("textarea#stepcodeTextarea1013").keyup(function(){
if(!binded1013){
$(window).bind('beforeunload',function(){
binded1013 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1013 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1013!=newCode){
// window.frames["iframe1013"].document.write("
");
// window.frames["iframe1013"].document.write(decodeHtml($("textarea#stepcodeTextarea1013").val()));
// window.frames["iframe1013"].document.close();
// $(window.frames["iframe1013"]).load(function(){
// $("#iframe1013").height($("#iframe1013").contents().find("body").height()+showittryitheight);
// });
// code1013 = newCode;
// }
});
$(".tryButton1013").click(function(){
$("#tryDiv1013").show();
$("#stepcodeTextarea1013").focus();
$("#stepcodeTextarea1013").height(200);
$("#iframe1013").height(0);
window.frames["iframe1013"].document.write("
");
window.frames["iframe1013"].document.write(decodeHtml($("textarea#stepcodeTextarea1013").val()));
window.frames["iframe1013"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1013"]).load(function(){
$("#iframe1013").height($("#iframe1013").contents().find("body").height()+showittryitheight);
});
$("#iframe1013").height($("#iframe1013").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1013.focus();
editor1013.setSize(null, "250");
$("#rendering1013").hide();
$("#rendered1013").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 editor1013 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1013"), {
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);
}
}
});
editor1013.on("change",function(doc){
if(!binded1013){
$(window).bind('beforeunload',function(){
binded1013 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1013 = newCode;
$("textarea#stepcodeTextarea1013").val(newCode);
if(alreadyWriteCode1013!=code1013){
lastModifedTime1013 = new Date().getTime();
$("#rendering1013").show();
$("#rendered1013").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1013 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1013.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1013").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1025"].document.write(decodeHtml($("textarea#stepcodeTextarea1025").val()));
window.frames["iframe_show1025"].document.close();
$(window.frames["iframe_show1025"]).load(function(){
$("#iframe_show1025").height($("#iframe_show1025").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1025").height($("#iframe_show1025").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>
<span class="text-primary">primary</span>
<!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>
<span class="text-primary">primary</span>
");
window.frames["iframe1025"].document.write(decodeHtml(code1025));
window.frames["iframe1025"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1025"]).load(function(){
$("#iframe1025").height($("#iframe1025").contents().find("body").height()+showittryitheight);
});
$("#iframe1025").height($("#iframe1025").contents().find("body").height()+showittryitheight);
alreadyWriteCode1025 = code1025;
$("#rendering1025").hide();
$("#rendered1025").show();
}
var tRereshRetry2DemoPanel1025 = setInterval(rereshRetry2DemoPanel1025,1000);
var binded1025 = false;
$("textarea#stepcodeTextarea1025").keyup(function(){
if(!binded1025){
$(window).bind('beforeunload',function(){
binded1025 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1025 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1025!=newCode){
// window.frames["iframe1025"].document.write("
");
// window.frames["iframe1025"].document.write(decodeHtml($("textarea#stepcodeTextarea1025").val()));
// window.frames["iframe1025"].document.close();
// $(window.frames["iframe1025"]).load(function(){
// $("#iframe1025").height($("#iframe1025").contents().find("body").height()+showittryitheight);
// });
// code1025 = newCode;
// }
});
$(".tryButton1025").click(function(){
$("#tryDiv1025").show();
$("#stepcodeTextarea1025").focus();
$("#stepcodeTextarea1025").height(200);
$("#iframe1025").height(0);
window.frames["iframe1025"].document.write("
");
window.frames["iframe1025"].document.write(decodeHtml($("textarea#stepcodeTextarea1025").val()));
window.frames["iframe1025"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1025"]).load(function(){
$("#iframe1025").height($("#iframe1025").contents().find("body").height()+showittryitheight);
});
$("#iframe1025").height($("#iframe1025").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1025.focus();
editor1025.setSize(null, "250");
$("#rendering1025").hide();
$("#rendered1025").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 editor1025 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1025"), {
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);
}
}
});
editor1025.on("change",function(doc){
if(!binded1025){
$(window).bind('beforeunload',function(){
binded1025 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1025 = newCode;
$("textarea#stepcodeTextarea1025").val(newCode);
if(alreadyWriteCode1025!=code1025){
lastModifedTime1025 = new Date().getTime();
$("#rendering1025").show();
$("#rendered1025").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1025 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1025.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1025").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1014"].document.write(decodeHtml($("textarea#stepcodeTextarea1014").val()));
window.frames["iframe_show1014"].document.close();
$(window.frames["iframe_show1014"]).load(function(){
$("#iframe_show1014").height($("#iframe_show1014").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1014").height($("#iframe_show1014").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>
<span class="text-success">success</span>
<!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>
<span class="text-success">success</span>
");
window.frames["iframe1014"].document.write(decodeHtml(code1014));
window.frames["iframe1014"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1014"]).load(function(){
$("#iframe1014").height($("#iframe1014").contents().find("body").height()+showittryitheight);
});
$("#iframe1014").height($("#iframe1014").contents().find("body").height()+showittryitheight);
alreadyWriteCode1014 = code1014;
$("#rendering1014").hide();
$("#rendered1014").show();
}
var tRereshRetry2DemoPanel1014 = setInterval(rereshRetry2DemoPanel1014,1000);
var binded1014 = false;
$("textarea#stepcodeTextarea1014").keyup(function(){
if(!binded1014){
$(window).bind('beforeunload',function(){
binded1014 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1014 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1014!=newCode){
// window.frames["iframe1014"].document.write("
");
// window.frames["iframe1014"].document.write(decodeHtml($("textarea#stepcodeTextarea1014").val()));
// window.frames["iframe1014"].document.close();
// $(window.frames["iframe1014"]).load(function(){
// $("#iframe1014").height($("#iframe1014").contents().find("body").height()+showittryitheight);
// });
// code1014 = newCode;
// }
});
$(".tryButton1014").click(function(){
$("#tryDiv1014").show();
$("#stepcodeTextarea1014").focus();
$("#stepcodeTextarea1014").height(200);
$("#iframe1014").height(0);
window.frames["iframe1014"].document.write("
");
window.frames["iframe1014"].document.write(decodeHtml($("textarea#stepcodeTextarea1014").val()));
window.frames["iframe1014"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1014"]).load(function(){
$("#iframe1014").height($("#iframe1014").contents().find("body").height()+showittryitheight);
});
$("#iframe1014").height($("#iframe1014").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1014.focus();
editor1014.setSize(null, "250");
$("#rendering1014").hide();
$("#rendered1014").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 editor1014 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1014"), {
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);
}
}
});
editor1014.on("change",function(doc){
if(!binded1014){
$(window).bind('beforeunload',function(){
binded1014 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1014 = newCode;
$("textarea#stepcodeTextarea1014").val(newCode);
if(alreadyWriteCode1014!=code1014){
lastModifedTime1014 = new Date().getTime();
$("#rendering1014").show();
$("#rendered1014").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1014 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1014.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1014").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1015"].document.write(decodeHtml($("textarea#stepcodeTextarea1015").val()));
window.frames["iframe_show1015"].document.close();
$(window.frames["iframe_show1015"]).load(function(){
$("#iframe_show1015").height($("#iframe_show1015").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1015").height($("#iframe_show1015").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>
<span class="text-info">info</span>
<!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>
<span class="text-info">info</span>
");
window.frames["iframe1015"].document.write(decodeHtml(code1015));
window.frames["iframe1015"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1015"]).load(function(){
$("#iframe1015").height($("#iframe1015").contents().find("body").height()+showittryitheight);
});
$("#iframe1015").height($("#iframe1015").contents().find("body").height()+showittryitheight);
alreadyWriteCode1015 = code1015;
$("#rendering1015").hide();
$("#rendered1015").show();
}
var tRereshRetry2DemoPanel1015 = setInterval(rereshRetry2DemoPanel1015,1000);
var binded1015 = false;
$("textarea#stepcodeTextarea1015").keyup(function(){
if(!binded1015){
$(window).bind('beforeunload',function(){
binded1015 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1015 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1015!=newCode){
// window.frames["iframe1015"].document.write("
");
// window.frames["iframe1015"].document.write(decodeHtml($("textarea#stepcodeTextarea1015").val()));
// window.frames["iframe1015"].document.close();
// $(window.frames["iframe1015"]).load(function(){
// $("#iframe1015").height($("#iframe1015").contents().find("body").height()+showittryitheight);
// });
// code1015 = newCode;
// }
});
$(".tryButton1015").click(function(){
$("#tryDiv1015").show();
$("#stepcodeTextarea1015").focus();
$("#stepcodeTextarea1015").height(200);
$("#iframe1015").height(0);
window.frames["iframe1015"].document.write("
");
window.frames["iframe1015"].document.write(decodeHtml($("textarea#stepcodeTextarea1015").val()));
window.frames["iframe1015"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1015"]).load(function(){
$("#iframe1015").height($("#iframe1015").contents().find("body").height()+showittryitheight);
});
$("#iframe1015").height($("#iframe1015").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1015.focus();
editor1015.setSize(null, "250");
$("#rendering1015").hide();
$("#rendered1015").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 editor1015 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1015"), {
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);
}
}
});
editor1015.on("change",function(doc){
if(!binded1015){
$(window).bind('beforeunload',function(){
binded1015 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1015 = newCode;
$("textarea#stepcodeTextarea1015").val(newCode);
if(alreadyWriteCode1015!=code1015){
lastModifedTime1015 = new Date().getTime();
$("#rendering1015").show();
$("#rendered1015").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1015 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1015.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1015").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1016"].document.write(decodeHtml($("textarea#stepcodeTextarea1016").val()));
window.frames["iframe_show1016"].document.close();
$(window.frames["iframe_show1016"]).load(function(){
$("#iframe_show1016").height($("#iframe_show1016").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1016").height($("#iframe_show1016").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>
<span class="text-warning">warning</span>
<!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>
<span class="text-warning">warning</span>
");
window.frames["iframe1016"].document.write(decodeHtml(code1016));
window.frames["iframe1016"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1016"]).load(function(){
$("#iframe1016").height($("#iframe1016").contents().find("body").height()+showittryitheight);
});
$("#iframe1016").height($("#iframe1016").contents().find("body").height()+showittryitheight);
alreadyWriteCode1016 = code1016;
$("#rendering1016").hide();
$("#rendered1016").show();
}
var tRereshRetry2DemoPanel1016 = setInterval(rereshRetry2DemoPanel1016,1000);
var binded1016 = false;
$("textarea#stepcodeTextarea1016").keyup(function(){
if(!binded1016){
$(window).bind('beforeunload',function(){
binded1016 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1016 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1016!=newCode){
// window.frames["iframe1016"].document.write("
");
// window.frames["iframe1016"].document.write(decodeHtml($("textarea#stepcodeTextarea1016").val()));
// window.frames["iframe1016"].document.close();
// $(window.frames["iframe1016"]).load(function(){
// $("#iframe1016").height($("#iframe1016").contents().find("body").height()+showittryitheight);
// });
// code1016 = newCode;
// }
});
$(".tryButton1016").click(function(){
$("#tryDiv1016").show();
$("#stepcodeTextarea1016").focus();
$("#stepcodeTextarea1016").height(200);
$("#iframe1016").height(0);
window.frames["iframe1016"].document.write("
");
window.frames["iframe1016"].document.write(decodeHtml($("textarea#stepcodeTextarea1016").val()));
window.frames["iframe1016"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1016"]).load(function(){
$("#iframe1016").height($("#iframe1016").contents().find("body").height()+showittryitheight);
});
$("#iframe1016").height($("#iframe1016").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1016.focus();
editor1016.setSize(null, "250");
$("#rendering1016").hide();
$("#rendered1016").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 editor1016 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1016"), {
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);
}
}
});
editor1016.on("change",function(doc){
if(!binded1016){
$(window).bind('beforeunload',function(){
binded1016 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1016 = newCode;
$("textarea#stepcodeTextarea1016").val(newCode);
if(alreadyWriteCode1016!=code1016){
lastModifedTime1016 = new Date().getTime();
$("#rendering1016").show();
$("#rendered1016").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1016 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1016.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1016").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1019"].document.write(decodeHtml($("textarea#stepcodeTextarea1019").val()));
window.frames["iframe_show1019"].document.close();
$(window.frames["iframe_show1019"]).load(function(){
$("#iframe_show1019").height($("#iframe_show1019").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1019").height($("#iframe_show1019").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>
<span class="text-danger">danger</span>
<!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>
<span class="text-danger">danger</span>
");
window.frames["iframe1019"].document.write(decodeHtml(code1019));
window.frames["iframe1019"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1019"]).load(function(){
$("#iframe1019").height($("#iframe1019").contents().find("body").height()+showittryitheight);
});
$("#iframe1019").height($("#iframe1019").contents().find("body").height()+showittryitheight);
alreadyWriteCode1019 = code1019;
$("#rendering1019").hide();
$("#rendered1019").show();
}
var tRereshRetry2DemoPanel1019 = setInterval(rereshRetry2DemoPanel1019,1000);
var binded1019 = false;
$("textarea#stepcodeTextarea1019").keyup(function(){
if(!binded1019){
$(window).bind('beforeunload',function(){
binded1019 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1019 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1019!=newCode){
// window.frames["iframe1019"].document.write("
");
// window.frames["iframe1019"].document.write(decodeHtml($("textarea#stepcodeTextarea1019").val()));
// window.frames["iframe1019"].document.close();
// $(window.frames["iframe1019"]).load(function(){
// $("#iframe1019").height($("#iframe1019").contents().find("body").height()+showittryitheight);
// });
// code1019 = newCode;
// }
});
$(".tryButton1019").click(function(){
$("#tryDiv1019").show();
$("#stepcodeTextarea1019").focus();
$("#stepcodeTextarea1019").height(200);
$("#iframe1019").height(0);
window.frames["iframe1019"].document.write("
");
window.frames["iframe1019"].document.write(decodeHtml($("textarea#stepcodeTextarea1019").val()));
window.frames["iframe1019"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1019"]).load(function(){
$("#iframe1019").height($("#iframe1019").contents().find("body").height()+showittryitheight);
});
$("#iframe1019").height($("#iframe1019").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1019.focus();
editor1019.setSize(null, "250");
$("#rendering1019").hide();
$("#rendered1019").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 editor1019 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1019"), {
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);
}
}
});
editor1019.on("change",function(doc){
if(!binded1019){
$(window).bind('beforeunload',function(){
binded1019 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1019 = newCode;
$("textarea#stepcodeTextarea1019").val(newCode);
if(alreadyWriteCode1019!=code1019){
lastModifedTime1019 = new Date().getTime();
$("#rendering1019").show();
$("#rendered1019").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1019 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1019.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1019").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
