您的位置：首页 > 其它

《CodePlayer》小项目

2016-04-03 21:49 387 查看

1.项目源码：

<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代码；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航