|
|
");
window.frames["iframe_toc"+sid].document.write(decodeHtml($("pre#stepCodePre"+sid).html()));
window.frames["iframe_toc"+sid].document.close();
$(window.frames["iframe_toc"+sid]).load(function(){
$("#iframe_toc"+sid).height($("#iframe_toc"+sid).contents().find("body").height()+(showittryitheight));
});
$("#iframe_toc"+sid).height($("#iframe_toc"+sid).contents().find("body").height()+(showittryitheight));
}
$("input.tocName").hover(function(){
$(this).select();
});
function refresh(){
var sid = tocstepids.shift();
if(null!=sid)
refreshIframe(sid);
else
go2ArchorFlag = true;
}
var t = setInterval(refresh,300);
// $("div.steptoc iframe").height($(showittryitheight+50));
});
| 效果 |
说明 |
示例代码 |
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="alert alert-success" role="alert">操作成功</div>
<div class="alert alert-info" role="alert">信息提示</div>
<div class="alert alert-warning" role="alert">警告提示</div>
<div class="alert alert-danger" role="alert">危险提示</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="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></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="alert alert-success" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-info" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-warning" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-danger" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
|
警告框中的链接
|
示例代码
|
示例
1
:
警告框
示例
2
:
可关闭的警告框
示例
3
:
警告框中的链接
");
window.frames["iframe_show2979"].document.write(decodeHtml($("textarea#stepcodeTextarea2979").val()));
window.frames["iframe_show2979"].document.close();
$(window.frames["iframe_show2979"]).load(function(){
$("#iframe_show2979").height($("#iframe_show2979").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2979").height($("#iframe_show2979").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="alert alert-success" role="alert">操作成功</div>
<div class="alert alert-info" role="alert">信息提示</div>
<div class="alert alert-warning" role="alert">警告提示</div>
<div class="alert alert-danger" role="alert">危险提示</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="alert alert-success" role="alert">操作成功</div>
<div class="alert alert-info" role="alert">信息提示</div>
<div class="alert alert-warning" role="alert">警告提示</div>
<div class="alert alert-danger" role="alert">危险提示</div>
");
window.frames["iframe2979"].document.write(decodeHtml(code2979));
window.frames["iframe2979"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2979"]).load(function(){
$("#iframe2979").height($("#iframe2979").contents().find("body").height()+showittryitheight);
});
$("#iframe2979").height($("#iframe2979").contents().find("body").height()+showittryitheight);
alreadyWriteCode2979 = code2979;
$("#rendering2979").hide();
$("#rendered2979").show();
}
var tRereshRetry2DemoPanel2979 = setInterval(rereshRetry2DemoPanel2979,1000);
var binded2979 = false;
$("textarea#stepcodeTextarea2979").keyup(function(){
if(!binded2979){
$(window).bind('beforeunload',function(){
binded2979 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2979 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2979!=newCode){
// window.frames["iframe2979"].document.write("
");
// window.frames["iframe2979"].document.write(decodeHtml($("textarea#stepcodeTextarea2979").val()));
// window.frames["iframe2979"].document.close();
// $(window.frames["iframe2979"]).load(function(){
// $("#iframe2979").height($("#iframe2979").contents().find("body").height()+showittryitheight);
// });
// code2979 = newCode;
// }
});
$(".tryButton2979").click(function(){
$("#tryDiv2979").show();
$("#stepcodeTextarea2979").focus();
$("#stepcodeTextarea2979").height(200);
$("#iframe2979").height(0);
window.frames["iframe2979"].document.write("
");
window.frames["iframe2979"].document.write(decodeHtml($("textarea#stepcodeTextarea2979").val()));
window.frames["iframe2979"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2979"]).load(function(){
$("#iframe2979").height($("#iframe2979").contents().find("body").height()+showittryitheight);
});
$("#iframe2979").height($("#iframe2979").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2979.focus();
editor2979.setSize(null, "250");
$("#rendering2979").hide();
$("#rendered2979").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 editor2979 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2979"), {
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);
}
}
});
editor2979.on("change",function(doc){
if(!binded2979){
$(window).bind('beforeunload',function(){
binded2979 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2979 = newCode;
$("textarea#stepcodeTextarea2979").val(newCode);
if(alreadyWriteCode2979!=code2979){
lastModifedTime2979 = new Date().getTime();
$("#rendering2979").show();
$("#rendered2979").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2979 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2979.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2979").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2980"].document.write(decodeHtml($("textarea#stepcodeTextarea2980").val()));
window.frames["iframe_show2980"].document.close();
$(window.frames["iframe_show2980"]).load(function(){
$("#iframe_show2980").height($("#iframe_show2980").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2980").height($("#iframe_show2980").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="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></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="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
警告提示
</div>
");
window.frames["iframe2980"].document.write(decodeHtml(code2980));
window.frames["iframe2980"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2980"]).load(function(){
$("#iframe2980").height($("#iframe2980").contents().find("body").height()+showittryitheight);
});
$("#iframe2980").height($("#iframe2980").contents().find("body").height()+showittryitheight);
alreadyWriteCode2980 = code2980;
$("#rendering2980").hide();
$("#rendered2980").show();
}
var tRereshRetry2DemoPanel2980 = setInterval(rereshRetry2DemoPanel2980,1000);
var binded2980 = false;
$("textarea#stepcodeTextarea2980").keyup(function(){
if(!binded2980){
$(window).bind('beforeunload',function(){
binded2980 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2980 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2980!=newCode){
// window.frames["iframe2980"].document.write("
");
// window.frames["iframe2980"].document.write(decodeHtml($("textarea#stepcodeTextarea2980").val()));
// window.frames["iframe2980"].document.close();
// $(window.frames["iframe2980"]).load(function(){
// $("#iframe2980").height($("#iframe2980").contents().find("body").height()+showittryitheight);
// });
// code2980 = newCode;
// }
});
$(".tryButton2980").click(function(){
$("#tryDiv2980").show();
$("#stepcodeTextarea2980").focus();
$("#stepcodeTextarea2980").height(200);
$("#iframe2980").height(0);
window.frames["iframe2980"].document.write("
");
window.frames["iframe2980"].document.write(decodeHtml($("textarea#stepcodeTextarea2980").val()));
window.frames["iframe2980"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2980"]).load(function(){
$("#iframe2980").height($("#iframe2980").contents().find("body").height()+showittryitheight);
});
$("#iframe2980").height($("#iframe2980").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2980.focus();
editor2980.setSize(null, "250");
$("#rendering2980").hide();
$("#rendered2980").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 editor2980 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2980"), {
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);
}
}
});
editor2980.on("change",function(doc){
if(!binded2980){
$(window).bind('beforeunload',function(){
binded2980 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2980 = newCode;
$("textarea#stepcodeTextarea2980").val(newCode);
if(alreadyWriteCode2980!=code2980){
lastModifedTime2980 = new Date().getTime();
$("#rendering2980").show();
$("#rendered2980").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2980 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2980.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2980").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2981"].document.write(decodeHtml($("textarea#stepcodeTextarea2981").val()));
window.frames["iframe_show2981"].document.close();
$(window.frames["iframe_show2981"]).load(function(){
$("#iframe_show2981").height($("#iframe_show2981").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2981").height($("#iframe_show2981").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="alert alert-success" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-info" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-warning" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-danger" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</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="alert alert-success" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-info" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-warning" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
<div class="alert alert-danger" role="alert">
<span>大减价！！！</span><a href="#nowhere" class="alert-link">点击购买</a>
</div>
");
window.frames["iframe2981"].document.write(decodeHtml(code2981));
window.frames["iframe2981"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2981"]).load(function(){
$("#iframe2981").height($("#iframe2981").contents().find("body").height()+showittryitheight);
});
$("#iframe2981").height($("#iframe2981").contents().find("body").height()+showittryitheight);
alreadyWriteCode2981 = code2981;
$("#rendering2981").hide();
$("#rendered2981").show();
}
var tRereshRetry2DemoPanel2981 = setInterval(rereshRetry2DemoPanel2981,1000);
var binded2981 = false;
$("textarea#stepcodeTextarea2981").keyup(function(){
if(!binded2981){
$(window).bind('beforeunload',function(){
binded2981 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2981 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2981!=newCode){
// window.frames["iframe2981"].document.write("
");
// window.frames["iframe2981"].document.write(decodeHtml($("textarea#stepcodeTextarea2981").val()));
// window.frames["iframe2981"].document.close();
// $(window.frames["iframe2981"]).load(function(){
// $("#iframe2981").height($("#iframe2981").contents().find("body").height()+showittryitheight);
// });
// code2981 = newCode;
// }
});
$(".tryButton2981").click(function(){
$("#tryDiv2981").show();
$("#stepcodeTextarea2981").focus();
$("#stepcodeTextarea2981").height(200);
$("#iframe2981").height(0);
window.frames["iframe2981"].document.write("
");
window.frames["iframe2981"].document.write(decodeHtml($("textarea#stepcodeTextarea2981").val()));
window.frames["iframe2981"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2981"]).load(function(){
$("#iframe2981").height($("#iframe2981").contents().find("body").height()+showittryitheight);
});
$("#iframe2981").height($("#iframe2981").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2981.focus();
editor2981.setSize(null, "250");
$("#rendering2981").hide();
$("#rendered2981").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 editor2981 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2981"), {
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);
}
}
});
editor2981.on("change",function(doc){
if(!binded2981){
$(window).bind('beforeunload',function(){
binded2981 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2981 = newCode;
$("textarea#stepcodeTextarea2981").val(newCode);
if(alreadyWriteCode2981!=code2981){
lastModifedTime2981 = new Date().getTime();
$("#rendering2981").show();
$("#rendered2981").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2981 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2981.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2981").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
