《CodePlayer》小项目
2016-04-03 21:49
441 查看
1.项目源码:
2.代码分析:
1>$(“p”).toggleClass(“selected”); —-在段落p上添加或取消selected class样式;
2>$(“p”).toggle();—开启或关闭段落p的样式。
3>
—–filter过滤器,过滤出class=”.codecontainer”中样式不为“none”(空)的div。
4>$(“iframe”).contents()—-获得iframe元素集合中每个元素的子元素,包括文本和注释节点。
5>$(“iframe”).find(“body”);-!—获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
6>$(“#htmlCode”).val();—-获取id=”htmlCode”的值;
7>document.getElementById(“resultFrame”).contentWindow;—-指定的frame或者iframe所在的window对象;
在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。
8>eval($(“#jsCode”).val());—-eval()里面执行一段js代码;
<html> <head> <title>jQuery</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #menubar { width:100%; height:50px; background:lightgray; font-size:25px; border:1px solid black; } #logo { padding:5px; font-weight:bold; float:left; margin-left:50px; } ul { padding:0; margin:0; border:0; } #filetype { width:239px; height:35px; margin:0 auto; list-style:none; border:1px solid black; border-radius:5px; } #filetype li { float:left; border-right:1px solid black; padding:2px 5px; } #run { width:70px; float:right; position:relative; top:5px; font-size:25px; margin-right:50px; } #container { width:100%; height:100%; } .codelabel { font-size:25px; position:absolute; right:15px; top:15px; } textarea { padding:0; margin:0; border:0; } #htmlCode, #cssCode, #jsCode { width:100%; height:100%; border-right:1px solid black; padding:15px; font-size:25px; } #JSContainer, #CSSContainer { display:none; } .codecontainer { float:left; width:50%; height:100%; position:relative; } iframe { width:100%; height:100%; padding:0; margin:0; border:0; } .selected { background:gray; } </style> </head> <body> <div id="codeplayer"> <div id="menubar"> <div id="logo">CodePlayer</div> <button id="run">Run</button> <ul id="filetype"> <li class="file">HTML</li> <li class="file">CSS</li> <li class="file">JS</li> <li style="border:none" class="file">Result</li> </ul> </div> <div id="container"> <div class="codecontainer" id="HTMLContainer"> <textarea id="htmlCode"><div id="con"></div></textarea> <div class="codelabel">HTML</div> </div> <div class="codecontainer" id="CSSContainer"> <textarea id="cssCode">body {background:red}</textarea> <div class="codelabel">CSS</div> </div> <div class="codecontainer" id="JSContainer"> <textarea id="jsCode">document.getElementById("con").innerHTML ="hello world!";</textarea> <div class="codelabel">JS</div> <!-- document.getElementById("con").innerHTML ="hello world!"; --> </div> <div class="codecontainer" id="ResultContainer"> <div class="codelabel">Result</div> <iframe id="resultFrame"></iframe> </div> </div> </div> <script type="text/javascript"> $(".file").click(function() { $(this).toggleClass("selected"); //删除或添加selected类样式 var activeDiv = $(this).html(); //alert(activeDiv); $("#"+activeDiv+"Container").toggle(); var showingDivs = $(".codecontainer").filter(function() { return($(this).css("display") != "none"); }).length; //alert(showingDivs); var width = 100/showingDivs; $(".codecontainer").css("width", width+"%"); }); $("#run").click(function() { $("iframe").contents().find("body").html("<style>"+$("#cssCode").val()+"</style>" + $("#htmlCode").val()); //eval();执行一段js代码 document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val()); }); </script> </body> </html>
2.代码分析:
1>$(“p”).toggleClass(“selected”); —-在段落p上添加或取消selected class样式;
2>$(“p”).toggle();—开启或关闭段落p的样式。
3>
$(".codecontainer").filter(function() { return($(this).css("display") != "none"); });
—–filter过滤器,过滤出class=”.codecontainer”中样式不为“none”(空)的div。
4>$(“iframe”).contents()—-获得iframe元素集合中每个元素的子元素,包括文本和注释节点。
5>$(“iframe”).find(“body”);-!—获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
6>$(“#htmlCode”).val();—-获取id=”htmlCode”的值;
7>document.getElementById(“resultFrame”).contentWindow;—-指定的frame或者iframe所在的window对象;
在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。
8>eval($(“#jsCode”).val());—-eval()里面执行一段js代码;
相关文章推荐
- 笔记---ImageLoader实现图片压缩,缓存
- EM algorithm in Gaussian mixture model
- 每天laravel-20160628|TaggedCache
- LeetCode OJ刷题历程——Contains Duplicate
- 浅谈三层架构
- 排序算法之简单选择排序(Java)
- 排序算法之堆排序(Java)
- 编程面试过程中常见的10大算法
- HDU-4961 Boring Sum (模拟)
- 大型服务器架构之MySQL
- XPath对XML文档的解析
- 20159320《网络攻防实践》第5周教材总结
- 《算法竞赛入门经典》6.1栈和队列-卡片游戏
- 20160402javaweb 开发模式
- liunx新手需要掌握的基础命令(一)
- 天气插件调用
- leetcode 278. First Bad Version
- tomcat如何开启GZIP
- UVA 10537(最短路)
- JAVA大数类 BigInteger和BigDecimal用法