|
|
示例
1
:
单选框
示例
2
:
默认选中
示例
3
:
分组
两个单选，都可以同时选中。 为了达到，同一时间，只能选中其一的效果，需要使用 分组
");
window.frames["iframe_show362"].document.write(decodeHtml($("textarea#stepcodeTextarea362").val()));
window.frames["iframe_show362"].document.close();
$(window.frames["iframe_show362"]).load(function(){
$("#iframe_show362").height($("#iframe_show362").contents().find("body").height()+showittryitheight);
});
$("#iframe_show362").height($("#iframe_show362").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
单选1 <input type="radio" >
单选2 <input type="radio" >
单选1 <input type="radio" >
单选2 <input type="radio" >
");
window.frames["iframe362"].document.write(decodeHtml(code362));
window.frames["iframe362"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe362"]).load(function(){
$("#iframe362").height($("#iframe362").contents().find("body").height()+showittryitheight);
});
$("#iframe362").height($("#iframe362").contents().find("body").height()+showittryitheight);
alreadyWriteCode362 = code362;
$("#rendering362").hide();
$("#rendered362").show();
}
var tRereshRetry2DemoPanel362 = setInterval(rereshRetry2DemoPanel362,1000);
var binded362 = false;
$("textarea#stepcodeTextarea362").keyup(function(){
if(!binded362){
$(window).bind('beforeunload',function(){
binded362 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code362 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code362!=newCode){
// window.frames["iframe362"].document.write("
");
// window.frames["iframe362"].document.write(decodeHtml($("textarea#stepcodeTextarea362").val()));
// window.frames["iframe362"].document.close();
// $(window.frames["iframe362"]).load(function(){
// $("#iframe362").height($("#iframe362").contents().find("body").height()+showittryitheight);
// });
// code362 = newCode;
// }
});
$(".tryButton362").click(function(){
$("#tryDiv362").show();
$("#stepcodeTextarea362").focus();
$("#stepcodeTextarea362").height(200);
$("#iframe362").height(0);
window.frames["iframe362"].document.write("
");
window.frames["iframe362"].document.write(decodeHtml($("textarea#stepcodeTextarea362").val()));
window.frames["iframe362"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe362"]).load(function(){
$("#iframe362").height($("#iframe362").contents().find("body").height()+showittryitheight);
});
$("#iframe362").height($("#iframe362").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor362.focus();
editor362.setSize(null, "250");
$("#rendering362").hide();
$("#rendered362").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 editor362 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea362"), {
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);
}
}
});
editor362.on("change",function(doc){
if(!binded362){
$(window).bind('beforeunload',function(){
binded362 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code362 = newCode;
$("textarea#stepcodeTextarea362").val(newCode);
if(alreadyWriteCode362!=code362){
lastModifedTime362 = new Date().getTime();
$("#rendering362").show();
$("#rendered362").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor362 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor362.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv362").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show363"].document.write(decodeHtml($("textarea#stepcodeTextarea363").val()));
window.frames["iframe_show363"].document.close();
$(window.frames["iframe_show363"]).load(function(){
$("#iframe_show363").height($("#iframe_show363").contents().find("body").height()+showittryitheight);
});
$("#iframe_show363").height($("#iframe_show363").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
默认选中 <input type="radio" checked="checked" >
默认选中 <input type="radio" checked="checked" >
");
window.frames["iframe363"].document.write(decodeHtml(code363));
window.frames["iframe363"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe363"]).load(function(){
$("#iframe363").height($("#iframe363").contents().find("body").height()+showittryitheight);
});
$("#iframe363").height($("#iframe363").contents().find("body").height()+showittryitheight);
alreadyWriteCode363 = code363;
$("#rendering363").hide();
$("#rendered363").show();
}
var tRereshRetry2DemoPanel363 = setInterval(rereshRetry2DemoPanel363,1000);
var binded363 = false;
$("textarea#stepcodeTextarea363").keyup(function(){
if(!binded363){
$(window).bind('beforeunload',function(){
binded363 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code363 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code363!=newCode){
// window.frames["iframe363"].document.write("
");
// window.frames["iframe363"].document.write(decodeHtml($("textarea#stepcodeTextarea363").val()));
// window.frames["iframe363"].document.close();
// $(window.frames["iframe363"]).load(function(){
// $("#iframe363").height($("#iframe363").contents().find("body").height()+showittryitheight);
// });
// code363 = newCode;
// }
});
$(".tryButton363").click(function(){
$("#tryDiv363").show();
$("#stepcodeTextarea363").focus();
$("#stepcodeTextarea363").height(200);
$("#iframe363").height(0);
window.frames["iframe363"].document.write("
");
window.frames["iframe363"].document.write(decodeHtml($("textarea#stepcodeTextarea363").val()));
window.frames["iframe363"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe363"]).load(function(){
$("#iframe363").height($("#iframe363").contents().find("body").height()+showittryitheight);
});
$("#iframe363").height($("#iframe363").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor363.focus();
editor363.setSize(null, "250");
$("#rendering363").hide();
$("#rendered363").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 editor363 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea363"), {
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);
}
}
});
editor363.on("change",function(doc){
if(!binded363){
$(window).bind('beforeunload',function(){
binded363 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code363 = newCode;
$("textarea#stepcodeTextarea363").val(newCode);
if(alreadyWriteCode363!=code363){
lastModifedTime363 = new Date().getTime();
$("#rendering363").show();
$("#rendered363").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor363 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor363.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv363").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框
设置name属性相同即可
");
window.frames["iframe_show364"].document.write(decodeHtml($("textarea#stepcodeTextarea364").val()));
window.frames["iframe_show364"].document.close();
$(window.frames["iframe_show364"]).load(function(){
$("#iframe_show364").height($("#iframe_show364").contents().find("body").height()+showittryitheight);
});
$("#iframe_show364").height($("#iframe_show364").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<p>今天晚上做什么？</p>
学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity" value="lol"> <br/>
<p>今天晚上做什么？</p>
学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity" value="lol"> <br/>
");
window.frames["iframe364"].document.write(decodeHtml(code364));
window.frames["iframe364"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe364"]).load(function(){
$("#iframe364").height($("#iframe364").contents().find("body").height()+showittryitheight);
});
$("#iframe364").height($("#iframe364").contents().find("body").height()+showittryitheight);
alreadyWriteCode364 = code364;
$("#rendering364").hide();
$("#rendered364").show();
}
var tRereshRetry2DemoPanel364 = setInterval(rereshRetry2DemoPanel364,1000);
var binded364 = false;
$("textarea#stepcodeTextarea364").keyup(function(){
if(!binded364){
$(window).bind('beforeunload',function(){
binded364 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code364 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code364!=newCode){
// window.frames["iframe364"].document.write("
");
// window.frames["iframe364"].document.write(decodeHtml($("textarea#stepcodeTextarea364").val()));
// window.frames["iframe364"].document.close();
// $(window.frames["iframe364"]).load(function(){
// $("#iframe364").height($("#iframe364").contents().find("body").height()+showittryitheight);
// });
// code364 = newCode;
// }
});
$(".tryButton364").click(function(){
$("#tryDiv364").show();
$("#stepcodeTextarea364").focus();
$("#stepcodeTextarea364").height(200);
$("#iframe364").height(0);
window.frames["iframe364"].document.write("
");
window.frames["iframe364"].document.write(decodeHtml($("textarea#stepcodeTextarea364").val()));
window.frames["iframe364"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe364"]).load(function(){
$("#iframe364").height($("#iframe364").contents().find("body").height()+showittryitheight);
});
$("#iframe364").height($("#iframe364").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor364.focus();
editor364.setSize(null, "250");
$("#rendering364").hide();
$("#rendered364").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 editor364 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea364"), {
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);
}
}
});
editor364.on("change",function(doc){
if(!binded364){
$(window).bind('beforeunload',function(){
binded364 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code364 = newCode;
$("textarea#stepcodeTextarea364").val(newCode);
if(alreadyWriteCode364!=code364){
lastModifedTime364 = new Date().getTime();
$("#rendering364").show();
$("#rendered364").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor364 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor364.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv364").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
