amin1softco
دوشنبه 27 شهریور 1391, 18:43 عصر
زیاد احتیاج به زبان سرور ساید مثل php نداره نمونه :
در فایرفاکس تست شد.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Tryit Editor v1.5</title>
<style>
body
{
color:#000000;
background-color:#ffffff;
margin:4px;
margin-top:0px;
}
.maintable
{
width:100%;
background-color:#e5eecc;
color:#000000;
border:solid #c3c3c3 1px;
margin-left:0px;
}
.code_input, .result_output
{
border:1px solid #c3c3c3;
width:100%;
height:400px;
background-color:#ffffff;
color:#000000;
}
.toptext
{
color:#617f10;
font-family:verdana;
margin-top:0px;
margin-bottom:8px;
font-size:120%;
}
.result_header
{
color:#617f10;
margin-bottom:12px;
margin-top:0px;
font-family:verdana;
font-size:90%;
}
.bottomtext_div
{
margin-right:3px;
}
.bottomtext
{
color:#617f10;
font-family:verdana;
margin-bottom:0px;
margin-top:6px;
font-size:90%;
}
.toprect_txt a:link,.toprect_txt a:visited {text-decoration:none;color:#900B09;background-color:transparent}
.toprect_txt a:hover,.toprect_txt a:active {text-decoration:underline;color:#FF0000;background-color:transparent}
div.toprect_txt
{
font-family:verdana,helvetica,arial,sans-serif;
position:absolute;
left:0px;top:0px;
width:225px;height:84px;
padding:0px;margin:0px;padding-top:4px;
border:1px solid #c3c3c3;
color:#606060;
text-align:center;
font-size:12px;
}
div.toprect_img
{
font-family:verdana,helvetica,arial,sans-serif;
position:absolute;
left:0px;top:0px;
width:227px;height:90px;
margin:0px;padding:0px;
color:#606060;
text-align:center;
font-size:12px;
}
</style>
<script type="text/javascript">
function displayad()
{
var t=document.getElementById("pre_code").value;
t=t.replace(/=/gi,"w3equalsign");
var pos=t.search(/script/i)
while (pos>0)
{
t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6);
pos=t.search(/script/i);
}
document.getElementById("code").value=t;
document.getElementById("view").contentWindow.document.body.innerHTML=document.g etElementById("pre_code").value;
document.getElementById('view').innerHTML=document .getElementById("pre_code").value;
}
function validateForm()
{
var code=document.getElementById("code").value;
if (code.length>5000)
{
document.getElementById("code").value="<h1>Error</h1>";
}
}
</script>
</head>
<body>
<div style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;">
<div style="width:960px;height:94px;position:relative;margin:0 px;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;padding:0px;overflow:hidden">
<!-- TopRectangle -->
<div id='div-gpt-ad-1343810007679-5' style='width:227px; height:90px;'>
</div>
<div style="width:728px;height:90px;position:absolute;right:0p x;top:0px;margin:0;padding:0;overflow:hidden;">
<!-- TryitLeaderboard -->
<div id='div-gpt-ad-1343810007679-6' style='width:728px; height:90px;'>
</div>
</div></div>
</div>
<table border="0" class="maintable" cellpadding="3px" cellspacing="3px">
<tr>
<td width="50%">
<input style="margin-bottom:5px;font-family:verdana;" name="submit" type="submit" value="Edit and Click Me »" onclick="displayad()">
<textarea class="code_input" width="100%" height="400px" id="pre_code" wrap="logical">
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Firefox 4+, Safari, and Chrome support the resize property.</p>
<div>The resize property specifies whether or not an element is resizable by the user.</div>
</body>
</html>
</textarea>
<input type="hidden" name="code" id="code" />
<input type="hidden" id="bt" name="bt" />
</td>
<td valign="top">
<p class="result_header">Your Result:</p>
<iframe class="result_output" width="100%" height="400px" frameborder="0" name="view" id="view" ></iframe>
</td>
</tr>
<tr>
<td align="left" class="bottomtext">
Edit the code above and click to see the result.
</td>
<td align="right" class="bottomtext">
<a style="color:#617f10" href="http://www.w3schools.com">W3Schools.com</a> - Try it yourself
</td>
</tr>
</table>
</body>
</html>