前端开发博客

这里会共享一些前端方面的咨询、技术以及自己写的一些代码,主要是记录自己的学习过程的一个博客。

当前位置:首页 > jquery

自己写的jquery实现的一个页面运行多个运行代码框

时间:2012-09-28 10:22:45  来源:  作者:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<style>
*{ margin:0px; padding:0px; font-size:12px;}
textarea.content{ border:1px solid #000; padding:10px; margin:10px;}
</style>
<div id="content">
    <div class="run">
        <textarea class="textareaText" style="width:600px; height:150px;">
            <span style="color:#C60">我是问题111111111111</span>
        </textarea>
        <input type="button" class="newpage" value="运行代码">
    </div>
    1111111111111111111
    <div class="run">
        <textarea class="textareaText" style="width:600px; height:150px;">
            <span style="color:#C60">我是问题22222222222222</span>
        </textarea>
        <input type="button" class="newpage" value="运行代码">
    </div>
    32222222222222222
    <div class="run">
        <textarea class="textareaText" style="width:600px; height:150px;">
            <span style="color:#C60">我是问题333333333333333333</span>
        </textarea>
        <input type="button" class="newpage" value="运行代码">
    </div>
    3333333333333333333
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(".run").each(function(){
 $(this).find("input.newpage").click(function(){
  var codes = $(this).parent().find(".textareaText").text();
  var newpage=window.open("about:blank");
  newpage.document.title="测试页面";
  newpage.document.write(codes);
 }) 
})
</script>
</body>
</html>