|
|
");
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
:
警告按钮
示例
7
:
危险按钮
示例
8
:
表现为链接
示例
9
:
大一点的按钮
示例
10
:
小一点的按钮
示例
11
:
最小的按钮
示例
12
:
宽屏按钮
示例
13
:
激活状态按钮
示例
14
:
无效按钮
示例
15
:
多种按钮样式混用
");
window.frames["iframe_show1026"].document.write(decodeHtml($("textarea#stepcodeTextarea1026").val()));
window.frames["iframe_show1026"].document.close();
$(window.frames["iframe_show1026"]).load(function(){
$("#iframe_show1026").height($("#iframe_show1026").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1026").height($("#iframe_show1026").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>
<button type="button" class="btn">原始样式按钮</button>
<!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>
<button type="button" class="btn">原始样式按钮</button>
");
window.frames["iframe1026"].document.write(decodeHtml(code1026));
window.frames["iframe1026"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1026"]).load(function(){
$("#iframe1026").height($("#iframe1026").contents().find("body").height()+showittryitheight);
});
$("#iframe1026").height($("#iframe1026").contents().find("body").height()+showittryitheight);
alreadyWriteCode1026 = code1026;
$("#rendering1026").hide();
$("#rendered1026").show();
}
var tRereshRetry2DemoPanel1026 = setInterval(rereshRetry2DemoPanel1026,1000);
var binded1026 = false;
$("textarea#stepcodeTextarea1026").keyup(function(){
if(!binded1026){
$(window).bind('beforeunload',function(){
binded1026 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1026 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1026!=newCode){
// window.frames["iframe1026"].document.write("
");
// window.frames["iframe1026"].document.write(decodeHtml($("textarea#stepcodeTextarea1026").val()));
// window.frames["iframe1026"].document.close();
// $(window.frames["iframe1026"]).load(function(){
// $("#iframe1026").height($("#iframe1026").contents().find("body").height()+showittryitheight);
// });
// code1026 = newCode;
// }
});
$(".tryButton1026").click(function(){
$("#tryDiv1026").show();
$("#stepcodeTextarea1026").focus();
$("#stepcodeTextarea1026").height(200);
$("#iframe1026").height(0);
window.frames["iframe1026"].document.write("
");
window.frames["iframe1026"].document.write(decodeHtml($("textarea#stepcodeTextarea1026").val()));
window.frames["iframe1026"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1026"]).load(function(){
$("#iframe1026").height($("#iframe1026").contents().find("body").height()+showittryitheight);
});
$("#iframe1026").height($("#iframe1026").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1026.focus();
editor1026.setSize(null, "250");
$("#rendering1026").hide();
$("#rendered1026").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 editor1026 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1026"), {
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);
}
}
});
editor1026.on("change",function(doc){
if(!binded1026){
$(window).bind('beforeunload',function(){
binded1026 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1026 = newCode;
$("textarea#stepcodeTextarea1026").val(newCode);
if(alreadyWriteCode1026!=code1026){
lastModifedTime1026 = new Date().getTime();
$("#rendering1026").show();
$("#rendered1026").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1026 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1026.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1026").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1027"].document.write(decodeHtml($("textarea#stepcodeTextarea1027").val()));
window.frames["iframe_show1027"].document.close();
$(window.frames["iframe_show1027"]).load(function(){
$("#iframe_show1027").height($("#iframe_show1027").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1027").height($("#iframe_show1027").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>
<button type="button" class="btn btn-default">默认按钮</button>
<!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>
<button type="button" class="btn btn-default">默认按钮</button>
");
window.frames["iframe1027"].document.write(decodeHtml(code1027));
window.frames["iframe1027"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1027"]).load(function(){
$("#iframe1027").height($("#iframe1027").contents().find("body").height()+showittryitheight);
});
$("#iframe1027").height($("#iframe1027").contents().find("body").height()+showittryitheight);
alreadyWriteCode1027 = code1027;
$("#rendering1027").hide();
$("#rendered1027").show();
}
var tRereshRetry2DemoPanel1027 = setInterval(rereshRetry2DemoPanel1027,1000);
var binded1027 = false;
$("textarea#stepcodeTextarea1027").keyup(function(){
if(!binded1027){
$(window).bind('beforeunload',function(){
binded1027 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1027 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1027!=newCode){
// window.frames["iframe1027"].document.write("
");
// window.frames["iframe1027"].document.write(decodeHtml($("textarea#stepcodeTextarea1027").val()));
// window.frames["iframe1027"].document.close();
// $(window.frames["iframe1027"]).load(function(){
// $("#iframe1027").height($("#iframe1027").contents().find("body").height()+showittryitheight);
// });
// code1027 = newCode;
// }
});
$(".tryButton1027").click(function(){
$("#tryDiv1027").show();
$("#stepcodeTextarea1027").focus();
$("#stepcodeTextarea1027").height(200);
$("#iframe1027").height(0);
window.frames["iframe1027"].document.write("
");
window.frames["iframe1027"].document.write(decodeHtml($("textarea#stepcodeTextarea1027").val()));
window.frames["iframe1027"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1027"]).load(function(){
$("#iframe1027").height($("#iframe1027").contents().find("body").height()+showittryitheight);
});
$("#iframe1027").height($("#iframe1027").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1027.focus();
editor1027.setSize(null, "250");
$("#rendering1027").hide();
$("#rendered1027").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 editor1027 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1027"), {
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);
}
}
});
editor1027.on("change",function(doc){
if(!binded1027){
$(window).bind('beforeunload',function(){
binded1027 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1027 = newCode;
$("textarea#stepcodeTextarea1027").val(newCode);
if(alreadyWriteCode1027!=code1027){
lastModifedTime1027 = new Date().getTime();
$("#rendering1027").show();
$("#rendered1027").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1027 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1027.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1027").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1028"].document.write(decodeHtml($("textarea#stepcodeTextarea1028").val()));
window.frames["iframe_show1028"].document.close();
$(window.frames["iframe_show1028"]).load(function(){
$("#iframe_show1028").height($("#iframe_show1028").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1028").height($("#iframe_show1028").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>
<button type="button" class="btn btn-primary">提交按钮</button>
<!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>
<button type="button" class="btn btn-primary">提交按钮</button>
");
window.frames["iframe1028"].document.write(decodeHtml(code1028));
window.frames["iframe1028"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1028"]).load(function(){
$("#iframe1028").height($("#iframe1028").contents().find("body").height()+showittryitheight);
});
$("#iframe1028").height($("#iframe1028").contents().find("body").height()+showittryitheight);
alreadyWriteCode1028 = code1028;
$("#rendering1028").hide();
$("#rendered1028").show();
}
var tRereshRetry2DemoPanel1028 = setInterval(rereshRetry2DemoPanel1028,1000);
var binded1028 = false;
$("textarea#stepcodeTextarea1028").keyup(function(){
if(!binded1028){
$(window).bind('beforeunload',function(){
binded1028 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1028 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1028!=newCode){
// window.frames["iframe1028"].document.write("
");
// window.frames["iframe1028"].document.write(decodeHtml($("textarea#stepcodeTextarea1028").val()));
// window.frames["iframe1028"].document.close();
// $(window.frames["iframe1028"]).load(function(){
// $("#iframe1028").height($("#iframe1028").contents().find("body").height()+showittryitheight);
// });
// code1028 = newCode;
// }
});
$(".tryButton1028").click(function(){
$("#tryDiv1028").show();
$("#stepcodeTextarea1028").focus();
$("#stepcodeTextarea1028").height(200);
$("#iframe1028").height(0);
window.frames["iframe1028"].document.write("
");
window.frames["iframe1028"].document.write(decodeHtml($("textarea#stepcodeTextarea1028").val()));
window.frames["iframe1028"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1028"]).load(function(){
$("#iframe1028").height($("#iframe1028").contents().find("body").height()+showittryitheight);
});
$("#iframe1028").height($("#iframe1028").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1028.focus();
editor1028.setSize(null, "250");
$("#rendering1028").hide();
$("#rendered1028").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 editor1028 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1028"), {
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);
}
}
});
editor1028.on("change",function(doc){
if(!binded1028){
$(window).bind('beforeunload',function(){
binded1028 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1028 = newCode;
$("textarea#stepcodeTextarea1028").val(newCode);
if(alreadyWriteCode1028!=code1028){
lastModifedTime1028 = new Date().getTime();
$("#rendering1028").show();
$("#rendered1028").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1028 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1028.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1028").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
一般用于一系列操作的最后一步，比如购物车的最后付款一步
");
window.frames["iframe_show1029"].document.write(decodeHtml($("textarea#stepcodeTextarea1029").val()));
window.frames["iframe_show1029"].document.close();
$(window.frames["iframe_show1029"]).load(function(){
$("#iframe_show1029").height($("#iframe_show1029").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1029").height($("#iframe_show1029").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>
<button type="button" class="btn btn-success">成功按钮</button>
<!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>
<button type="button" class="btn btn-success">成功按钮</button>
");
window.frames["iframe1029"].document.write(decodeHtml(code1029));
window.frames["iframe1029"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1029"]).load(function(){
$("#iframe1029").height($("#iframe1029").contents().find("body").height()+showittryitheight);
});
$("#iframe1029").height($("#iframe1029").contents().find("body").height()+showittryitheight);
alreadyWriteCode1029 = code1029;
$("#rendering1029").hide();
$("#rendered1029").show();
}
var tRereshRetry2DemoPanel1029 = setInterval(rereshRetry2DemoPanel1029,1000);
var binded1029 = false;
$("textarea#stepcodeTextarea1029").keyup(function(){
if(!binded1029){
$(window).bind('beforeunload',function(){
binded1029 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1029 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1029!=newCode){
// window.frames["iframe1029"].document.write("
");
// window.frames["iframe1029"].document.write(decodeHtml($("textarea#stepcodeTextarea1029").val()));
// window.frames["iframe1029"].document.close();
// $(window.frames["iframe1029"]).load(function(){
// $("#iframe1029").height($("#iframe1029").contents().find("body").height()+showittryitheight);
// });
// code1029 = newCode;
// }
});
$(".tryButton1029").click(function(){
$("#tryDiv1029").show();
$("#stepcodeTextarea1029").focus();
$("#stepcodeTextarea1029").height(200);
$("#iframe1029").height(0);
window.frames["iframe1029"].document.write("
");
window.frames["iframe1029"].document.write(decodeHtml($("textarea#stepcodeTextarea1029").val()));
window.frames["iframe1029"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1029"]).load(function(){
$("#iframe1029").height($("#iframe1029").contents().find("body").height()+showittryitheight);
});
$("#iframe1029").height($("#iframe1029").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1029.focus();
editor1029.setSize(null, "250");
$("#rendering1029").hide();
$("#rendered1029").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 editor1029 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1029"), {
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);
}
}
});
editor1029.on("change",function(doc){
if(!binded1029){
$(window).bind('beforeunload',function(){
binded1029 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1029 = newCode;
$("textarea#stepcodeTextarea1029").val(newCode);
if(alreadyWriteCode1029!=code1029){
lastModifedTime1029 = new Date().getTime();
$("#rendering1029").show();
$("#rendered1029").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1029 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1029.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1029").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1030"].document.write(decodeHtml($("textarea#stepcodeTextarea1030").val()));
window.frames["iframe_show1030"].document.close();
$(window.frames["iframe_show1030"]).load(function(){
$("#iframe_show1030").height($("#iframe_show1030").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1030").height($("#iframe_show1030").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>
<button type="button" class="btn btn-info">信息按钮</button>
<!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>
<button type="button" class="btn btn-info">信息按钮</button>
");
window.frames["iframe1030"].document.write(decodeHtml(code1030));
window.frames["iframe1030"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1030"]).load(function(){
$("#iframe1030").height($("#iframe1030").contents().find("body").height()+showittryitheight);
});
$("#iframe1030").height($("#iframe1030").contents().find("body").height()+showittryitheight);
alreadyWriteCode1030 = code1030;
$("#rendering1030").hide();
$("#rendered1030").show();
}
var tRereshRetry2DemoPanel1030 = setInterval(rereshRetry2DemoPanel1030,1000);
var binded1030 = false;
$("textarea#stepcodeTextarea1030").keyup(function(){
if(!binded1030){
$(window).bind('beforeunload',function(){
binded1030 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1030 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1030!=newCode){
// window.frames["iframe1030"].document.write("
");
// window.frames["iframe1030"].document.write(decodeHtml($("textarea#stepcodeTextarea1030").val()));
// window.frames["iframe1030"].document.close();
// $(window.frames["iframe1030"]).load(function(){
// $("#iframe1030").height($("#iframe1030").contents().find("body").height()+showittryitheight);
// });
// code1030 = newCode;
// }
});
$(".tryButton1030").click(function(){
$("#tryDiv1030").show();
$("#stepcodeTextarea1030").focus();
$("#stepcodeTextarea1030").height(200);
$("#iframe1030").height(0);
window.frames["iframe1030"].document.write("
");
window.frames["iframe1030"].document.write(decodeHtml($("textarea#stepcodeTextarea1030").val()));
window.frames["iframe1030"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1030"]).load(function(){
$("#iframe1030").height($("#iframe1030").contents().find("body").height()+showittryitheight);
});
$("#iframe1030").height($("#iframe1030").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1030.focus();
editor1030.setSize(null, "250");
$("#rendering1030").hide();
$("#rendered1030").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 editor1030 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1030"), {
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);
}
}
});
editor1030.on("change",function(doc){
if(!binded1030){
$(window).bind('beforeunload',function(){
binded1030 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1030 = newCode;
$("textarea#stepcodeTextarea1030").val(newCode);
if(alreadyWriteCode1030!=code1030){
lastModifedTime1030 = new Date().getTime();
$("#rendering1030").show();
$("#rendered1030").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1030 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1030.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1030").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1031"].document.write(decodeHtml($("textarea#stepcodeTextarea1031").val()));
window.frames["iframe_show1031"].document.close();
$(window.frames["iframe_show1031"]).load(function(){
$("#iframe_show1031").height($("#iframe_show1031").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1031").height($("#iframe_show1031").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>
<button type="button" class="btn btn-warning">警告按钮</button>
<!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>
<button type="button" class="btn btn-warning">警告按钮</button>
");
window.frames["iframe1031"].document.write(decodeHtml(code1031));
window.frames["iframe1031"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1031"]).load(function(){
$("#iframe1031").height($("#iframe1031").contents().find("body").height()+showittryitheight);
});
$("#iframe1031").height($("#iframe1031").contents().find("body").height()+showittryitheight);
alreadyWriteCode1031 = code1031;
$("#rendering1031").hide();
$("#rendered1031").show();
}
var tRereshRetry2DemoPanel1031 = setInterval(rereshRetry2DemoPanel1031,1000);
var binded1031 = false;
$("textarea#stepcodeTextarea1031").keyup(function(){
if(!binded1031){
$(window).bind('beforeunload',function(){
binded1031 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1031 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1031!=newCode){
// window.frames["iframe1031"].document.write("
");
// window.frames["iframe1031"].document.write(decodeHtml($("textarea#stepcodeTextarea1031").val()));
// window.frames["iframe1031"].document.close();
// $(window.frames["iframe1031"]).load(function(){
// $("#iframe1031").height($("#iframe1031").contents().find("body").height()+showittryitheight);
// });
// code1031 = newCode;
// }
});
$(".tryButton1031").click(function(){
$("#tryDiv1031").show();
$("#stepcodeTextarea1031").focus();
$("#stepcodeTextarea1031").height(200);
$("#iframe1031").height(0);
window.frames["iframe1031"].document.write("
");
window.frames["iframe1031"].document.write(decodeHtml($("textarea#stepcodeTextarea1031").val()));
window.frames["iframe1031"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1031"]).load(function(){
$("#iframe1031").height($("#iframe1031").contents().find("body").height()+showittryitheight);
});
$("#iframe1031").height($("#iframe1031").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1031.focus();
editor1031.setSize(null, "250");
$("#rendering1031").hide();
$("#rendered1031").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 editor1031 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1031"), {
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);
}
}
});
editor1031.on("change",function(doc){
if(!binded1031){
$(window).bind('beforeunload',function(){
binded1031 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1031 = newCode;
$("textarea#stepcodeTextarea1031").val(newCode);
if(alreadyWriteCode1031!=code1031){
lastModifedTime1031 = new Date().getTime();
$("#rendering1031").show();
$("#rendered1031").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1031 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1031.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1031").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1032"].document.write(decodeHtml($("textarea#stepcodeTextarea1032").val()));
window.frames["iframe_show1032"].document.close();
$(window.frames["iframe_show1032"]).load(function(){
$("#iframe_show1032").height($("#iframe_show1032").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1032").height($("#iframe_show1032").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>
<button type="button" class="btn btn-danger">危险按钮</button>
<!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>
<button type="button" class="btn btn-danger">危险按钮</button>
");
window.frames["iframe1032"].document.write(decodeHtml(code1032));
window.frames["iframe1032"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1032"]).load(function(){
$("#iframe1032").height($("#iframe1032").contents().find("body").height()+showittryitheight);
});
$("#iframe1032").height($("#iframe1032").contents().find("body").height()+showittryitheight);
alreadyWriteCode1032 = code1032;
$("#rendering1032").hide();
$("#rendered1032").show();
}
var tRereshRetry2DemoPanel1032 = setInterval(rereshRetry2DemoPanel1032,1000);
var binded1032 = false;
$("textarea#stepcodeTextarea1032").keyup(function(){
if(!binded1032){
$(window).bind('beforeunload',function(){
binded1032 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1032 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1032!=newCode){
// window.frames["iframe1032"].document.write("
");
// window.frames["iframe1032"].document.write(decodeHtml($("textarea#stepcodeTextarea1032").val()));
// window.frames["iframe1032"].document.close();
// $(window.frames["iframe1032"]).load(function(){
// $("#iframe1032").height($("#iframe1032").contents().find("body").height()+showittryitheight);
// });
// code1032 = newCode;
// }
});
$(".tryButton1032").click(function(){
$("#tryDiv1032").show();
$("#stepcodeTextarea1032").focus();
$("#stepcodeTextarea1032").height(200);
$("#iframe1032").height(0);
window.frames["iframe1032"].document.write("
");
window.frames["iframe1032"].document.write(decodeHtml($("textarea#stepcodeTextarea1032").val()));
window.frames["iframe1032"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1032"]).load(function(){
$("#iframe1032").height($("#iframe1032").contents().find("body").height()+showittryitheight);
});
$("#iframe1032").height($("#iframe1032").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1032.focus();
editor1032.setSize(null, "250");
$("#rendering1032").hide();
$("#rendered1032").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 editor1032 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1032"), {
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);
}
}
});
editor1032.on("change",function(doc){
if(!binded1032){
$(window).bind('beforeunload',function(){
binded1032 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1032 = newCode;
$("textarea#stepcodeTextarea1032").val(newCode);
if(alreadyWriteCode1032!=code1032){
lastModifedTime1032 = new Date().getTime();
$("#rendering1032").show();
$("#rendered1032").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1032 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1032.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1032").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
button标签会表现为一个超链，但是依然是一个button标签
");
window.frames["iframe_show1033"].document.write(decodeHtml($("textarea#stepcodeTextarea1033").val()));
window.frames["iframe_show1033"].document.close();
$(window.frames["iframe_show1033"]).load(function(){
$("#iframe_show1033").height($("#iframe_show1033").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1033").height($("#iframe_show1033").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>
<button type="button" class="btn btn-link">表现为链接</button>
<!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>
<button type="button" class="btn btn-link">表现为链接</button>
");
window.frames["iframe1033"].document.write(decodeHtml(code1033));
window.frames["iframe1033"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1033"]).load(function(){
$("#iframe1033").height($("#iframe1033").contents().find("body").height()+showittryitheight);
});
$("#iframe1033").height($("#iframe1033").contents().find("body").height()+showittryitheight);
alreadyWriteCode1033 = code1033;
$("#rendering1033").hide();
$("#rendered1033").show();
}
var tRereshRetry2DemoPanel1033 = setInterval(rereshRetry2DemoPanel1033,1000);
var binded1033 = false;
$("textarea#stepcodeTextarea1033").keyup(function(){
if(!binded1033){
$(window).bind('beforeunload',function(){
binded1033 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1033 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1033!=newCode){
// window.frames["iframe1033"].document.write("
");
// window.frames["iframe1033"].document.write(decodeHtml($("textarea#stepcodeTextarea1033").val()));
// window.frames["iframe1033"].document.close();
// $(window.frames["iframe1033"]).load(function(){
// $("#iframe1033").height($("#iframe1033").contents().find("body").height()+showittryitheight);
// });
// code1033 = newCode;
// }
});
$(".tryButton1033").click(function(){
$("#tryDiv1033").show();
$("#stepcodeTextarea1033").focus();
$("#stepcodeTextarea1033").height(200);
$("#iframe1033").height(0);
window.frames["iframe1033"].document.write("
");
window.frames["iframe1033"].document.write(decodeHtml($("textarea#stepcodeTextarea1033").val()));
window.frames["iframe1033"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1033"]).load(function(){
$("#iframe1033").height($("#iframe1033").contents().find("body").height()+showittryitheight);
});
$("#iframe1033").height($("#iframe1033").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1033.focus();
editor1033.setSize(null, "250");
$("#rendering1033").hide();
$("#rendered1033").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 editor1033 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1033"), {
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);
}
}
});
editor1033.on("change",function(doc){
if(!binded1033){
$(window).bind('beforeunload',function(){
binded1033 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1033 = newCode;
$("textarea#stepcodeTextarea1033").val(newCode);
if(alreadyWriteCode1033!=code1033){
lastModifedTime1033 = new Date().getTime();
$("#rendering1033").show();
$("#rendered1033").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1033 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1033.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1033").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1034"].document.write(decodeHtml($("textarea#stepcodeTextarea1034").val()));
window.frames["iframe_show1034"].document.close();
$(window.frames["iframe_show1034"]).load(function(){
$("#iframe_show1034").height($("#iframe_show1034").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1034").height($("#iframe_show1034").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>
<button type="button" class="btn btn-lg">大一点的按钮</button>
<!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>
<button type="button" class="btn btn-lg">大一点的按钮</button>
");
window.frames["iframe1034"].document.write(decodeHtml(code1034));
window.frames["iframe1034"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1034"]).load(function(){
$("#iframe1034").height($("#iframe1034").contents().find("body").height()+showittryitheight);
});
$("#iframe1034").height($("#iframe1034").contents().find("body").height()+showittryitheight);
alreadyWriteCode1034 = code1034;
$("#rendering1034").hide();
$("#rendered1034").show();
}
var tRereshRetry2DemoPanel1034 = setInterval(rereshRetry2DemoPanel1034,1000);
var binded1034 = false;
$("textarea#stepcodeTextarea1034").keyup(function(){
if(!binded1034){
$(window).bind('beforeunload',function(){
binded1034 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1034 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1034!=newCode){
// window.frames["iframe1034"].document.write("
");
// window.frames["iframe1034"].document.write(decodeHtml($("textarea#stepcodeTextarea1034").val()));
// window.frames["iframe1034"].document.close();
// $(window.frames["iframe1034"]).load(function(){
// $("#iframe1034").height($("#iframe1034").contents().find("body").height()+showittryitheight);
// });
// code1034 = newCode;
// }
});
$(".tryButton1034").click(function(){
$("#tryDiv1034").show();
$("#stepcodeTextarea1034").focus();
$("#stepcodeTextarea1034").height(200);
$("#iframe1034").height(0);
window.frames["iframe1034"].document.write("
");
window.frames["iframe1034"].document.write(decodeHtml($("textarea#stepcodeTextarea1034").val()));
window.frames["iframe1034"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1034"]).load(function(){
$("#iframe1034").height($("#iframe1034").contents().find("body").height()+showittryitheight);
});
$("#iframe1034").height($("#iframe1034").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1034.focus();
editor1034.setSize(null, "250");
$("#rendering1034").hide();
$("#rendered1034").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 editor1034 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1034"), {
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);
}
}
});
editor1034.on("change",function(doc){
if(!binded1034){
$(window).bind('beforeunload',function(){
binded1034 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1034 = newCode;
$("textarea#stepcodeTextarea1034").val(newCode);
if(alreadyWriteCode1034!=code1034){
lastModifedTime1034 = new Date().getTime();
$("#rendering1034").show();
$("#rendered1034").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1034 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1034.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1034").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1035"].document.write(decodeHtml($("textarea#stepcodeTextarea1035").val()));
window.frames["iframe_show1035"].document.close();
$(window.frames["iframe_show1035"]).load(function(){
$("#iframe_show1035").height($("#iframe_show1035").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1035").height($("#iframe_show1035").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>
<button type="button" class="btn btn-sm">小一点的按钮</button>
<!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>
<button type="button" class="btn btn-sm">小一点的按钮</button>
");
window.frames["iframe1035"].document.write(decodeHtml(code1035));
window.frames["iframe1035"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1035"]).load(function(){
$("#iframe1035").height($("#iframe1035").contents().find("body").height()+showittryitheight);
});
$("#iframe1035").height($("#iframe1035").contents().find("body").height()+showittryitheight);
alreadyWriteCode1035 = code1035;
$("#rendering1035").hide();
$("#rendered1035").show();
}
var tRereshRetry2DemoPanel1035 = setInterval(rereshRetry2DemoPanel1035,1000);
var binded1035 = false;
$("textarea#stepcodeTextarea1035").keyup(function(){
if(!binded1035){
$(window).bind('beforeunload',function(){
binded1035 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1035 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1035!=newCode){
// window.frames["iframe1035"].document.write("
");
// window.frames["iframe1035"].document.write(decodeHtml($("textarea#stepcodeTextarea1035").val()));
// window.frames["iframe1035"].document.close();
// $(window.frames["iframe1035"]).load(function(){
// $("#iframe1035").height($("#iframe1035").contents().find("body").height()+showittryitheight);
// });
// code1035 = newCode;
// }
});
$(".tryButton1035").click(function(){
$("#tryDiv1035").show();
$("#stepcodeTextarea1035").focus();
$("#stepcodeTextarea1035").height(200);
$("#iframe1035").height(0);
window.frames["iframe1035"].document.write("
");
window.frames["iframe1035"].document.write(decodeHtml($("textarea#stepcodeTextarea1035").val()));
window.frames["iframe1035"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1035"]).load(function(){
$("#iframe1035").height($("#iframe1035").contents().find("body").height()+showittryitheight);
});
$("#iframe1035").height($("#iframe1035").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1035.focus();
editor1035.setSize(null, "250");
$("#rendering1035").hide();
$("#rendered1035").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 editor1035 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1035"), {
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);
}
}
});
editor1035.on("change",function(doc){
if(!binded1035){
$(window).bind('beforeunload',function(){
binded1035 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1035 = newCode;
$("textarea#stepcodeTextarea1035").val(newCode);
if(alreadyWriteCode1035!=code1035){
lastModifedTime1035 = new Date().getTime();
$("#rendering1035").show();
$("#rendered1035").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1035 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1035.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1035").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1036"].document.write(decodeHtml($("textarea#stepcodeTextarea1036").val()));
window.frames["iframe_show1036"].document.close();
$(window.frames["iframe_show1036"]).load(function(){
$("#iframe_show1036").height($("#iframe_show1036").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1036").height($("#iframe_show1036").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>
<button type="button" class="btn btn-xs">最小的按钮</button>
<!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>
<button type="button" class="btn btn-xs">最小的按钮</button>
");
window.frames["iframe1036"].document.write(decodeHtml(code1036));
window.frames["iframe1036"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1036"]).load(function(){
$("#iframe1036").height($("#iframe1036").contents().find("body").height()+showittryitheight);
});
$("#iframe1036").height($("#iframe1036").contents().find("body").height()+showittryitheight);
alreadyWriteCode1036 = code1036;
$("#rendering1036").hide();
$("#rendered1036").show();
}
var tRereshRetry2DemoPanel1036 = setInterval(rereshRetry2DemoPanel1036,1000);
var binded1036 = false;
$("textarea#stepcodeTextarea1036").keyup(function(){
if(!binded1036){
$(window).bind('beforeunload',function(){
binded1036 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1036 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1036!=newCode){
// window.frames["iframe1036"].document.write("
");
// window.frames["iframe1036"].document.write(decodeHtml($("textarea#stepcodeTextarea1036").val()));
// window.frames["iframe1036"].document.close();
// $(window.frames["iframe1036"]).load(function(){
// $("#iframe1036").height($("#iframe1036").contents().find("body").height()+showittryitheight);
// });
// code1036 = newCode;
// }
});
$(".tryButton1036").click(function(){
$("#tryDiv1036").show();
$("#stepcodeTextarea1036").focus();
$("#stepcodeTextarea1036").height(200);
$("#iframe1036").height(0);
window.frames["iframe1036"].document.write("
");
window.frames["iframe1036"].document.write(decodeHtml($("textarea#stepcodeTextarea1036").val()));
window.frames["iframe1036"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1036"]).load(function(){
$("#iframe1036").height($("#iframe1036").contents().find("body").height()+showittryitheight);
});
$("#iframe1036").height($("#iframe1036").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1036.focus();
editor1036.setSize(null, "250");
$("#rendering1036").hide();
$("#rendered1036").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 editor1036 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1036"), {
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);
}
}
});
editor1036.on("change",function(doc){
if(!binded1036){
$(window).bind('beforeunload',function(){
binded1036 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1036 = newCode;
$("textarea#stepcodeTextarea1036").val(newCode);
if(alreadyWriteCode1036!=code1036){
lastModifedTime1036 = new Date().getTime();
$("#rendering1036").show();
$("#rendered1036").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1036 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1036.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1036").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1037"].document.write(decodeHtml($("textarea#stepcodeTextarea1037").val()));
window.frames["iframe_show1037"].document.close();
$(window.frames["iframe_show1037"]).load(function(){
$("#iframe_show1037").height($("#iframe_show1037").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1037").height($("#iframe_show1037").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>
<button type="button" class="btn btn-block">宽屏按钮</button>
<!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>
<button type="button" class="btn btn-block">宽屏按钮</button>
");
window.frames["iframe1037"].document.write(decodeHtml(code1037));
window.frames["iframe1037"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1037"]).load(function(){
$("#iframe1037").height($("#iframe1037").contents().find("body").height()+showittryitheight);
});
$("#iframe1037").height($("#iframe1037").contents().find("body").height()+showittryitheight);
alreadyWriteCode1037 = code1037;
$("#rendering1037").hide();
$("#rendered1037").show();
}
var tRereshRetry2DemoPanel1037 = setInterval(rereshRetry2DemoPanel1037,1000);
var binded1037 = false;
$("textarea#stepcodeTextarea1037").keyup(function(){
if(!binded1037){
$(window).bind('beforeunload',function(){
binded1037 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1037 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1037!=newCode){
// window.frames["iframe1037"].document.write("
");
// window.frames["iframe1037"].document.write(decodeHtml($("textarea#stepcodeTextarea1037").val()));
// window.frames["iframe1037"].document.close();
// $(window.frames["iframe1037"]).load(function(){
// $("#iframe1037").height($("#iframe1037").contents().find("body").height()+showittryitheight);
// });
// code1037 = newCode;
// }
});
$(".tryButton1037").click(function(){
$("#tryDiv1037").show();
$("#stepcodeTextarea1037").focus();
$("#stepcodeTextarea1037").height(200);
$("#iframe1037").height(0);
window.frames["iframe1037"].document.write("
");
window.frames["iframe1037"].document.write(decodeHtml($("textarea#stepcodeTextarea1037").val()));
window.frames["iframe1037"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1037"]).load(function(){
$("#iframe1037").height($("#iframe1037").contents().find("body").height()+showittryitheight);
});
$("#iframe1037").height($("#iframe1037").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1037.focus();
editor1037.setSize(null, "250");
$("#rendering1037").hide();
$("#rendered1037").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 editor1037 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1037"), {
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);
}
}
});
editor1037.on("change",function(doc){
if(!binded1037){
$(window).bind('beforeunload',function(){
binded1037 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1037 = newCode;
$("textarea#stepcodeTextarea1037").val(newCode);
if(alreadyWriteCode1037!=code1037){
lastModifedTime1037 = new Date().getTime();
$("#rendering1037").show();
$("#rendered1037").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1037 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1037.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1037").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
按钮处于正在被按下状态，一般用于显示一个需要消耗较多时间的操作，比如上传一个图片
");
window.frames["iframe_show1038"].document.write(decodeHtml($("textarea#stepcodeTextarea1038").val()));
window.frames["iframe_show1038"].document.close();
$(window.frames["iframe_show1038"]).load(function(){
$("#iframe_show1038").height($("#iframe_show1038").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1038").height($("#iframe_show1038").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>
<button type="button" class="btn active">激活状态按钮</button>
<!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>
<button type="button" class="btn active">激活状态按钮</button>
");
window.frames["iframe1038"].document.write(decodeHtml(code1038));
window.frames["iframe1038"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1038"]).load(function(){
$("#iframe1038").height($("#iframe1038").contents().find("body").height()+showittryitheight);
});
$("#iframe1038").height($("#iframe1038").contents().find("body").height()+showittryitheight);
alreadyWriteCode1038 = code1038;
$("#rendering1038").hide();
$("#rendered1038").show();
}
var tRereshRetry2DemoPanel1038 = setInterval(rereshRetry2DemoPanel1038,1000);
var binded1038 = false;
$("textarea#stepcodeTextarea1038").keyup(function(){
if(!binded1038){
$(window).bind('beforeunload',function(){
binded1038 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1038 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1038!=newCode){
// window.frames["iframe1038"].document.write("
");
// window.frames["iframe1038"].document.write(decodeHtml($("textarea#stepcodeTextarea1038").val()));
// window.frames["iframe1038"].document.close();
// $(window.frames["iframe1038"]).load(function(){
// $("#iframe1038").height($("#iframe1038").contents().find("body").height()+showittryitheight);
// });
// code1038 = newCode;
// }
});
$(".tryButton1038").click(function(){
$("#tryDiv1038").show();
$("#stepcodeTextarea1038").focus();
$("#stepcodeTextarea1038").height(200);
$("#iframe1038").height(0);
window.frames["iframe1038"].document.write("
");
window.frames["iframe1038"].document.write(decodeHtml($("textarea#stepcodeTextarea1038").val()));
window.frames["iframe1038"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1038"]).load(function(){
$("#iframe1038").height($("#iframe1038").contents().find("body").height()+showittryitheight);
});
$("#iframe1038").height($("#iframe1038").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1038.focus();
editor1038.setSize(null, "250");
$("#rendering1038").hide();
$("#rendered1038").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 editor1038 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1038"), {
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);
}
}
});
editor1038.on("change",function(doc){
if(!binded1038){
$(window).bind('beforeunload',function(){
binded1038 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1038 = newCode;
$("textarea#stepcodeTextarea1038").val(newCode);
if(alreadyWriteCode1038!=code1038){
lastModifedTime1038 = new Date().getTime();
$("#rendering1038").show();
$("#rendered1038").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1038 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1038.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1038").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
按钮处于无效状态，不可点击，比如发了2秒钟后的红包
");
window.frames["iframe_show1039"].document.write(decodeHtml($("textarea#stepcodeTextarea1039").val()));
window.frames["iframe_show1039"].document.close();
$(window.frames["iframe_show1039"]).load(function(){
$("#iframe_show1039").height($("#iframe_show1039").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1039").height($("#iframe_show1039").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>
<button type="button" class="btn disabled">领红包</button>
<!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>
<button type="button" class="btn disabled">领红包</button>
");
window.frames["iframe1039"].document.write(decodeHtml(code1039));
window.frames["iframe1039"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1039"]).load(function(){
$("#iframe1039").height($("#iframe1039").contents().find("body").height()+showittryitheight);
});
$("#iframe1039").height($("#iframe1039").contents().find("body").height()+showittryitheight);
alreadyWriteCode1039 = code1039;
$("#rendering1039").hide();
$("#rendered1039").show();
}
var tRereshRetry2DemoPanel1039 = setInterval(rereshRetry2DemoPanel1039,1000);
var binded1039 = false;
$("textarea#stepcodeTextarea1039").keyup(function(){
if(!binded1039){
$(window).bind('beforeunload',function(){
binded1039 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1039 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1039!=newCode){
// window.frames["iframe1039"].document.write("
");
// window.frames["iframe1039"].document.write(decodeHtml($("textarea#stepcodeTextarea1039").val()));
// window.frames["iframe1039"].document.close();
// $(window.frames["iframe1039"]).load(function(){
// $("#iframe1039").height($("#iframe1039").contents().find("body").height()+showittryitheight);
// });
// code1039 = newCode;
// }
});
$(".tryButton1039").click(function(){
$("#tryDiv1039").show();
$("#stepcodeTextarea1039").focus();
$("#stepcodeTextarea1039").height(200);
$("#iframe1039").height(0);
window.frames["iframe1039"].document.write("
");
window.frames["iframe1039"].document.write(decodeHtml($("textarea#stepcodeTextarea1039").val()));
window.frames["iframe1039"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1039"]).load(function(){
$("#iframe1039").height($("#iframe1039").contents().find("body").height()+showittryitheight);
});
$("#iframe1039").height($("#iframe1039").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1039.focus();
editor1039.setSize(null, "250");
$("#rendering1039").hide();
$("#rendered1039").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 editor1039 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1039"), {
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);
}
}
});
editor1039.on("change",function(doc){
if(!binded1039){
$(window).bind('beforeunload',function(){
binded1039 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1039 = newCode;
$("textarea#stepcodeTextarea1039").val(newCode);
if(alreadyWriteCode1039!=code1039){
lastModifedTime1039 = new Date().getTime();
$("#rendering1039").show();
$("#rendered1039").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1039 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1039.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1039").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1040"].document.write(decodeHtml($("textarea#stepcodeTextarea1040").val()));
window.frames["iframe_show1040"].document.close();
$(window.frames["iframe_show1040"]).load(function(){
$("#iframe_show1040").height($("#iframe_show1040").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1040").height($("#iframe_show1040").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>
<button type="button" class="btn disabled btn-danger btn-xs">发红包</button>
<!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>
<button type="button" class="btn disabled btn-danger btn-xs">发红包</button>
");
window.frames["iframe1040"].document.write(decodeHtml(code1040));
window.frames["iframe1040"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1040"]).load(function(){
$("#iframe1040").height($("#iframe1040").contents().find("body").height()+showittryitheight);
});
$("#iframe1040").height($("#iframe1040").contents().find("body").height()+showittryitheight);
alreadyWriteCode1040 = code1040;
$("#rendering1040").hide();
$("#rendered1040").show();
}
var tRereshRetry2DemoPanel1040 = setInterval(rereshRetry2DemoPanel1040,1000);
var binded1040 = false;
$("textarea#stepcodeTextarea1040").keyup(function(){
if(!binded1040){
$(window).bind('beforeunload',function(){
binded1040 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1040 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1040!=newCode){
// window.frames["iframe1040"].document.write("
");
// window.frames["iframe1040"].document.write(decodeHtml($("textarea#stepcodeTextarea1040").val()));
// window.frames["iframe1040"].document.close();
// $(window.frames["iframe1040"]).load(function(){
// $("#iframe1040").height($("#iframe1040").contents().find("body").height()+showittryitheight);
// });
// code1040 = newCode;
// }
});
$(".tryButton1040").click(function(){
$("#tryDiv1040").show();
$("#stepcodeTextarea1040").focus();
$("#stepcodeTextarea1040").height(200);
$("#iframe1040").height(0);
window.frames["iframe1040"].document.write("
");
window.frames["iframe1040"].document.write(decodeHtml($("textarea#stepcodeTextarea1040").val()));
window.frames["iframe1040"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1040"]).load(function(){
$("#iframe1040").height($("#iframe1040").contents().find("body").height()+showittryitheight);
});
$("#iframe1040").height($("#iframe1040").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1040.focus();
editor1040.setSize(null, "250");
$("#rendering1040").hide();
$("#rendered1040").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 editor1040 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1040"), {
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);
}
}
});
editor1040.on("change",function(doc){
if(!binded1040){
$(window).bind('beforeunload',function(){
binded1040 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1040 = newCode;
$("textarea#stepcodeTextarea1040").val(newCode);
if(alreadyWriteCode1040!=code1040){
lastModifedTime1040 = new Date().getTime();
$("#rendering1040").show();
$("#rendered1040").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1040 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1040.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1040").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
