|
|
");
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>
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
</div>
|
基本进度条
|
示例代码
|
<!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>
<div class="progress">
<div class="progress-bar" style="width: 60%; min-width: 2em;" >
60%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 0%; min-width: 2em;" >
0%
</div>
</div>
|
带有提示的进度条
|
示例代码
|
<!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>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%">
80%
</div>
</div>
|
不同颜色的进度条
|
示例代码
|
<!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>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%">
40%
</div>
</div>
|
条纹
|
示例代码
|
<!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>
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width: 45%">
45%
</div>
</div>
|
发廊
|
示例代码
|
<!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>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
</div>
</div>
|
堆叠
|
示例代码
|
示例
1
:
基本进度条
示例
2
:
带有提示的进度条
示例
3
:
不同颜色的进度条
示例
4
:
条纹
示例
5
:
发廊
示例
6
:
堆叠
");
window.frames["iframe_show2984"].document.write(decodeHtml($("textarea#stepcodeTextarea2984").val()));
window.frames["iframe_show2984"].document.close();
$(window.frames["iframe_show2984"]).load(function(){
$("#iframe_show2984").height($("#iframe_show2984").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2984").height($("#iframe_show2984").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>
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
</div>
<!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>
<div class="progress">
<div class="progress-bar" style="width: 60%;">
</div>
</div>
");
window.frames["iframe2984"].document.write(decodeHtml(code2984));
window.frames["iframe2984"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2984"]).load(function(){
$("#iframe2984").height($("#iframe2984").contents().find("body").height()+showittryitheight);
});
$("#iframe2984").height($("#iframe2984").contents().find("body").height()+showittryitheight);
alreadyWriteCode2984 = code2984;
$("#rendering2984").hide();
$("#rendered2984").show();
}
var tRereshRetry2DemoPanel2984 = setInterval(rereshRetry2DemoPanel2984,1000);
var binded2984 = false;
$("textarea#stepcodeTextarea2984").keyup(function(){
if(!binded2984){
$(window).bind('beforeunload',function(){
binded2984 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2984 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2984!=newCode){
// window.frames["iframe2984"].document.write("
");
// window.frames["iframe2984"].document.write(decodeHtml($("textarea#stepcodeTextarea2984").val()));
// window.frames["iframe2984"].document.close();
// $(window.frames["iframe2984"]).load(function(){
// $("#iframe2984").height($("#iframe2984").contents().find("body").height()+showittryitheight);
// });
// code2984 = newCode;
// }
});
$(".tryButton2984").click(function(){
$("#tryDiv2984").show();
$("#stepcodeTextarea2984").focus();
$("#stepcodeTextarea2984").height(200);
$("#iframe2984").height(0);
window.frames["iframe2984"].document.write("
");
window.frames["iframe2984"].document.write(decodeHtml($("textarea#stepcodeTextarea2984").val()));
window.frames["iframe2984"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2984"]).load(function(){
$("#iframe2984").height($("#iframe2984").contents().find("body").height()+showittryitheight);
});
$("#iframe2984").height($("#iframe2984").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2984.focus();
editor2984.setSize(null, "250");
$("#rendering2984").hide();
$("#rendered2984").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 editor2984 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2984"), {
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);
}
}
});
editor2984.on("change",function(doc){
if(!binded2984){
$(window).bind('beforeunload',function(){
binded2984 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2984 = newCode;
$("textarea#stepcodeTextarea2984").val(newCode);
if(alreadyWriteCode2984!=code2984){
lastModifedTime2984 = new Date().getTime();
$("#rendering2984").show();
$("#rendered2984").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2984 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2984.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2984").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2985"].document.write(decodeHtml($("textarea#stepcodeTextarea2985").val()));
window.frames["iframe_show2985"].document.close();
$(window.frames["iframe_show2985"]).load(function(){
$("#iframe_show2985").height($("#iframe_show2985").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2985").height($("#iframe_show2985").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>
<div class="progress">
<div class="progress-bar" style="width: 60%; min-width: 2em;" >
60%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 0%; min-width: 2em;" >
0%
</div>
</div>
<!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>
<div class="progress">
<div class="progress-bar" style="width: 60%; min-width: 2em;" >
60%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 0%; min-width: 2em;" >
0%
</div>
</div>
");
window.frames["iframe2985"].document.write(decodeHtml(code2985));
window.frames["iframe2985"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2985"]).load(function(){
$("#iframe2985").height($("#iframe2985").contents().find("body").height()+showittryitheight);
});
$("#iframe2985").height($("#iframe2985").contents().find("body").height()+showittryitheight);
alreadyWriteCode2985 = code2985;
$("#rendering2985").hide();
$("#rendered2985").show();
}
var tRereshRetry2DemoPanel2985 = setInterval(rereshRetry2DemoPanel2985,1000);
var binded2985 = false;
$("textarea#stepcodeTextarea2985").keyup(function(){
if(!binded2985){
$(window).bind('beforeunload',function(){
binded2985 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2985 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2985!=newCode){
// window.frames["iframe2985"].document.write("
");
// window.frames["iframe2985"].document.write(decodeHtml($("textarea#stepcodeTextarea2985").val()));
// window.frames["iframe2985"].document.close();
// $(window.frames["iframe2985"]).load(function(){
// $("#iframe2985").height($("#iframe2985").contents().find("body").height()+showittryitheight);
// });
// code2985 = newCode;
// }
});
$(".tryButton2985").click(function(){
$("#tryDiv2985").show();
$("#stepcodeTextarea2985").focus();
$("#stepcodeTextarea2985").height(200);
$("#iframe2985").height(0);
window.frames["iframe2985"].document.write("
");
window.frames["iframe2985"].document.write(decodeHtml($("textarea#stepcodeTextarea2985").val()));
window.frames["iframe2985"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2985"]).load(function(){
$("#iframe2985").height($("#iframe2985").contents().find("body").height()+showittryitheight);
});
$("#iframe2985").height($("#iframe2985").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2985.focus();
editor2985.setSize(null, "250");
$("#rendering2985").hide();
$("#rendered2985").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 editor2985 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2985"), {
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);
}
}
});
editor2985.on("change",function(doc){
if(!binded2985){
$(window).bind('beforeunload',function(){
binded2985 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2985 = newCode;
$("textarea#stepcodeTextarea2985").val(newCode);
if(alreadyWriteCode2985!=code2985){
lastModifedTime2985 = new Date().getTime();
$("#rendering2985").show();
$("#rendered2985").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2985 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2985.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2985").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2986"].document.write(decodeHtml($("textarea#stepcodeTextarea2986").val()));
window.frames["iframe_show2986"].document.close();
$(window.frames["iframe_show2986"]).load(function(){
$("#iframe_show2986").height($("#iframe_show2986").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2986").height($("#iframe_show2986").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>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%">
80%
</div>
</div>
<!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>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
20%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%">
80%
</div>
</div>
");
window.frames["iframe2986"].document.write(decodeHtml(code2986));
window.frames["iframe2986"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2986"]).load(function(){
$("#iframe2986").height($("#iframe2986").contents().find("body").height()+showittryitheight);
});
$("#iframe2986").height($("#iframe2986").contents().find("body").height()+showittryitheight);
alreadyWriteCode2986 = code2986;
$("#rendering2986").hide();
$("#rendered2986").show();
}
var tRereshRetry2DemoPanel2986 = setInterval(rereshRetry2DemoPanel2986,1000);
var binded2986 = false;
$("textarea#stepcodeTextarea2986").keyup(function(){
if(!binded2986){
$(window).bind('beforeunload',function(){
binded2986 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2986 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2986!=newCode){
// window.frames["iframe2986"].document.write("
");
// window.frames["iframe2986"].document.write(decodeHtml($("textarea#stepcodeTextarea2986").val()));
// window.frames["iframe2986"].document.close();
// $(window.frames["iframe2986"]).load(function(){
// $("#iframe2986").height($("#iframe2986").contents().find("body").height()+showittryitheight);
// });
// code2986 = newCode;
// }
});
$(".tryButton2986").click(function(){
$("#tryDiv2986").show();
$("#stepcodeTextarea2986").focus();
$("#stepcodeTextarea2986").height(200);
$("#iframe2986").height(0);
window.frames["iframe2986"].document.write("
");
window.frames["iframe2986"].document.write(decodeHtml($("textarea#stepcodeTextarea2986").val()));
window.frames["iframe2986"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2986"]).load(function(){
$("#iframe2986").height($("#iframe2986").contents().find("body").height()+showittryitheight);
});
$("#iframe2986").height($("#iframe2986").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2986.focus();
editor2986.setSize(null, "250");
$("#rendering2986").hide();
$("#rendered2986").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 editor2986 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2986"), {
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);
}
}
});
editor2986.on("change",function(doc){
if(!binded2986){
$(window).bind('beforeunload',function(){
binded2986 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2986 = newCode;
$("textarea#stepcodeTextarea2986").val(newCode);
if(alreadyWriteCode2986!=code2986){
lastModifedTime2986 = new Date().getTime();
$("#rendering2986").show();
$("#rendered2986").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2986 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2986.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2986").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2987"].document.write(decodeHtml($("textarea#stepcodeTextarea2987").val()));
window.frames["iframe_show2987"].document.close();
$(window.frames["iframe_show2987"]).load(function(){
$("#iframe_show2987").height($("#iframe_show2987").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2987").height($("#iframe_show2987").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>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%">
40%
</div>
</div>
<!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>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%">
40%
</div>
</div>
");
window.frames["iframe2987"].document.write(decodeHtml(code2987));
window.frames["iframe2987"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2987"]).load(function(){
$("#iframe2987").height($("#iframe2987").contents().find("body").height()+showittryitheight);
});
$("#iframe2987").height($("#iframe2987").contents().find("body").height()+showittryitheight);
alreadyWriteCode2987 = code2987;
$("#rendering2987").hide();
$("#rendered2987").show();
}
var tRereshRetry2DemoPanel2987 = setInterval(rereshRetry2DemoPanel2987,1000);
var binded2987 = false;
$("textarea#stepcodeTextarea2987").keyup(function(){
if(!binded2987){
$(window).bind('beforeunload',function(){
binded2987 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2987 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2987!=newCode){
// window.frames["iframe2987"].document.write("
");
// window.frames["iframe2987"].document.write(decodeHtml($("textarea#stepcodeTextarea2987").val()));
// window.frames["iframe2987"].document.close();
// $(window.frames["iframe2987"]).load(function(){
// $("#iframe2987").height($("#iframe2987").contents().find("body").height()+showittryitheight);
// });
// code2987 = newCode;
// }
});
$(".tryButton2987").click(function(){
$("#tryDiv2987").show();
$("#stepcodeTextarea2987").focus();
$("#stepcodeTextarea2987").height(200);
$("#iframe2987").height(0);
window.frames["iframe2987"].document.write("
");
window.frames["iframe2987"].document.write(decodeHtml($("textarea#stepcodeTextarea2987").val()));
window.frames["iframe2987"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2987"]).load(function(){
$("#iframe2987").height($("#iframe2987").contents().find("body").height()+showittryitheight);
});
$("#iframe2987").height($("#iframe2987").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2987.focus();
editor2987.setSize(null, "250");
$("#rendering2987").hide();
$("#rendered2987").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 editor2987 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2987"), {
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);
}
}
});
editor2987.on("change",function(doc){
if(!binded2987){
$(window).bind('beforeunload',function(){
binded2987 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2987 = newCode;
$("textarea#stepcodeTextarea2987").val(newCode);
if(alreadyWriteCode2987!=code2987){
lastModifedTime2987 = new Date().getTime();
$("#rendering2987").show();
$("#rendered2987").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2987 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2987.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2987").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2988"].document.write(decodeHtml($("textarea#stepcodeTextarea2988").val()));
window.frames["iframe_show2988"].document.close();
$(window.frames["iframe_show2988"]).load(function(){
$("#iframe_show2988").height($("#iframe_show2988").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2988").height($("#iframe_show2988").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>
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width: 45%">
45%
</div>
</div>
<!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>
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width: 45%">
45%
</div>
</div>
");
window.frames["iframe2988"].document.write(decodeHtml(code2988));
window.frames["iframe2988"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2988"]).load(function(){
$("#iframe2988").height($("#iframe2988").contents().find("body").height()+showittryitheight);
});
$("#iframe2988").height($("#iframe2988").contents().find("body").height()+showittryitheight);
alreadyWriteCode2988 = code2988;
$("#rendering2988").hide();
$("#rendered2988").show();
}
var tRereshRetry2DemoPanel2988 = setInterval(rereshRetry2DemoPanel2988,1000);
var binded2988 = false;
$("textarea#stepcodeTextarea2988").keyup(function(){
if(!binded2988){
$(window).bind('beforeunload',function(){
binded2988 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2988 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2988!=newCode){
// window.frames["iframe2988"].document.write("
");
// window.frames["iframe2988"].document.write(decodeHtml($("textarea#stepcodeTextarea2988").val()));
// window.frames["iframe2988"].document.close();
// $(window.frames["iframe2988"]).load(function(){
// $("#iframe2988").height($("#iframe2988").contents().find("body").height()+showittryitheight);
// });
// code2988 = newCode;
// }
});
$(".tryButton2988").click(function(){
$("#tryDiv2988").show();
$("#stepcodeTextarea2988").focus();
$("#stepcodeTextarea2988").height(200);
$("#iframe2988").height(0);
window.frames["iframe2988"].document.write("
");
window.frames["iframe2988"].document.write(decodeHtml($("textarea#stepcodeTextarea2988").val()));
window.frames["iframe2988"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2988"]).load(function(){
$("#iframe2988").height($("#iframe2988").contents().find("body").height()+showittryitheight);
});
$("#iframe2988").height($("#iframe2988").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2988.focus();
editor2988.setSize(null, "250");
$("#rendering2988").hide();
$("#rendered2988").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 editor2988 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2988"), {
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);
}
}
});
editor2988.on("change",function(doc){
if(!binded2988){
$(window).bind('beforeunload',function(){
binded2988 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2988 = newCode;
$("textarea#stepcodeTextarea2988").val(newCode);
if(alreadyWriteCode2988!=code2988){
lastModifedTime2988 = new Date().getTime();
$("#rendering2988").show();
$("#rendered2988").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2988 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2988.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2988").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2989"].document.write(decodeHtml($("textarea#stepcodeTextarea2989").val()));
window.frames["iframe_show2989"].document.close();
$(window.frames["iframe_show2989"]).load(function(){
$("#iframe_show2989").height($("#iframe_show2989").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2989").height($("#iframe_show2989").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>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
</div>
</div>
<!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>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
</div>
</div>
");
window.frames["iframe2989"].document.write(decodeHtml(code2989));
window.frames["iframe2989"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2989"]).load(function(){
$("#iframe2989").height($("#iframe2989").contents().find("body").height()+showittryitheight);
});
$("#iframe2989").height($("#iframe2989").contents().find("body").height()+showittryitheight);
alreadyWriteCode2989 = code2989;
$("#rendering2989").hide();
$("#rendered2989").show();
}
var tRereshRetry2DemoPanel2989 = setInterval(rereshRetry2DemoPanel2989,1000);
var binded2989 = false;
$("textarea#stepcodeTextarea2989").keyup(function(){
if(!binded2989){
$(window).bind('beforeunload',function(){
binded2989 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2989 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2989!=newCode){
// window.frames["iframe2989"].document.write("
");
// window.frames["iframe2989"].document.write(decodeHtml($("textarea#stepcodeTextarea2989").val()));
// window.frames["iframe2989"].document.close();
// $(window.frames["iframe2989"]).load(function(){
// $("#iframe2989").height($("#iframe2989").contents().find("body").height()+showittryitheight);
// });
// code2989 = newCode;
// }
});
$(".tryButton2989").click(function(){
$("#tryDiv2989").show();
$("#stepcodeTextarea2989").focus();
$("#stepcodeTextarea2989").height(200);
$("#iframe2989").height(0);
window.frames["iframe2989"].document.write("
");
window.frames["iframe2989"].document.write(decodeHtml($("textarea#stepcodeTextarea2989").val()));
window.frames["iframe2989"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2989"]).load(function(){
$("#iframe2989").height($("#iframe2989").contents().find("body").height()+showittryitheight);
});
$("#iframe2989").height($("#iframe2989").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2989.focus();
editor2989.setSize(null, "250");
$("#rendering2989").hide();
$("#rendered2989").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 editor2989 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2989"), {
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);
}
}
});
editor2989.on("change",function(doc){
if(!binded2989){
$(window).bind('beforeunload',function(){
binded2989 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2989 = newCode;
$("textarea#stepcodeTextarea2989").val(newCode);
if(alreadyWriteCode2989!=code2989){
lastModifedTime2989 = new Date().getTime();
$("#rendering2989").show();
$("#rendered2989").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2989 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2989.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2989").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
