|
|
");
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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
<button type="button" class="btn btn-default">基础</button>
<button type="button" class="btn btn-default">中级</button>
<button type="button" class="btn btn-default">高级</button>
</div>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<div class="btn-group" role="group" aria-label="framework">
<button type="button" class="btn btn-default">Hiber</button>
<button type="button" class="btn btn-default">Struts</button>
<button type="button" class="btn btn-default">Spring</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
br{
margin:20px;
}
</style>
<div class="btn-group btn-group-lg" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group-vertical" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</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="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="checkbox" > DOTA
</label>
<label class="btn btn-default">
<input type="checkbox" > WOW
</label>
</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="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="radio" > DOTA
</label>
<label class="btn btn-default">
<input type="radio" > WOW
</label>
</div>
|
单选框
|
示例代码
|
示例
1
:
按钮组
示例
2
:
按钮工具栏
示例
3
:
按钮组大小
示例
4
:
垂直排列的按钮组
示例
5
:
复选框
示例
6
:
单选框
");
window.frames["iframe_show1544"].document.write(decodeHtml($("textarea#stepcodeTextarea1544").val()));
window.frames["iframe_show1544"].document.close();
$(window.frames["iframe_show1544"]).load(function(){
$("#iframe_show1544").height($("#iframe_show1544").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1544").height($("#iframe_show1544").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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
");
window.frames["iframe1544"].document.write(decodeHtml(code1544));
window.frames["iframe1544"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1544"]).load(function(){
$("#iframe1544").height($("#iframe1544").contents().find("body").height()+showittryitheight);
});
$("#iframe1544").height($("#iframe1544").contents().find("body").height()+showittryitheight);
alreadyWriteCode1544 = code1544;
$("#rendering1544").hide();
$("#rendered1544").show();
}
var tRereshRetry2DemoPanel1544 = setInterval(rereshRetry2DemoPanel1544,1000);
var binded1544 = false;
$("textarea#stepcodeTextarea1544").keyup(function(){
if(!binded1544){
$(window).bind('beforeunload',function(){
binded1544 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1544 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1544!=newCode){
// window.frames["iframe1544"].document.write("
");
// window.frames["iframe1544"].document.write(decodeHtml($("textarea#stepcodeTextarea1544").val()));
// window.frames["iframe1544"].document.close();
// $(window.frames["iframe1544"]).load(function(){
// $("#iframe1544").height($("#iframe1544").contents().find("body").height()+showittryitheight);
// });
// code1544 = newCode;
// }
});
$(".tryButton1544").click(function(){
$("#tryDiv1544").show();
$("#stepcodeTextarea1544").focus();
$("#stepcodeTextarea1544").height(200);
$("#iframe1544").height(0);
window.frames["iframe1544"].document.write("
");
window.frames["iframe1544"].document.write(decodeHtml($("textarea#stepcodeTextarea1544").val()));
window.frames["iframe1544"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1544"]).load(function(){
$("#iframe1544").height($("#iframe1544").contents().find("body").height()+showittryitheight);
});
$("#iframe1544").height($("#iframe1544").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1544.focus();
editor1544.setSize(null, "250");
$("#rendering1544").hide();
$("#rendered1544").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 editor1544 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1544"), {
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);
}
}
});
editor1544.on("change",function(doc){
if(!binded1544){
$(window).bind('beforeunload',function(){
binded1544 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1544 = newCode;
$("textarea#stepcodeTextarea1544").val(newCode);
if(alreadyWriteCode1544!=code1544){
lastModifedTime1544 = new Date().getTime();
$("#rendering1544").show();
$("#rendered1544").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1544 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1544.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1544").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1545"].document.write(decodeHtml($("textarea#stepcodeTextarea1545").val()));
window.frames["iframe_show1545"].document.close();
$(window.frames["iframe_show1545"]).load(function(){
$("#iframe_show1545").height($("#iframe_show1545").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1545").height($("#iframe_show1545").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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
<button type="button" class="btn btn-default">基础</button>
<button type="button" class="btn btn-default">中级</button>
<button type="button" class="btn btn-default">高级</button>
</div>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<div class="btn-group" role="group" aria-label="framework">
<button type="button" class="btn btn-default">Hiber</button>
<button type="button" class="btn btn-default">Struts</button>
<button type="button" class="btn btn-default">Spring</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
<button type="button" class="btn btn-default">基础</button>
<button type="button" class="btn btn-default">中级</button>
<button type="button" class="btn btn-default">高级</button>
</div>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<div class="btn-group" role="group" aria-label="framework">
<button type="button" class="btn btn-default">Hiber</button>
<button type="button" class="btn btn-default">Struts</button>
<button type="button" class="btn btn-default">Spring</button>
</div>
</div>
");
window.frames["iframe1545"].document.write(decodeHtml(code1545));
window.frames["iframe1545"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1545"]).load(function(){
$("#iframe1545").height($("#iframe1545").contents().find("body").height()+showittryitheight);
});
$("#iframe1545").height($("#iframe1545").contents().find("body").height()+showittryitheight);
alreadyWriteCode1545 = code1545;
$("#rendering1545").hide();
$("#rendered1545").show();
}
var tRereshRetry2DemoPanel1545 = setInterval(rereshRetry2DemoPanel1545,1000);
var binded1545 = false;
$("textarea#stepcodeTextarea1545").keyup(function(){
if(!binded1545){
$(window).bind('beforeunload',function(){
binded1545 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1545 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1545!=newCode){
// window.frames["iframe1545"].document.write("
");
// window.frames["iframe1545"].document.write(decodeHtml($("textarea#stepcodeTextarea1545").val()));
// window.frames["iframe1545"].document.close();
// $(window.frames["iframe1545"]).load(function(){
// $("#iframe1545").height($("#iframe1545").contents().find("body").height()+showittryitheight);
// });
// code1545 = newCode;
// }
});
$(".tryButton1545").click(function(){
$("#tryDiv1545").show();
$("#stepcodeTextarea1545").focus();
$("#stepcodeTextarea1545").height(200);
$("#iframe1545").height(0);
window.frames["iframe1545"].document.write("
");
window.frames["iframe1545"].document.write(decodeHtml($("textarea#stepcodeTextarea1545").val()));
window.frames["iframe1545"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1545"]).load(function(){
$("#iframe1545").height($("#iframe1545").contents().find("body").height()+showittryitheight);
});
$("#iframe1545").height($("#iframe1545").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1545.focus();
editor1545.setSize(null, "250");
$("#rendering1545").hide();
$("#rendered1545").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 editor1545 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1545"), {
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);
}
}
});
editor1545.on("change",function(doc){
if(!binded1545){
$(window).bind('beforeunload',function(){
binded1545 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1545 = newCode;
$("textarea#stepcodeTextarea1545").val(newCode);
if(alreadyWriteCode1545!=code1545){
lastModifedTime1545 = new Date().getTime();
$("#rendering1545").show();
$("#rendered1545").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1545 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1545.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1545").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1546"].document.write(decodeHtml($("textarea#stepcodeTextarea1546").val()));
window.frames["iframe_show1546"].document.close();
$(window.frames["iframe_show1546"]).load(function(){
$("#iframe_show1546").height($("#iframe_show1546").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1546").height($("#iframe_show1546").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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
br{
margin:20px;
}
</style>
<div class="btn-group btn-group-lg" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
br{
margin:20px;
}
</style>
<div class="btn-group btn-group-lg" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
");
window.frames["iframe1546"].document.write(decodeHtml(code1546));
window.frames["iframe1546"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1546"]).load(function(){
$("#iframe1546").height($("#iframe1546").contents().find("body").height()+showittryitheight);
});
$("#iframe1546").height($("#iframe1546").contents().find("body").height()+showittryitheight);
alreadyWriteCode1546 = code1546;
$("#rendering1546").hide();
$("#rendered1546").show();
}
var tRereshRetry2DemoPanel1546 = setInterval(rereshRetry2DemoPanel1546,1000);
var binded1546 = false;
$("textarea#stepcodeTextarea1546").keyup(function(){
if(!binded1546){
$(window).bind('beforeunload',function(){
binded1546 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1546 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1546!=newCode){
// window.frames["iframe1546"].document.write("
");
// window.frames["iframe1546"].document.write(decodeHtml($("textarea#stepcodeTextarea1546").val()));
// window.frames["iframe1546"].document.close();
// $(window.frames["iframe1546"]).load(function(){
// $("#iframe1546").height($("#iframe1546").contents().find("body").height()+showittryitheight);
// });
// code1546 = newCode;
// }
});
$(".tryButton1546").click(function(){
$("#tryDiv1546").show();
$("#stepcodeTextarea1546").focus();
$("#stepcodeTextarea1546").height(200);
$("#iframe1546").height(0);
window.frames["iframe1546"].document.write("
");
window.frames["iframe1546"].document.write(decodeHtml($("textarea#stepcodeTextarea1546").val()));
window.frames["iframe1546"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1546"]).load(function(){
$("#iframe1546").height($("#iframe1546").contents().find("body").height()+showittryitheight);
});
$("#iframe1546").height($("#iframe1546").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1546.focus();
editor1546.setSize(null, "250");
$("#rendering1546").hide();
$("#rendered1546").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 editor1546 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1546"), {
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);
}
}
});
editor1546.on("change",function(doc){
if(!binded1546){
$(window).bind('beforeunload',function(){
binded1546 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1546 = newCode;
$("textarea#stepcodeTextarea1546").val(newCode);
if(alreadyWriteCode1546!=code1546){
lastModifedTime1546 = new Date().getTime();
$("#rendering1546").show();
$("#rendered1546").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1546 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1546.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1546").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show1547"].document.write(decodeHtml($("textarea#stepcodeTextarea1547").val()));
window.frames["iframe_show1547"].document.close();
$(window.frames["iframe_show1547"]).load(function(){
$("#iframe_show1547").height($("#iframe_show1547").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1547").height($("#iframe_show1547").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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group-vertical" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</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.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group-vertical" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
<button type="button" class="btn btn-default">Css</button>
<button type="button" class="btn btn-default">JS</button>
</div>
");
window.frames["iframe1547"].document.write(decodeHtml(code1547));
window.frames["iframe1547"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1547"]).load(function(){
$("#iframe1547").height($("#iframe1547").contents().find("body").height()+showittryitheight);
});
$("#iframe1547").height($("#iframe1547").contents().find("body").height()+showittryitheight);
alreadyWriteCode1547 = code1547;
$("#rendering1547").hide();
$("#rendered1547").show();
}
var tRereshRetry2DemoPanel1547 = setInterval(rereshRetry2DemoPanel1547,1000);
var binded1547 = false;
$("textarea#stepcodeTextarea1547").keyup(function(){
if(!binded1547){
$(window).bind('beforeunload',function(){
binded1547 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1547 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1547!=newCode){
// window.frames["iframe1547"].document.write("
");
// window.frames["iframe1547"].document.write(decodeHtml($("textarea#stepcodeTextarea1547").val()));
// window.frames["iframe1547"].document.close();
// $(window.frames["iframe1547"]).load(function(){
// $("#iframe1547").height($("#iframe1547").contents().find("body").height()+showittryitheight);
// });
// code1547 = newCode;
// }
});
$(".tryButton1547").click(function(){
$("#tryDiv1547").show();
$("#stepcodeTextarea1547").focus();
$("#stepcodeTextarea1547").height(200);
$("#iframe1547").height(0);
window.frames["iframe1547"].document.write("
");
window.frames["iframe1547"].document.write(decodeHtml($("textarea#stepcodeTextarea1547").val()));
window.frames["iframe1547"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1547"]).load(function(){
$("#iframe1547").height($("#iframe1547").contents().find("body").height()+showittryitheight);
});
$("#iframe1547").height($("#iframe1547").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1547.focus();
editor1547.setSize(null, "250");
$("#rendering1547").hide();
$("#rendered1547").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 editor1547 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1547"), {
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);
}
}
});
editor1547.on("change",function(doc){
if(!binded1547){
$(window).bind('beforeunload',function(){
binded1547 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1547 = newCode;
$("textarea#stepcodeTextarea1547").val(newCode);
if(alreadyWriteCode1547!=code1547){
lastModifedTime1547 = new Date().getTime();
$("#rendering1547").show();
$("#rendered1547").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1547 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1547.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1547").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show3015"].document.write(decodeHtml($("textarea#stepcodeTextarea3015").val()));
window.frames["iframe_show3015"].document.close();
$(window.frames["iframe_show3015"]).load(function(){
$("#iframe_show3015").height($("#iframe_show3015").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3015").height($("#iframe_show3015").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="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="checkbox" > DOTA
</label>
<label class="btn btn-default">
<input type="checkbox" > WOW
</label>
</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="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="checkbox" > DOTA
</label>
<label class="btn btn-default">
<input type="checkbox" > WOW
</label>
</div>
");
window.frames["iframe3015"].document.write(decodeHtml(code3015));
window.frames["iframe3015"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3015"]).load(function(){
$("#iframe3015").height($("#iframe3015").contents().find("body").height()+showittryitheight);
});
$("#iframe3015").height($("#iframe3015").contents().find("body").height()+showittryitheight);
alreadyWriteCode3015 = code3015;
$("#rendering3015").hide();
$("#rendered3015").show();
}
var tRereshRetry2DemoPanel3015 = setInterval(rereshRetry2DemoPanel3015,1000);
var binded3015 = false;
$("textarea#stepcodeTextarea3015").keyup(function(){
if(!binded3015){
$(window).bind('beforeunload',function(){
binded3015 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3015 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3015!=newCode){
// window.frames["iframe3015"].document.write("
");
// window.frames["iframe3015"].document.write(decodeHtml($("textarea#stepcodeTextarea3015").val()));
// window.frames["iframe3015"].document.close();
// $(window.frames["iframe3015"]).load(function(){
// $("#iframe3015").height($("#iframe3015").contents().find("body").height()+showittryitheight);
// });
// code3015 = newCode;
// }
});
$(".tryButton3015").click(function(){
$("#tryDiv3015").show();
$("#stepcodeTextarea3015").focus();
$("#stepcodeTextarea3015").height(200);
$("#iframe3015").height(0);
window.frames["iframe3015"].document.write("
");
window.frames["iframe3015"].document.write(decodeHtml($("textarea#stepcodeTextarea3015").val()));
window.frames["iframe3015"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3015"]).load(function(){
$("#iframe3015").height($("#iframe3015").contents().find("body").height()+showittryitheight);
});
$("#iframe3015").height($("#iframe3015").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3015.focus();
editor3015.setSize(null, "250");
$("#rendering3015").hide();
$("#rendered3015").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 editor3015 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3015"), {
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);
}
}
});
editor3015.on("change",function(doc){
if(!binded3015){
$(window).bind('beforeunload',function(){
binded3015 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3015 = newCode;
$("textarea#stepcodeTextarea3015").val(newCode);
if(alreadyWriteCode3015!=code3015){
lastModifedTime3015 = new Date().getTime();
$("#rendering3015").show();
$("#rendered3015").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3015 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3015.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3015").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show3016"].document.write(decodeHtml($("textarea#stepcodeTextarea3016").val()));
window.frames["iframe_show3016"].document.close();
$(window.frames["iframe_show3016"]).load(function(){
$("#iframe_show3016").height($("#iframe_show3016").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3016").height($("#iframe_show3016").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="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="radio" > DOTA
</label>
<label class="btn btn-default">
<input type="radio" > WOW
</label>
</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="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="radio" > DOTA
</label>
<label class="btn btn-default">
<input type="radio" > WOW
</label>
</div>
");
window.frames["iframe3016"].document.write(decodeHtml(code3016));
window.frames["iframe3016"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3016"]).load(function(){
$("#iframe3016").height($("#iframe3016").contents().find("body").height()+showittryitheight);
});
$("#iframe3016").height($("#iframe3016").contents().find("body").height()+showittryitheight);
alreadyWriteCode3016 = code3016;
$("#rendering3016").hide();
$("#rendered3016").show();
}
var tRereshRetry2DemoPanel3016 = setInterval(rereshRetry2DemoPanel3016,1000);
var binded3016 = false;
$("textarea#stepcodeTextarea3016").keyup(function(){
if(!binded3016){
$(window).bind('beforeunload',function(){
binded3016 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3016 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3016!=newCode){
// window.frames["iframe3016"].document.write("
");
// window.frames["iframe3016"].document.write(decodeHtml($("textarea#stepcodeTextarea3016").val()));
// window.frames["iframe3016"].document.close();
// $(window.frames["iframe3016"]).load(function(){
// $("#iframe3016").height($("#iframe3016").contents().find("body").height()+showittryitheight);
// });
// code3016 = newCode;
// }
});
$(".tryButton3016").click(function(){
$("#tryDiv3016").show();
$("#stepcodeTextarea3016").focus();
$("#stepcodeTextarea3016").height(200);
$("#iframe3016").height(0);
window.frames["iframe3016"].document.write("
");
window.frames["iframe3016"].document.write(decodeHtml($("textarea#stepcodeTextarea3016").val()));
window.frames["iframe3016"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3016"]).load(function(){
$("#iframe3016").height($("#iframe3016").contents().find("body").height()+showittryitheight);
});
$("#iframe3016").height($("#iframe3016").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3016.focus();
editor3016.setSize(null, "250");
$("#rendering3016").hide();
$("#rendered3016").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 editor3016 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3016"), {
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);
}
}
});
editor3016.on("change",function(doc){
if(!binded3016){
$(window).bind('beforeunload',function(){
binded3016 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3016 = newCode;
$("textarea#stepcodeTextarea3016").val(newCode);
if(alreadyWriteCode3016!=code3016){
lastModifedTime3016 = new Date().getTime();
$("#rendering3016").show();
$("#rendered3016").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3016 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3016.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3016").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
