");
window.frames["iframe_show3586"].document.write(decodeHtml($("textarea#stepcodeTextarea3586").val()));
window.frames["iframe_show3586"].document.close();
$(window.frames["iframe_show3586"]).load(function(){
$("#iframe_show3586").height($("#iframe_show3586").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3586").height($("#iframe_show3586").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.knowledge{
font-size:1.2em;
culor:#000;
margin:10px;
margin-left:20px;
font-weight:buld;
display:list-item;
}
li.function{
text-decoration:underline;
}
li{
font-size:0.9em;
}
</style>
<script>
$(function(){
$("li.step").addClass("text-success");
$("li.function").addClass("text-danger");
})
</script>
<ol>
<div class='knowledge'>首页</div>
<ul>
<li class='step'>在横向导航栏上提供4个分类连接</li>
<li class='step'>在纵向导航栏上提供全部17个分类连接</li>
<li class='step'>当鼠标移动到某一个纵向分类连接的时候，显示这个分类下的推荐商品</li>
<li class='step'>按照每种分类，显示5个商品的方式显示所有17种分类</li>
</ul>
<div class='knowledge'>产品页</div>
<ul>
<li class='step'>显示分辨率为950x100的当前商品对应的分类图片</li>
<li class='step'>显示本商品的5个单独图片</li>
<li class='step'>商品的基本信息，如标题，小标题，加个，销量，评价数量，库存等</li>
<li class='step'>商品详情</li>
<li class='step'>评价信息</li>
<li class='step'>5张商品详细图片</li>
<li class='function'>立即购买</li>
<li class='function'>加入购物车</li>
</ul>
<div class='knowledge'>分类页</div>
<ul>
<li class='step'>显示分辨率为950x100的当前分类图片</li>
<li class='step'>显示本分类下的所有产品</li>
<li class='function'>分类页排序</li>
</ul>
<div class='knowledge'>搜索结果页</div>
<ul>
<li class='step'>显示满足查询条件的商品</li>
</ul>
<div class='knowledge'>购物车查看页</div>
<ul>
<li class='step'>在购物车中显示订单项</li>
<li class='function'>调整订单项数量</li>
<li class='function'>删除订单项</li>
</ul>
<div class='knowledge'>结算页</div>
<ul>
<li class='step'>在结算页面显示被选中的订单项</li>
<li class='function'>生成订单</li>
</ul>
<div class='knowledge'>确认支付页</div>
<ul>
<li class='step'>确认支付页面显示本次订单的金额总数</li>
<li class='function'>确认付款</li>
</ul>
<div class='knowledge'>支付成功页</div>
<ul>
<li class='step'>付款成功时，显示本次付款金额</li>
</ul>
<div class='knowledge'>我的订单页</div>
<ul>
<li class='step'>显示所有订单，以及对应的订单项</li>
</ul>
<div class='knowledge'>确认收货页</div>
<ul>
<li class='step'>显示订单项内容</li>
<li class='step'>显示订单信息，收货人地址等</li>
<li class='function'>确认收货</li>
</ul>
<div class='knowledge'>评价页</div>
<ul>
<li class='step'>显示要评价的商品信息，商品当前的总评价数</li>
<li class='step'>评价成功后，显示当前商品所有的评价信息</li>
<li class='function'>提交评价信息</li>
</ul>
<div class='knowledge'>页头信息展示</div>
<ul>
<li class='step'>未登录状态</li>
<li class='step'>已登录状态</li>
<li class='function'>登录</li>
<li class='function'>注册</li>
<li class='function'>退出</li>
</ul>
<div class='knowledge'>所有页面</div>
<ul>
<li class='function'>搜索</li>
</ul>
</div>
</ol>
<!DOCTYPE html>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.knowledge{
font-size:1.2em;
culor:#000;
margin:10px;
margin-left:20px;
font-weight:buld;
display:list-item;
}
li.function{
text-decoration:underline;
}
li{
font-size:0.9em;
}
</style>
<script>
$(function(){
$("li.step").addClass("text-success");
$("li.function").addClass("text-danger");
})
</script>
<ol>
<div class='knowledge'>首页</div>
<ul>
<li class='step'>在横向导航栏上提供4个分类连接</li>
<li class='step'>在纵向导航栏上提供全部17个分类连接</li>
<li class='step'>当鼠标移动到某一个纵向分类连接的时候，显示这个分类下的推荐商品</li>
<li class='step'>按照每种分类，显示5个商品的方式显示所有17种分类</li>
</ul>
<div class='knowledge'>产品页</div>
<ul>
<li class='step'>显示分辨率为950x100的当前商品对应的分类图片</li>
<li class='step'>显示本商品的5个单独图片</li>
<li class='step'>商品的基本信息，如标题，小标题，加个，销量，评价数量，库存等</li>
<li class='step'>商品详情</li>
<li class='step'>评价信息</li>
<li class='step'>5张商品详细图片</li>
<li class='function'>立即购买</li>
<li class='function'>加入购物车</li>
</ul>
<div class='knowledge'>分类页</div>
<ul>
<li class='step'>显示分辨率为950x100的当前分类图片</li>
<li class='step'>显示本分类下的所有产品</li>
<li class='function'>分类页排序</li>
</ul>
<div class='knowledge'>搜索结果页</div>
<ul>
<li class='step'>显示满足查询条件的商品</li>
</ul>
<div class='knowledge'>购物车查看页</div>
<ul>
<li class='step'>在购物车中显示订单项</li>
<li class='function'>调整订单项数量</li>
<li class='function'>删除订单项</li>
</ul>
<div class='knowledge'>结算页</div>
<ul>
<li class='step'>在结算页面显示被选中的订单项</li>
<li class='function'>生成订单</li>
</ul>
<div class='knowledge'>确认支付页</div>
<ul>
<li class='step'>确认支付页面显示本次订单的金额总数</li>
<li class='function'>确认付款</li>
</ul>
<div class='knowledge'>支付成功页</div>
<ul>
<li class='step'>付款成功时，显示本次付款金额</li>
</ul>
<div class='knowledge'>我的订单页</div>
<ul>
<li class='step'>显示所有订单，以及对应的订单项</li>
</ul>
<div class='knowledge'>确认收货页</div>
<ul>
<li class='step'>显示订单项内容</li>
<li class='step'>显示订单信息，收货人地址等</li>
<li class='function'>确认收货</li>
</ul>
<div class='knowledge'>评价页</div>
<ul>
<li class='step'>显示要评价的商品信息，商品当前的总评价数</li>
<li class='step'>评价成功后，显示当前商品所有的评价信息</li>
<li class='function'>提交评价信息</li>
</ul>
<div class='knowledge'>页头信息展示</div>
<ul>
<li class='step'>未登录状态</li>
<li class='step'>已登录状态</li>
<li class='function'>登录</li>
<li class='function'>注册</li>
<li class='function'>退出</li>
</ul>
<div class='knowledge'>所有页面</div>
<ul>
<li class='function'>搜索</li>
</ul>
</div>
</ol>
");
window.frames["iframe3586"].document.write(decodeHtml(code3586));
window.frames["iframe3586"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3586"]).load(function(){
$("#iframe3586").height($("#iframe3586").contents().find("body").height()+showittryitheight);
});
$("#iframe3586").height($("#iframe3586").contents().find("body").height()+showittryitheight);
alreadyWriteCode3586 = code3586;
$("#rendering3586").hide();
$("#rendered3586").show();
}
var tRereshRetry2DemoPanel3586 = setInterval(rereshRetry2DemoPanel3586,1000);
var binded3586 = false;
$("textarea#stepcodeTextarea3586").keyup(function(){
if(!binded3586){
$(window).bind('beforeunload',function(){
binded3586 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3586 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3586!=newCode){
// window.frames["iframe3586"].document.write("
");
// window.frames["iframe3586"].document.write(decodeHtml($("textarea#stepcodeTextarea3586").val()));
// window.frames["iframe3586"].document.close();
// $(window.frames["iframe3586"]).load(function(){
// $("#iframe3586").height($("#iframe3586").contents().find("body").height()+showittryitheight);
// });
// code3586 = newCode;
// }
});
$(".tryButton3586").click(function(){
$("#tryDiv3586").show();
$("#stepcodeTextarea3586").focus();
$("#stepcodeTextarea3586").height(200);
$("#iframe3586").height(0);
window.frames["iframe3586"].document.write("
");
window.frames["iframe3586"].document.write(decodeHtml($("textarea#stepcodeTextarea3586").val()));
window.frames["iframe3586"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3586"]).load(function(){
$("#iframe3586").height($("#iframe3586").contents().find("body").height()+showittryitheight);
});
$("#iframe3586").height($("#iframe3586").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3586.focus();
editor3586.setSize(null, "250");
$("#rendering3586").hide();
$("#rendered3586").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 editor3586 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3586"), {
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);
}
}
});
editor3586.on("change",function(doc){
if(!binded3586){
$(window).bind('beforeunload',function(){
binded3586 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3586 = newCode;
$("textarea#stepcodeTextarea3586").val(newCode);
if(alreadyWriteCode3586!=code3586){
lastModifedTime3586 = new Date().getTime();
$("#rendering3586").show();
$("#rendered3586").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3586 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3586.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3586").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
