|
|
工具版本兼容问题
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float
值： left,right
示例
1
:
文字向右浮动
示例
2
:
文字向左浮动
示例
3
:
文字围绕图片
示例
4
:
文字不想围绕图片
示例
5
:
水平排列div
文字向右浮动
浮动后，原来的“坑”就让出来了
并且是在原来的高度的基础上，向右浮动
");
window.frames["iframe_show488"].document.write(decodeHtml($("textarea#stepcodeTextarea488").val()));
window.frames["iframe_show488"].document.close();
$(window.frames["iframe_show488"]).load(function(){
$("#iframe_show488").height($("#iframe_show488").contents().find("body").height()+showittryitheight);
});
$("#iframe_show488").height($("#iframe_show488").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.f{
float:right;
}
</style>
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>
<style>
.f{
float:right;
}
</style>
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>
");
window.frames["iframe488"].document.write(decodeHtml(code488));
window.frames["iframe488"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe488"]).load(function(){
$("#iframe488").height($("#iframe488").contents().find("body").height()+showittryitheight);
});
$("#iframe488").height($("#iframe488").contents().find("body").height()+showittryitheight);
alreadyWriteCode488 = code488;
$("#rendering488").hide();
$("#rendered488").show();
}
var tRereshRetry2DemoPanel488 = setInterval(rereshRetry2DemoPanel488,1000);
var binded488 = false;
$("textarea#stepcodeTextarea488").keyup(function(){
if(!binded488){
$(window).bind('beforeunload',function(){
binded488 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code488 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code488!=newCode){
// window.frames["iframe488"].document.write("
");
// window.frames["iframe488"].document.write(decodeHtml($("textarea#stepcodeTextarea488").val()));
// window.frames["iframe488"].document.close();
// $(window.frames["iframe488"]).load(function(){
// $("#iframe488").height($("#iframe488").contents().find("body").height()+showittryitheight);
// });
// code488 = newCode;
// }
});
$(".tryButton488").click(function(){
$("#tryDiv488").show();
$("#stepcodeTextarea488").focus();
$("#stepcodeTextarea488").height(200);
$("#iframe488").height(0);
window.frames["iframe488"].document.write("
");
window.frames["iframe488"].document.write(decodeHtml($("textarea#stepcodeTextarea488").val()));
window.frames["iframe488"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe488"]).load(function(){
$("#iframe488").height($("#iframe488").contents().find("body").height()+showittryitheight);
});
$("#iframe488").height($("#iframe488").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor488.focus();
editor488.setSize(null, "250");
$("#rendering488").hide();
$("#rendered488").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 editor488 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea488"), {
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);
}
}
});
editor488.on("change",function(doc){
if(!binded488){
$(window).bind('beforeunload',function(){
binded488 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code488 = newCode;
$("textarea#stepcodeTextarea488").val(newCode);
if(alreadyWriteCode488!=code488){
lastModifedTime488 = new Date().getTime();
$("#rendering488").show();
$("#rendered488").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor488 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor488.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv488").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
文字向左浮动
首先，向左浮动后，会把“坑”让出来，这个时候"正常的文字4“ 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
");
window.frames["iframe_show489"].document.write(decodeHtml($("textarea#stepcodeTextarea489").val()));
window.frames["iframe_show489"].document.close();
$(window.frames["iframe_show489"]).load(function(){
$("#iframe_show489").height($("#iframe_show489").contents().find("body").height()+showittryitheight);
});
$("#iframe_show489").height($("#iframe_show489").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.f{
float:left;
}
</style>
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>
<style>
.f{
float:left;
}
</style>
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>
");
window.frames["iframe489"].document.write(decodeHtml(code489));
window.frames["iframe489"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe489"]).load(function(){
$("#iframe489").height($("#iframe489").contents().find("body").height()+showittryitheight);
});
$("#iframe489").height($("#iframe489").contents().find("body").height()+showittryitheight);
alreadyWriteCode489 = code489;
$("#rendering489").hide();
$("#rendered489").show();
}
var tRereshRetry2DemoPanel489 = setInterval(rereshRetry2DemoPanel489,1000);
var binded489 = false;
$("textarea#stepcodeTextarea489").keyup(function(){
if(!binded489){
$(window).bind('beforeunload',function(){
binded489 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code489 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code489!=newCode){
// window.frames["iframe489"].document.write("
");
// window.frames["iframe489"].document.write(decodeHtml($("textarea#stepcodeTextarea489").val()));
// window.frames["iframe489"].document.close();
// $(window.frames["iframe489"]).load(function(){
// $("#iframe489").height($("#iframe489").contents().find("body").height()+showittryitheight);
// });
// code489 = newCode;
// }
});
$(".tryButton489").click(function(){
$("#tryDiv489").show();
$("#stepcodeTextarea489").focus();
$("#stepcodeTextarea489").height(200);
$("#iframe489").height(0);
window.frames["iframe489"].document.write("
");
window.frames["iframe489"].document.write(decodeHtml($("textarea#stepcodeTextarea489").val()));
window.frames["iframe489"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe489"]).load(function(){
$("#iframe489").height($("#iframe489").contents().find("body").height()+showittryitheight);
});
$("#iframe489").height($("#iframe489").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor489.focus();
editor489.setSize(null, "250");
$("#rendering489").hide();
$("#rendered489").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 editor489 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea489"), {
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);
}
}
});
editor489.on("change",function(doc){
if(!binded489){
$(window).bind('beforeunload',function(){
binded489 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code489 = newCode;
$("textarea#stepcodeTextarea489").val(newCode);
if(alreadyWriteCode489!=code489){
lastModifedTime489 = new Date().getTime();
$("#rendering489").show();
$("#rendered489").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor489 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor489.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv489").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
当图片不浮动时，文字就会换行出现在下面
当图片浮动时，文字围绕着图片
和步骤2一样，当图片浮动的时候，就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，结果发现，尼玛，图片没走，那就只好围绕图片摆放了
");
window.frames["iframe_show490"].document.write(decodeHtml($("textarea#stepcodeTextarea490").val()));
window.frames["iframe_show490"].document.close();
$(window.frames["iframe_show490"]).load(function(){
$("#iframe_show490").height($("#iframe_show490").contents().find("body").height()+showittryitheight);
});
$("#iframe_show490").height($("#iframe_show490").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.f{
float:left;
}
div{
width:320px;
}
</style>
<div >
<img src="http://127.0.0.1/example.gif"/>
<p> 当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
</p>
</div>
<div >
<img class="f" src="http://127.0.0.1/example.gif"/>
<p> 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
<style>
.f{
float:left;
}
div{
width:320px;
}
</style>
<div >
<img src="http://127.0.0.1/example.gif"/>
<p> 当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
</p>
</div>
<div >
<img class="f" src="http://127.0.0.1/example.gif"/>
<p> 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
");
window.frames["iframe490"].document.write(decodeHtml(code490));
window.frames["iframe490"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe490"]).load(function(){
$("#iframe490").height($("#iframe490").contents().find("body").height()+showittryitheight);
});
$("#iframe490").height($("#iframe490").contents().find("body").height()+showittryitheight);
alreadyWriteCode490 = code490;
$("#rendering490").hide();
$("#rendered490").show();
}
var tRereshRetry2DemoPanel490 = setInterval(rereshRetry2DemoPanel490,1000);
var binded490 = false;
$("textarea#stepcodeTextarea490").keyup(function(){
if(!binded490){
$(window).bind('beforeunload',function(){
binded490 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code490 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code490!=newCode){
// window.frames["iframe490"].document.write("
");
// window.frames["iframe490"].document.write(decodeHtml($("textarea#stepcodeTextarea490").val()));
// window.frames["iframe490"].document.close();
// $(window.frames["iframe490"]).load(function(){
// $("#iframe490").height($("#iframe490").contents().find("body").height()+showittryitheight);
// });
// code490 = newCode;
// }
});
$(".tryButton490").click(function(){
$("#tryDiv490").show();
$("#stepcodeTextarea490").focus();
$("#stepcodeTextarea490").height(200);
$("#iframe490").height(0);
window.frames["iframe490"].document.write("
");
window.frames["iframe490"].document.write(decodeHtml($("textarea#stepcodeTextarea490").val()));
window.frames["iframe490"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe490"]).load(function(){
$("#iframe490").height($("#iframe490").contents().find("body").height()+showittryitheight);
});
$("#iframe490").height($("#iframe490").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor490.focus();
editor490.setSize(null, "250");
$("#rendering490").hide();
$("#rendered490").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 editor490 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea490"), {
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);
}
}
});
editor490.on("change",function(doc){
if(!binded490){
$(window).bind('beforeunload',function(){
binded490 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code490 = newCode;
$("textarea#stepcodeTextarea490").val(newCode);
if(alreadyWriteCode490!=code490){
lastModifedTime490 = new Date().getTime();
$("#rendering490").show();
$("#rendered490").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor490 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor490.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv490").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果
");
window.frames["iframe_show491"].document.write(decodeHtml($("textarea#stepcodeTextarea491").val()));
window.frames["iframe_show491"].document.close();
$(window.frames["iframe_show491"]).load(function(){
$("#iframe_show491").height($("#iframe_show491").contents().find("body").height()+showittryitheight);
});
$("#iframe_show491").height($("#iframe_show491").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.f{
float:left;
}
div{
width:320px;
}
.clearp{
clear:left;
}
</style>
<div >
<img class="f" src="http://127.0.0.1/example.gif"/>
<p> 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
<div >
<img class="f" src="http://127.0.0.1/example.gif"/>
<p class="clearp"> 当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
</p>
</div>
<style>
.f{
float:left;
}
div{
width:320px;
}
.clearp{
clear:left;
}
</style>
<div >
<img class="f" src="http://127.0.0.1/example.gif"/>
<p> 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
<div >
<img class="f" src="http://127.0.0.1/example.gif"/>
<p class="clearp"> 当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
</p>
</div>
");
window.frames["iframe491"].document.write(decodeHtml(code491));
window.frames["iframe491"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe491"]).load(function(){
$("#iframe491").height($("#iframe491").contents().find("body").height()+showittryitheight);
});
$("#iframe491").height($("#iframe491").contents().find("body").height()+showittryitheight);
alreadyWriteCode491 = code491;
$("#rendering491").hide();
$("#rendered491").show();
}
var tRereshRetry2DemoPanel491 = setInterval(rereshRetry2DemoPanel491,1000);
var binded491 = false;
$("textarea#stepcodeTextarea491").keyup(function(){
if(!binded491){
$(window).bind('beforeunload',function(){
binded491 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code491 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code491!=newCode){
// window.frames["iframe491"].document.write("
");
// window.frames["iframe491"].document.write(decodeHtml($("textarea#stepcodeTextarea491").val()));
// window.frames["iframe491"].document.close();
// $(window.frames["iframe491"]).load(function(){
// $("#iframe491").height($("#iframe491").contents().find("body").height()+showittryitheight);
// });
// code491 = newCode;
// }
});
$(".tryButton491").click(function(){
$("#tryDiv491").show();
$("#stepcodeTextarea491").focus();
$("#stepcodeTextarea491").height(200);
$("#iframe491").height(0);
window.frames["iframe491"].document.write("
");
window.frames["iframe491"].document.write(decodeHtml($("textarea#stepcodeTextarea491").val()));
window.frames["iframe491"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe491"]).load(function(){
$("#iframe491").height($("#iframe491").contents().find("body").height()+showittryitheight);
});
$("#iframe491").height($("#iframe491").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor491.focus();
editor491.setSize(null, "250");
$("#rendering491").hide();
$("#rendered491").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 editor491 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea491"), {
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);
}
}
});
editor491.on("change",function(doc){
if(!binded491){
$(window).bind('beforeunload',function(){
binded491 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code491 = newCode;
$("textarea#stepcodeTextarea491").val(newCode);
if(alreadyWriteCode491!=code491){
lastModifedTime491 = new Date().getTime();
$("#rendering491").show();
$("#rendered491").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor491 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor491.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv491").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
");
window.frames["iframe_show492"].document.write(decodeHtml($("textarea#stepcodeTextarea492").val()));
window.frames["iframe_show492"].document.close();
$(window.frames["iframe_show492"]).load(function(){
$("#iframe_show492").height($("#iframe_show492").contents().find("body").height()+showittryitheight);
});
$("#iframe_show492").height($("#iframe_show492").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div#floatingDiv{
width:200px;
}
div#floatingDiv div{
float:left;
}
</style>
默认的div排列是会换行的
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
<div id="floatingDiv">
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
<div>
菜单4
</div>
<div>
菜单5
</div>
<div>
菜单6
</div>
</div>
<style>
div#floatingDiv{
width:200px;
}
div#floatingDiv div{
float:left;
}
</style>
默认的div排列是会换行的
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
<div id="floatingDiv">
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
<div>
菜单4
</div>
<div>
菜单5
</div>
<div>
菜单6
</div>
</div>
");
window.frames["iframe492"].document.write(decodeHtml(code492));
window.frames["iframe492"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe492"]).load(function(){
$("#iframe492").height($("#iframe492").contents().find("body").height()+showittryitheight);
});
$("#iframe492").height($("#iframe492").contents().find("body").height()+showittryitheight);
alreadyWriteCode492 = code492;
$("#rendering492").hide();
$("#rendered492").show();
}
var tRereshRetry2DemoPanel492 = setInterval(rereshRetry2DemoPanel492,1000);
var binded492 = false;
$("textarea#stepcodeTextarea492").keyup(function(){
if(!binded492){
$(window).bind('beforeunload',function(){
binded492 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code492 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code492!=newCode){
// window.frames["iframe492"].document.write("
");
// window.frames["iframe492"].document.write(decodeHtml($("textarea#stepcodeTextarea492").val()));
// window.frames["iframe492"].document.close();
// $(window.frames["iframe492"]).load(function(){
// $("#iframe492").height($("#iframe492").contents().find("body").height()+showittryitheight);
// });
// code492 = newCode;
// }
});
$(".tryButton492").click(function(){
$("#tryDiv492").show();
$("#stepcodeTextarea492").focus();
$("#stepcodeTextarea492").height(200);
$("#iframe492").height(0);
window.frames["iframe492"].document.write("
");
window.frames["iframe492"].document.write(decodeHtml($("textarea#stepcodeTextarea492").val()));
window.frames["iframe492"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe492"]).load(function(){
$("#iframe492").height($("#iframe492").contents().find("body").height()+showittryitheight);
});
$("#iframe492").height($("#iframe492").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor492.focus();
editor492.setSize(null, "250");
$("#rendering492").hide();
$("#rendered492").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 editor492 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea492"), {
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);
}
}
});
editor492.on("change",function(doc){
if(!binded492){
$(window).bind('beforeunload',function(){
binded492 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code492 = newCode;
$("textarea#stepcodeTextarea492").val(newCode);
if(alreadyWriteCode492!=code492){
lastModifedTime492 = new Date().getTime();
$("#rendering492").show();
$("#rendered492").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor492 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor492.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv492").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
